【Qt开发】容器类控件（二）-＞ QTabWidget

[1 -> 概述](#1 -> 概述)

[2 -> 核心属性](#2 -> 核心属性)

[3 -> 核心信号](#3 -> 核心信号)

[4 -> 主要特性与优势](#4 -> 主要特性与优势)

[5 -> 应用场景](#5 -> 应用场景)

[6 -> 代码示例](#6 -> 代码示例)

[6.1 -> 使用标签页管理多组控件](#6.1 -> 使用标签页管理多组控件)

[7 -> 总结](#7 -> 总结)

1 -> 概述

在现代图形用户界面设计中，有效地组织和呈现信息是至关重要的。当应用程序的功能变得复杂，需要在一个窗口中展示多个相关但独立的内容面板时，Qt 提供的 QTabWidget 控件便成为了一个不可或缺的解决方案。它以其直观、紧凑和用户友好的方式，将杂乱无章的界面变得井然有序。

QTabWidget 可以理解为一个多页面的容器。其外观和行为与我们日常使用的浏览器标签页、系统设置对话框中的选项卡如出一辙。它由两部分组成：

标签栏：通常位于控件顶部（也可调整至底部、左侧或右侧），每个标签代表一个独立的子页面。
页面区域：一个共享的显示区域，一次只显示与当前选中标签相关联的一个页面。

用户通过简单地点击不同的标签，即可在不同的内容页面之间快速切换，而无需打开新的窗口或对话框，这极大地提升了应用程序的连贯性和操作效率。

2 -> 核心属性

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

3 -> 核心信号

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

4 -> 主要特性与优势

空间效率
QTabWidget 最大的优点在于其卓越的空间利用率。它将大量控件和信息分层放置在同一个物理区域内，只需一个窗口框架，就能容纳数倍于其表面积的内容。这对于工具栏、设置面板或数据编辑界面来说，是保持界面简洁的完美选择。
逻辑清晰的内容分组
通过将功能相近或属于同一类别的控件和信息放置在同一个标签页中，开发者可以为用户提供一个清晰的信息架构。例如，一个文本编辑器的"查找与替换"、"字体设置"和"页面布局"功能可以分别放在不同的标签页中，使用户能够快速定位所需功能，而不会被不相关的选项所干扰。
高度的可定制性
QTabWidget 提供了丰富的属性来自定义其外观和行为，以满足不同应用程序的视觉风格需求：
- 标签位置：可以将标签栏放置在 North（顶部）、South（底部）、East（左侧）或 West（右侧）。
- 标签形状：支持常规的矩形、圆角矩形以及三角形等形状，以适应不同的设计语言。
- 可关闭标签：可以为每个标签页添加一个关闭按钮，这在需要动态打开和关闭文档的应用中非常常见。
- 图标与文本：每个标签不仅可以包含文字标题，还可以附带一个图标，使其含义更加一目了然。
动态性与灵活性
QTabWidget 的结构并非一成不变。开发者可以在运行时动态地添加、插入、删除或重新排序标签页。这种灵活性使得它能够适应更加复杂的场景，例如在一个数据分析软件中，每加载一个新的数据集就自动创建一个新的分析结果标签页。

5 -> 应用场景

QTabWidget 的应用场景非常广泛，几乎在任何需要分类或分步展示信息的地方都能看到它的身影：

软件设置对话框：如 Qt Creator 的选项窗口，将"环境"、"文本编辑器"、"调试器"等设置分门别类。
多功能工具窗口：如图形编辑软件中的属性面板、图层管理器和颜色选择器常集成在一个带标签的控件中。
多文档界面：现代代码编辑器或文本编辑器，每个打开的文档都以一个标签页的形式存在。
数据展示与编辑：用于展示一个数据对象的不同属性类别，如"基本信息"、"详细资料"、"历史记录"等。

6 -> 代码示例

6.1 -> 使用标签页管理多组控件

1. 在界面上创建一个 QTabWidget，和两个按钮

注意：

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

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

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

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"

#include <QLabel>
#include <QDebug>

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, 50);

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

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

3. 编写按钮的 slot 函数

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

cpp 复制代码

void Widget::on_pushButton_insert_clicked()
{
    // 获取到标签页的数量
    int count = ui->tabWidget->count();
    QWidget* w = new QWidget();

    // 使用 addTab 方法来创建新的标签页
    ui->tabWidget->addTab(w, "Tab " + QString::number(count + 1));

    // 添加一个 QLabel 显示内容
    QLabel* label = new QLabel(w);
    label->setText("标签页 " + QString::number(count + 1));
    label->resize(100, 50);

    // 设置新标签页被选中
    ui->tabWidget->setCurrentIndex(count);
}

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

    // 删除标签页
    ui->tabWidget->removeTab(index);
}

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

5. 运行程序，观察效果

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

7 -> 总结

总而言之，QTabWidget 远不止是一个简单的界面控件，它更是 Qt 框架中"空间管理"与"信息架构"哲学的核心体现。在当今软件功能日益复杂化的趋势下，如何在不扩大窗口物理面积的前提下，优雅地扩展其功能容量，是每个界面设计师和开发者必须面对的挑战。QTabWidget 以其经典而高效的"标签-页面"模型，为这一挑战提供了近乎完美的解决方案。

它的价值不仅在于其直观的交互模式------用户无需学习即可通过点击在不同内容区间自由穿梭------更在于其背后所蕴含的清晰逻辑。它强制开发者对功能进行思考和归类，将杂乱的控件按逻辑关系分门别类，从而从源头上引导出一个结构清晰、易于理解的用户界面。这种对内容的组织能力，是其最重要的价值之一。

此外，QTabWidget 的高度可定制性和动态灵活性，确保了它能适应从简单设置对话框到复杂集成开发环境的各种应用场景。无论是通过设置标签位置、形状来契合整体设计语言，还是通过动态增删标签页来响应实时操作，它都展现出了强大的适应性。它与 Qt 强大的样式表机制相结合，可以打造出与应用程序品牌形象完全一致的视觉风格，实现功能性与美观性的统一。

然而，正如所有强大的工具一样，其效力取决于使用者。明智地运用 QTabWidget 至关重要。开发者需要警惕过度使用所带来的陷阱，避免创建出"标签海"而让用户感到困惑和效率低下。它最适合用于组织那些彼此相关但又相对独立的功能模块。

最终，掌握 QTabWidget 意味着掌握了一种在有限屏幕空间内构建无限功能可能性的艺术。它不是一个简单的UI元素，而是连接用户认知与软件复杂功能的桥梁。一个设计精良的标签式界面，能够显著降低用户的学习成本，提升任务完成效率，并带来愉悦的整体体验。因此，深入理解并恰当应用 QTabWidget，无疑是每一位 Qt 开发者迈向构建专业级、人性化桌面应用程序道路上的一个关键里程碑。

感谢各位大佬支持！！！

互三啦！！！