目录

1.1 Group Box 

1.2 Tab Widget 

---

1.1 Group Box 

GroupBox是GUI编程中常见的一种容器类部件，其主要功能是将相关的其他部件组织在一起，并且提供了视觉上的分组效果。

• 注意：不要把 QGroupBox 和 QButtonGroup 混淆. (之前在介绍 QRadionButton 的时候提 到了 QButtonGroup ).

核心属性  

属性	说明
title	分组框的标题
alignment	分组框内部内容的对⻬⽅式
flat	是否是 "扁平" 模式
checkable	是否可选择. 设为 true, 则在 title 前⽅会多出⼀个可勾选的部分.
checked	描述分组框的选择状态 (前提是 checkable 为 true)

• 分组框只是⼀个⽤来 "美化界⾯" 这样的组件, 并不涉及到⽤⼾交互和业务逻辑. 属于 "锦上添 花" .

代码示例: 给麦当劳案例加上分组框 

1) 在界⾯上创建三个分组框, 并且在分组框内部创建下拉框和微调框. 

• 注意: 在复制粘贴控件的时候, ⼀定要先选中对应的⽗控件, 再粘贴.

 2) 编写 widget.cpp, 添加初始化下拉框的代码

Widget::Widget(QWidget *parent)
     : QWidget(parent)
     , ui(new Ui::Widget)
{
     ui->setupUi(this);

     ui->comboBox->addItem("巨⽆霸");
     ui->comboBox->addItem("⻨辣鸡腿堡");

     ui->comboBox_2->addItem("薯条");
     ui->comboBox_2->addItem("⻨辣鸡翅");

     ui->comboBox_3->addItem("可乐");
     ui->comboBox_3->addItem("雪碧");
}

 3) 运行程序, 观察效果

---

1.2 Tab Widget 

使用 QTabWidget 实现⼀个带有标签页的控件, 可以往⾥⾯添加⼀些 widget. 进⼀步的就可以通过标签页来切换.

核心属性 

属性	说明
tabPosition	标签页所在的位置. • North 上方 • South 下方 • West 左侧 • East 右侧
currentIndex	当前选中了第⼏个标签页(从 0 开始计算)
currentTabText	当前选中的标签页的⽂本
currentTabName	当前选中的标签页的名字
currentTabIcon	当前选中的标签页的图标
currentTabToolTip	当前选中的标签页的提⽰信息
tabsCloseable	标签页是否可以关闭
movable	标签页是否可以移动

 1) 在界⾯上创建⼀个 QTabWidget , 和两个按钮.

• 按钮的 objectName 为 pushButton_add 和 pushButton_remove 

 注意

• QTabWidget 中的每个标签页都是⼀个 QWidget
• 点击标签页, 就可以直接切换.
• 右键 QTabWidget , 可以添加标签⻚或者删除标签页

2) 编写 widget.cpp, 进⾏初始化, 给标签页中放个简单的 label  

• 注意新创建的 label 的⽗元素, 是 ui->tab 和 ui->tab_2 . Qt 中使⽤⽗⼦关系决定该控件 "在 哪⾥".

QLabel* label = new QLabel(ui->tab);
label->setText("标签⻚1");
label->resize(100, 50);

QLabel* label2 = new QLabel(ui->tab_2);
label2->setText("标签⻚2");
label2->resize(100, 50);

• 使⽤ count() 获取到标签⻚的个数.
• 使⽤ addTab 新增标签⻚.
• 使⽤ removeTab 删除标签⻚.
• 使⽤ currentIndex 获取到当前标签⻚的下标.
• 使⽤ setCurrentIndex 切换当前标签页.

void Widget::on_pushButton_add_clicked()
{
     // 获取当前有⼏个标签⻚了
     int count = ui->tabWidget->count();
     // 创建新的 widget
     QWidget* w = new QWidget();
     ui->tabWidget->addTab(w, QString("Tab ") + QString::number(count + 1));
     // 给 widget 中添加 label
     QLabel* label = new QLabel(w);
     label->setText(QString("标签⻚") + QString::number(count + 1));
     label->resize(100, 50);
     // 选中这个新的标签⻚
     ui->tabWidget->setCurrentIndex(count);
}

void Widget::on_pushButton_remove_clicked()
{
     // 获取当前标签⻚的下标
     int index = ui->tabWidget->currentIndex();
     // 删除这个标签⻚
     ui->tabWidget->removeTab(index);
}

4) 编写 QTabWidget 的 currentChanged 函数  

void Widget::on_tabWidget_currentChanged(int index)
{
    qDebug() << "当前选中标签⻚为: " << index;
}

• 点击新建标签页, 可以创建出新的标签.
• 点击删除当前标签页, 可以删除标签.
• 切换标签页时, 可以看到 qDebug 打印出的标签页编号.