花开富贵 的个人博客

1 QGroupBox

QGroupBox是一个带有标题的分组框, 可以将其他的控件放到该空间内作为一组, 以对布局进行更好的控制同时增加界面美观;

QGroupBox与QButtonGroup不同, 其中后者通常是为QRadioButton等按钮控件进行分组, 以实现不同组之间的QRadioButton不会影响其他组的排他属性;

需要注意的是, 当QGroupBox内存在其他控件时, 这些控件的父对象是QGroupBox而不是QWidget;

1.1 核心属性

该控件主要是用于美化布局等, 没有实际的功能;

1.2 代码示例 - 点餐系统

再次模拟一个点单系统, 与以往的点餐系统大致相同;

• 所需控件

  • QGroupBox * 3

    用于进行分组;

  • QComboBox * 3

    作为需要的品类;

  • QSPinBox * 3

    对应品类的数量;

  • QLabel

    选完后动态查看预选项;

  • QPushButton

    点击后弹窗显示预购信息;

  

1. 初始化

   依次对QGroupBox的Title, QComboBox的选项, QSPinBox的最小/大数量, QLabel的显示, QPushButton的text()进行初始化;

   Widget::Widget(QWidget *parent)
       : QWidget(parent)
       , ui(new Ui::Widget)
   {
       ui->setupUi(this);
   
       ui->label->setText("");
       ui->pushButton->setText("确认");
   
       ui->groupBox->setTitle("主食");
       ui->groupBox_2->setTitle("小食");
       ui->groupBox_3->setTitle("饮料");
   
       QStringList stapleFoods({"香辣鸡腿堡", "麦辣鸡腿堡", "香辣鸡肉卷"});
       QStringList Snacks({"香辣鸡翅", "奥尔良烤翅", "黄金鸡块"});
       QStringList Beverages({"可乐","可乐(无糖)", "雪碧", "雪碧(无糖)", "美式", "牛奶" });
   
       ui->comboBox->addItems(stapleFoods);
       ui->comboBox_2->addItems(Snacks);
       ui->comboBox_3->addItems(Beverages);
   
       ui->spinBox->setMinimum(1);
       ui->spinBox_2->setMinimum(1);
       ui->spinBox_3->setMinimum(1);
   
       ui->spinBox->setMaximum(5);
       ui->spinBox_2->setMaximum(5);
       ui->spinBox_3->setMaximum(5);
           
       // 初始化显示
       showNewMessage();
   }
   

2. 设计辅助函数

   辅助函数重点对点餐信息进行获取;

   QString Widget::getOrderSummary(const QString &separator)
   {
       QString line1 = ui->comboBox->currentText() + " * " + QString::number(ui->spinBox->value());
       QString line2 = ui->comboBox_2->currentText() + " * " + QString::number(ui->spinBox_2->value());
       QString line3 = ui->comboBox_3->currentText() + " * " + QString::number(ui->spinBox_3->value());
   
       return line1 + separator + line2 + separator + line3;
   }
   

   除此之外, 当无论是QComboBox还是QSPinBox发生变化时, 都需要变化QLabel中的内容, 属于同一份代码, 可以封装并进行复用从而减少冗余代码;

   /*
       # 5) 实时显示逻辑
       直接调用 getOrderSummary，传入双换行符 "\n\n" 以增加行间距。
   */
   void Widget::showNewMessage()
   {
       // 调用封装函数，使用双换行以便于 Label 显示
       QString details = getOrderSummary("\n\n");
   
       ui->label->setText("选择的套餐为: \n\n" + details);
   }
   

3. 更新QLabel的槽函数设计

   无论是QComboBox还是QSPinBox发生变化时, 都需要调用显示函数来更新QLabel中的内容;

   /*
       # 2) 所有控件变动都调用 showNewMessage
   */
   void Widget::on_comboBox_currentIndexChanged(int index) { (void)index; showNewMessage(); }
   void Widget::on_comboBox_2_currentIndexChanged(int index) { (void)index; showNewMessage(); }
   void Widget::on_comboBox_3_currentIndexChanged(int index) { (void)index; showNewMessage(); }
   void Widget::on_spinBox_valueChanged(int arg1) { (void)arg1; showNewMessage(); }
   void Widget::on_spinBox_2_valueChanged(int arg1) { (void)arg1; showNewMessage(); }
   void Widget::on_spinBox_3_valueChanged(int arg1) { (void)arg1; showNewMessage(); }
   

4. PushButton按钮的槽函数

   当按钮按下时, 需要弹出弹窗, 并显示预购信息;

   /*
       # 4) 直接调用 getOrderSummary，传入单换行符 "\n"，代码更加简洁。
   */
   void Widget::on_pushButton_clicked()
   {
       // 调用封装函数，使用单换行
       QString details = getOrderSummary("\n");
       
       QString str = "您购买的套餐为: \n" + details + "\n";
       QMessageBox::information(nullptr, "预购信息", str);
   }
   

5. 运行结果

   

从结果可以看出, 对应的元素在GroupBox的约束下更加美观;

当然此前提到, 在GroupBox中存在checkable与flat属性, 在此对齐进行演示;

其中flat属性开启时, 外框将变为一条直线(可能不同操作系统所显示有所不同), 其次是将checkable开启时, 将会出现复选框, 取消勾选则内部控件禁用;

2 QTabWidget

不要将QTabWidget与QTableWidget进行混淆, 其中前者为容器类控件, 后者则为多元素控件, 二者在使用上有本质的区别;

针对QTabWidget而言, 其提供了一组标签类的容器, 不同的标签下都存在不同的内容, 类比于浏览器;

进行基本介绍, 具体使用不进行赘述;

2.1 核心属性

2.2 核心信号