容器类控件

目录

1.Group Box

代码示例: 给书籍加上分组框

2.Tab Widget

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

---

1.Group Box

• 使用 QGroupBox 实现一个带有标题的分组框. 可以把其他的控件放到里面作为一组. 这样看起来能更好看一点.
• 注意, 不要把 QGroupBox 和 QButtonGroup 混淆.
• 现在我们就可以把其他的控件放在 Group Box 中了，也就是说这些内部的控件的父元素就不是 this 了，而是这个 Group Box .

核心属性：

属性	说明
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->addItem("万历十五年");

    ui->comboBox_2->addItem("鲁迅全集");
    ui->comboBox_2->addItem("基督山伯爵");
    ui->comboBox_2->addItem("巨人的陨落");

    ui->comboBox_3->addItem("三少爷的剑");
    ui->comboBox_3->addItem("楚留香传奇");
    ui->comboBox_3->addItem("陆小凤传奇");
}

🎈3) 运行程序, 观察效果

2.Tab Widget

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

核心属性：

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

核心信号：

属性	说明
currentChanged(int)	在标签页发生切换时触发, 参数为被点击的选项卡编号.
tabBarClicked(int)	在点击选项卡的标签条的时候触发. 参数为被点击的选项卡编号.
tabBarDoubleClicked(int)	在双击选项卡的标签条的时候触发. 参数为被点击的选项卡编号.
tabCloseRequest(int)	在标签页关闭时触发. 参数为被关闭的选项卡编号.

---

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

🌵1) 在界面上创建一个 QTabWidget , 和两个按钮.

• 按钮的 objectName 为 pushButton_add 和 pushButton_remove

注意：

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

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

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

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

    // 先在每个标签页中添加一个 label
    QLabel* label1 = new QLabel(ui->tab);
    label1->setText("标签页1");
    label1->resize(100, 100);

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

🌵 3) 编写按钮的 slot 函数

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

void Widget::on_pushButton_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, 100);
    // 选中这个新的标签页
    ui->tabWidget->setCurrentIndex(count);
}

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

🌵4) 编写 QTabWidget 的 currentChanged 函数

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

🌵5) 运行程序, 观察效果

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