Windows图形界面(GUI)-QT-C/C++ - QT Tab Widget

• 公开视频 -> 链接点击跳转公开课程
• 博客首页 -> ​​​链接点击跳转博客主页

目录

一、概述

1.1 什么是 QTabWidget？

1.2 使用场景

二、常见样式

2.1 选项卡式界面

2.2 动态添加和删除选项卡

2.3 自定义选项卡标题和图标

三、属性设置

3.1 添加页面（Add Page）

3.2 删除页面（Remove Page）

3.3 页面标题（Tab Text）

3.4 页面图标（Tab Icon）

3.5 当前选项卡索引（Current Index）

四、内容处理

4.1 添加页面

4.2 插入页面

4.3 删除页面

4.4 设置页面标题

4.5 获取页面标题

4.6 设置页面图标

4.8 获取当前页面索引

4.9 设置当前页面索引

五、高级功能

5.1 自定义选项卡样式

5.2 选项卡位置

5.3 选项卡关闭按钮

5.4 选项卡拖拽

一、概述

1.1 什么是 QTabWidget？

QTabWidget 是 Qt 框架中的一个重要控件，用于在一个窗口中显示多个页面。每个页面可以包含不同的控件和内容，用户可以通过点击选项卡来切换不同的页面。

QTabWidget 提供了一个简洁、有序的界面，特别适合在有限的屏幕空间内显示多个功能或信息组。

1.2 使用场景

• 多页面显示：当需要在同一个窗口中显示多个页面时，QTabWidget 是一个理想的选择。每个页面可以包含不同的控件和内容，用户可以通过点击选项卡来切换页面。

• 界面整洁：在有限的屏幕空间内，QTabWidget 可以帮助开发者将多个功能或信息组组织得井井有条，保持界面的整洁和有序。

• 动态管理：QTabWidget 支持动态添加和删除选项卡，使得开发者可以根据需要灵活地管理页面。

二、常见样式

2.1 选项卡式界面

QTabWidget 提供了一个选项卡式的界面，每个选项卡对应一个页面。用户可以通过点击选项卡来切换不同的页面。

2.2 动态添加和删除选项卡

QTabWidget 支持动态添加和删除选项卡，开发者可以根据需要随时添加或删除页面。

2.3 自定义选项卡标题和图标

每个选项卡可以设置标题和图标，使得界面更加直观和美观。

三、属性设置

3.1 添加页面（Add Page）

使用 addTab(QWidget *widget, const QString &label) 方法可以向 QTabWidget 添加一个新页面，并设置页面的标题。

QTabWidget *tabWidget = new QTabWidget(this);
QWidget *page1 = new QWidget();
tabWidget->addTab(page1, "Page 1");

3.2 删除页面（Remove Page）

使用 removeTab(int index) 方法可以从 QTabWidget 中删除指定位置的页面。

tabWidget->removeTab(0); // 删除第一个页面

3.3 页面标题（Tab Text）

使用 setTabText(int index, const QString &label) 方法可以设置指定位置页面的标题。

tabWidget->setTabText(0, "New Page 1 Title");

3.4 页面图标（Tab Icon）

使用 setTabIcon(int index, const QIcon &icon) 方法可以设置指定位置页面的图标。

tabWidget->setTabIcon(0, QIcon(":/images/icon.png"));

3.5 当前选项卡索引（Current Index）

使用 setCurrentIndex(int index) 方法可以设置当前显示的页面索引，使用 currentIndex() const 方法可以获取当前显示页面的索引。

tabWidget->setCurrentIndex(1); // 切换到第二个页面
int currentIndex = tabWidget->currentIndex(); // 获取当前页面索引

四、内容处理

4.1 添加页面

• addTab(QWidget *widget, const QString &label)：向 QTabWidget 添加一个新页面，并设置页面的标题。

4.2 插入页面

• insertTab(int index, QWidget *widget, const QString &label)：在指定位置插入一个新页面，并设置页面的标题。

4.3 删除页面

• removeTab(int index)：从 QTabWidget 中删除指定位置的页面。

4.4 设置页面标题

• setTabText(int index, const QString &label)：设置指定位置页面的标题。

4.5 获取页面标题

• tabText(int index) const：获取指定位置页面的标题。

4.6 设置页面图标

• setTabIcon(int index, const QIcon &icon)：设置指定位置页面的图标。

4.8 获取当前页面索引

• currentIndex() const：获取当前显示页面的索引。

4.9 设置当前页面索引

• setCurrentIndex(int index)：设置当前显示页面的索引。

五、高级功能

5.1 自定义选项卡样式

QTabWidget 允许开发者通过样式表（StyleSheet）自定义选项卡的外观。例如，可以设置选项卡的背景颜色、字体、边框等。

tabWidget->setStyleSheet("QTabBar::tab { background-color: #f0f0f0; color: #000; }");

5.2 选项卡位置

QTabWidget 允许开发者设置选项卡的位置，可以放置在窗口的顶部、底部、左侧或右侧。

tabWidget->setTabPosition(QTabWidget::South); // 将选项卡放置在底部

5.3 选项卡关闭按钮

QTabWidget 支持在每个选项卡上添加关闭按钮，用户可以通过点击关闭按钮来关闭页面。

tabWidget->setTabsClosable(true);
connect(tabWidget, &QTabWidget::tabCloseRequested, [=](int index) {
    tabWidget->removeTab(index);
});

5.4 选项卡拖拽

QTabWidget 支持选项卡的拖拽功能，用户可以通过拖拽选项卡来重新排列页面的顺序。

tabWidget->setMovable(true);