Qt常用控件：容器类控件，标题分组框、标签页（浏览器标签）

[1.Group Box](#1.Group Box)

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

[2. Tab Widget](#2. Tab Widget)

代码示例：使用标签页管理多组控件

1.Group Box

使用 QGroupBox 实现一个带有标题的分组框。可以把其他的控件放到里面作为一组。这样看起来能更好看一点。

注意，不要把 QGroupBox 和 QButtonGroup 混淆。（之前在介绍 QRadioButton 的时候提到了 QButtonGroup）

分组框只是一个用来"美化界面"这样的组件，并不涉及到用户交互和业务逻辑。属于"锦上添花"。

QGroupBox 的常用属性如下表所示：

属性	说明
title	分组框的标题
alignment	分组框内部内容的对齐方式
flat	是否是"扁平"模式
checkable	是否可选择。设为 true，则在 title 前方会多出一个可勾选的部分
checked	描述分组框的选择状态（前提是 checkable 为 true）

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

在界面上创建三个分组框，并且在分组框内部创建下拉框和微调框。

编写 widget.cpp，添加初始化下拉框的代码
运行程序，观察效果

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("雪碧");
}

使用 QTabWidget 实现一个带有标签页的控件，可以往里面添加一些 widget。进一步的就可以通过标签页来切换。

QTabWidget 的常用属性如下表所示：

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

代码示例：使用标签页管理多组控件

在界面上创建一个 QTabWidget，和两个按钮。
按钮的 objectName 为 pushButton_add 和 pushButton_remove

注意：

QTabWidget 中的每个标签页都是一个 QWidget

点击标签页，就可以直接切换。

右键 QTabWidget，可以添加标签页或者删除标签页。

编写 widget.cpp，进行初始化，给标签页中放个简单的 label

注意新创建的 label 的父元素，是 ui->tab 和 ui->tab_2。Qt 中使用父子关系决定该控件"在哪里"。

cpp 复制代码

QLabel* label = new QLabel(ui->tab);// Tab Widgte的第一个标签页
label->setText("标签⻚1");
label->resize(100, 50);

QLabel* label2 = new QLabel(ui->tab_2);// Tab Widgte的第二个标签页
label2->setText("标签⻚2");
label2->resize(100, 50);

编写按钮的 slot 函数

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

cpp 复制代码

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);
}

编写 QTabWidget 的 currentChanged 函数来查看当前位于第几个标签页

cpp 复制代码

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

运行程序，观察效果

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