每日激励:“不设限和自我肯定的心态:I can do all things。 — Stephen Curry”
✍️绪论:
本章主要介绍了 Qt 中 QGroupBox 与 QTabWidget 控件。QGroupBox 是带标题的分组框,能容纳其他控件,有标题、对齐方式、是否扁平、是否可勾选等属性,可通过拖拽添加控件测试属性,需借助布局管理器使用。QTabWidget 用于实现标签页切换界面,有标签页位置、当前选中标签页信息、是否可关闭移动等属性,以及切换、点击等信号。实操部分展示了图形化添加标签页及代码实现新增、关闭标签页和感知切换等功能。
————————
早关注不迷路🔥,话不多说安全带系好,发车啦(建议电脑🖥️观看)。
🖼️ QGroupBox 分组框
QGroupBox 本质就是⼀个带有标题的分组框
- 可以把其他的控件放到⾥⾯作为⼀组
- 看起来能更好看⼀点,也能更方便的管理
在上面的框中就能放到 GroupBax 中,内部的控件的父元素就不是this了,而是GroupBox(不过GroupBox的父元素同样还是this)
核⼼属性🎈
属性 | 说明 |
---|---|
title | 分组框的标题 |
alignment | 分组框内部内容的对⻬⽅式 |
flat | 是否是 “扁平” 模式 |
checkable | 是否可选择. 设为 true, 则在 title 前⽅会多出⼀个可勾选的部分. |
checked | 描述分组框的选择状态 (前提是 checkable 为 true) |
💻实操:了解 flat、checkable属性
- 拖拽一个GroupBox内部在添加一个Label、Combo Box和 spin Box
- 此时右上角的控件关系 GroupBox 就是内部控件的父元素
- 给combo中添加内容:麦辣鸡腿堡。。。(具体如下图)
- 测试使用
- 当勾选 flat 时边框就不会出现(具体下图解释)
- 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,
- 构造传递标签页的
currentTabName
代表加入到哪个表中(指定父元素) - 若想访问标签页,通过 ui ->
currentTabName
也就能访问标签页(currentTabName就相对于标签页的ObjectName) - 设置文本为:标签页1、设置大小 100 50
- 构造传递标签页的
- 同上操作:标签页2、大小 100 50
- 添加按钮点击信号的槽函数
- 使用addTab方法来创建新的标签页
- 参数1 要指定一个QWidget(标签页本质就是一个QWidget)
- 参数2 指定这个标签页的text标题(叫做:Tab + 数字)
- 为命名准备
- 获取当前标签页的数量(调用tabWidget::
count
)
- 获取当前标签页的数量(调用tabWidget::
- 创建QWidget对象,就能调用
addTab
进行添加新标签页了 - 并在内部添加一个QLabel显示内容,将内部内容设置为 标签页 count,并设置大小
- 打开新增的标签页:通过
setCurrentIndex
(参数是下标 就是之前的count数量)
- 使用addTab方法来创建新的标签页
- 删除按钮点击信号的槽函数
- 获取当前选中的标签页下标
currentIndex
- 删除标签页
removeTab
(下标)
- 获取当前选中的标签页下标
- 也能通过 添加
tabCloseable
属性添加表单的关闭图标- 然后当用户点击后就会触发
tabCloseRequest
信号,再能通过槽函数实现关闭
- 然后当用户点击后就会触发
- 切换标签页currentChanged触发信号设置槽函数:
- 打印:当前选中的标签页是: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;
}
本章完。预知后事如何,暂听下回分解。
如果有任何问题欢迎讨论哈!
如果觉得这篇文章对你有所帮助的话点点赞吧!
持续更新大量C++细致内容,早关注不迷路。