【C++ Qt】容器类（GroupBox、TabWidget）内附思维导图通俗易懂

news2025/7/21 17:05:02

每日激励：“不设限和自我肯定的心态：I can do all things。 — Stephen Curry”

✍️绪论：
本章主要介绍了 Qt 中 QGroupBox 与 QTabWidget 控件。QGroupBox 是带标题的分组框，能容纳其他控件，有标题、对齐方式、是否扁平、是否可勾选等属性，可通过拖拽添加控件测试属性，需借助布局管理器使用。QTabWidget 用于实现标签页切换界面，有标签页位置、当前选中标签页信息、是否可关闭移动等属性，以及切换、点击等信号。实操部分展示了图形化添加标签页及代码实现新增、关闭标签页和感知切换等功能。
————————
早关注不迷路🔥，话不多说安全带系好，发车啦（建议电脑🖥️观看）。

文章目录

🖼️ QGroupBox 分组框
- 💻实操：了解 flat、checkable属性
🎠Tab Widget
- ⌨️实操

🖼️ QGroupBox 分组框

QGroupBox 本质就是⼀个带有标题的分组框

可以把其他的控件放到⾥⾯作为⼀组
看起来能更好看⼀点，也能更方便的管理

在上面的框中就能放到 GroupBax 中，内部的控件的父元素就不是this了，而是GroupBox（不过GroupBox的父元素同样还是this）

核⼼属性🎈

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

💻实操：了解 flat、checkable属性

拖拽一个GroupBox内部在添加一个Label、Combo Box和 spin Box
1. 此时右上角的控件关系 GroupBox 就是内部控件的父元素
2. 给combo中添加内容：麦辣鸡腿堡。。。（具体如下图）
测试使用
1. 当勾选 flat 时边框就不会出现（具体下图解释）
2. checkable 会给Group设置勾选框

📄源码：无，就就简单的拖拽式ui实现的学习下~

附加内容

要点提示： QGroupBox不能直接添加控件，必须通过布局管理器来添加。

🎠Tab Widget

使⽤ QTabWidget 实现⼀个带有标签⻚的控件，可以往⾥⾯添加⼀些 widget。进⼀步的就可以通过标签⻚来切换界面
（非常类似Excel中的底端的多个表格，如下图）
在这里插入图片描述

核⼼属性🎈

属性	说明
tabPosition	标签⻚所在的位置 • North 上⽅ • South 下⽅ • West 左侧 • East 右侧
currentIndex	当前选中了第⼏个标签⻚ (从 0 开始计算)
currentTabText	当前选中的标签⻚的⽂本
currentTabName	当前选中的标签⻚的名字
currentTabIcon	当前选中的标签⻚的图标
currentTabToolTip	当前选中的标签⻚的提⽰信息
tabsCloseable	标签⻚是否可以关闭（仅仅只是提供按钮，需要自己实现槽函数）
movable	标签⻚是否可以移动

核⼼信号🚦

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

⌨️实操

🎨图形化实践：

拖拽一个Tab Widget
两个标签，中都放下一个Label：第一/二个标签页
可以通过TabWidget右键选择：快速的新增标签页和删除标签页
tabPosition 设置切换标签页所在的位置

在这里插入图片描述

🧑‍💻代码操作：

目的：
创建一个程序，带有一个Tab Widget 标签页，提供两个按钮，分别创建新的标签页，关闭当前选中的标签页。当切换标签页的时候也能感知到变化。

过程：

拖拽：TabWidget、新增标签页按钮、关闭标签页按钮
代码实现：在每个标签页中添加一个Label，
1. 构造传递标签页的 currentTabName 代表加入到哪个表中（指定父元素）
2. 若想访问标签页，通过 ui -> currentTabName 也就能访问标签页（currentTabName就相对于标签页的ObjectName）
3. 设置文本为：标签页1、设置大小 100 50
同上操作：标签页2、大小 100 50
添加按钮点击信号的槽函数
1. 使用addTab方法来创建新的标签页
  1. 参数1 要指定一个QWidget（标签页本质就是一个QWidget）
  2. 参数2 指定这个标签页的text标题（叫做：Tab + 数字）
2. 为命名准备
  1. 获取当前标签页的数量（调用tabWidget::count）
3. 创建QWidget对象，就能调用addTab进行添加新标签页了
4. 并在内部添加一个QLabel显示内容，将内部内容设置为标签页 count，并设置大小
5. 打开新增的标签页：通过 setCurrentIndex（参数是下标就是之前的count数量）
删除按钮点击信号的槽函数
1. 获取当前选中的标签页下标 currentIndex
2. 删除标签页 removeTab（下标）
也能通过添加 tabCloseable属性添加表单的关闭图标
1. 然后当用户点击后就会触发 tabCloseRequest 信号，再能通过槽函数实现关闭
切换标签页currentChanged触发信号设置槽函数：
1. 打印：当前选中的标签页是：index

在这里插入图片描述

📄源码：

#include "widget.h"
#include "ui_widget.h"
#include <QLabel>
#include <QDebug>

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

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

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

Widget::~Widget()
{
    delete ui;
}


void Widget::on_pushButton_clicked()
{
    //为添加新标签做准备
        //1. 获取当前标签页个数
    int count = ui->tabWidget->count();
    QString name = "Tab" + QString::number(count+ 1);
    QWidget* widget = new QWidget();

    ui->tabWidget->addTab(widget,name);

    //给widget标签页中添加label

    QLabel* label = new QLabel(widget);
    label->setText(name);
    label->resize(100,50);

    //打开当前的页表（跟符合常理）
    ui->tabWidget->setCurrentIndex(count);//参数是index下标
}

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

void Widget::on_tabWidget_tabCloseRequested(int index)
{
    //删除当前的标签页
    ui->tabWidget->removeTab(index);
}

void Widget::on_tabWidget_currentChanged(int index)
{
    qDebug() << index << endl;
}