QT原生控件-QTabWidget的使用及样式

前言

本文主要介绍的是使用代码生成的情况下对控件的介绍，包括拥有的功能及能修改的样式，也会说明在qtdesiner拖拽控件生成和使用代码生成控件的区别（如果有的话，遇到了的会说），此版本不属于最终版本，以后遇到什么新奇的点会继续更新！本文基于QT官方的文档进行的编写，QT版本为qt 5.14.0，编写环境为Windows11。不得不说官方文档真是个好东西，有时候有些不会的上去一看就能有灵感解决了，可惜没有中文版本的。

---

一、QTabWidget的初步介绍

QTabWidget是QT中的一个控件，由两个控件组成，头部标签栏是QTabBar（QTabBar介绍 。。未完成），内容区域则是QStackedWidget（QStackedWidget介绍。。未完成）；QTabWidget允许在一个窗口中创建多个选项卡（Tab），每个选项卡都可以包含不同的子控件或窗口部件，如QLable、QPushButton、列表、图片查看器等。用户可以通过点击不同的选项卡来切换显示的内容。
QTabWidget一般应用在需要通过点击切换不同页面的场景，例如浏览器页面、不同操作的页面等等

二、基本功能

1.创建主界面

代码如下（示例）：

QTabWidget *tabWidget = new QTabWidget(this);

注意：使用代码实例化一个QTabWidget是不会自带标签页的，如果使用的是Qt Designer拖拉创建的话，默认创建两个标签页

2.添加标签页

addTab()
addTab方法有两种格式，如下，第一个参数是page页面的容器控件，第二个参数是标签页的图标，第三个参数则是标签页文本，返回值是添加的位置索引。
一般使用第一个格式，第二个还没使用过，后面用到了再更新

int addTab(QWidget *page, const QString &label)
int addTab(QWidget *page, const QIcon &icon, const QString &label)  //插入的图标会显示在文字的左边

insertTab()
按索引位置插入标签页，这个也是有两个格式，返回值也是插入的位置索引值。如果插入的索引是非法值（负数或者超出范围的值，），那返回的是实际添加的值，而不是参数中的值，负数插入第一个，超出最大的为插入最后一个

int insertTab(int index, QWidget *page, const QString &label)
int insertTab(int index, QWidget *page, const QIcon &icon, const QString &label)		//插入的图标会显示在文字的左边

标签页闪烁问题：有时候开发的时候要求动态添加标签页，所以在QTabWidget控件show()之后才去调用addTab()，就会导致标签页会闪烁一下，这是因为标签栏的布局改变了，根据官方的解决办法话是：在调用addTab()前先将QWidget::updatesEnabled属性设置为false，调用完再设置为true，例如下面

setUpdatesEnabled(false);		//设置页面停止动态更新
addTab();
setUpdatesEnabled(true);

3.移除标签页

removeTab ()
QTabWidget提供了一个根据标签索引值来移除标签页的方法，还有一个是clear()，直接清空现有的标签页；

void removeTab(int index)		//越界不会有任何操作
void clear()

值得注意的是，当removeTab给的索引值在控件中不存在的话是不会报错，而是忽略此操作；此外，此方法不会自动释放掉页面控件对象，需要自己手动释放。

4.页面控件管理

提供了两个页面管理的方法，一个根据索引获取页面控件对象，一个根据控件对象获取到索引值。

QWidget* widget(int index) const	//越界返回nullptr
int indexOf(QWidget *w) const		//不存在返回-1

int currentIndex() const  			//获取到当前显示的页面的索引
QWidget *currentWidget() const		//获取到当前显示的页面控件对象

void setCurrentIndex(int index)		//切换至特定索引的页面

5.标签页属性

提供了很多标签页的方法，我们还可以使用 QTabBar *tabBar() const 这个方法获取到便签栏，然后进行深度开发，例如在标签页的左右两边添加按钮，使用setTabButton方法；

void setTabText(int index, const QString &label)			//设置标签页显示文本。
void setTabIcon(int index, const QIcon &icon)				//设置标签页图标
QString tabText(int index) const							//获取标签页的文本
QIcon tabIcon(int index) const								//获取标签页的图标对象

void setTabToolTip(int index, const QString &tip)			 //设置标签页的ToolTip
QString tabToolTip(int index) const 						//获取标签页的ToolTip

void setTabEnabled(int index, bool enable)					//启用或禁用特定索引的标签	禁用之后无法点击
bool isTabEnabled(int index) const							//判断标签页是否启用

void setMovable(bool movable)								//是否允许用户拖动标签调整顺序。
bool isMovable() const										//获取拖拉禁用状态

bool tabsClosable() const									//是否显示便签页的关闭按钮，类似浏览器那样
void setTabsClosable(bool closeable)						//启用或禁用关闭按钮

6.布局与外观

这个方法比较常用，可以自定义标签页的显示位置，有参数有四个可选项，分别是North（默认）、South、West、East。这些可以在designer中设置

void setTabPosition(QTabWidget::TabPosition)

这个的话就是设置标签页的形状，提供了圆角的样式Rounded(默认)，还有三角形的样式Triangular (没怎么用过，都是自己调标签页样式的)

void setTabShape(QTabWidget::TabShape s)

QTabWidget::TabPosition tabPosition() const			//获取当前QTabWidget的标签页显示位置
QTabWidget::TabShape tabShape() const				//获取当前QTabWidget的标签页形状

7.滚动与隐藏

void setUsesScrollButtons(bool useButtons)
当便签页过多时，所有标签页的宽度超出了QTabWidget的宽度就会出现滚动区域，在标签栏的右边会出现滚动按钮。这个方法设置是否启用滚动按钮，默认是启用的；
注意，如果取消启用的话，使用鼠标中键也滚动不到后面的标签页，不过可以通过调用方法去跳转到对应的页面。

bool usesScrollButtons() const
是否自动隐藏标签栏（当仅有一个标签时），当QTabWidget只用一个标签页的话，标签栏会自动隐藏。

void setTabBarAutoHide(bool enabled)		//获取滚动按钮隐藏设置状态
bool tabBarAutoHide() const					//获取标签页是否设置隐藏

8.边角控件

在QTabWidget的标签栏中，可以设置控件在便签栏里面，目前只可以设置上左、上右，下左、下右，并且如果要设置在下边的话要设置标签栏位置页要在下边，使用setTabPosition方法，可以同时设置两边的角控件；其他方向是无效的，并且标签页的位置会很奇怪；注意，控件设置为QTabWidget的角部件后，就不需要自动释放了，因为角部件变成了QTabWidget的父对象，当QTabWidget析构释放时会自动释放角部件；

void setCornerWidget(QWidget *widget, Qt::Corner corner = Qt::TopRightCorner)

QWidget *cornerWidget(Qt::Corner corner = Qt::TopRightCorner) const //获取角部控件

9.扩展中。。。。

void setDocumentMode(bool set)  //设置文档模式
void setElideMode(Qt::TextElideMode)	//设置文本过长时的省略方式（如ElideRight）。
Qt::TextElideMode elideMode() const		//获取当前省略模式。

三、信号

1）currentChanged
在当前页面发生改变时触发，index为新页面的索引值

void currentChanged(int index)

2）tabBarClicked
当点击标签页时发出的信号，index为点击的标签页的索引值

void tabBarClicked(int index)

3）tabBarDoubleClicked

当双击标签页时发出的信号，index为点击的标签页的索引值

tabBarDoubleClicked(int index)

4）tabCloseRequested

当点击标签页上的关闭按钮时发出的信号，index为点击的标签页的索引值，需先打开便签页的关闭按钮显示

tabCloseRequested(int index)

四、QTabWidget样式

QTabWidget的样式大致可以用下图来区分；PS：目前只列出我用到过的样式，如果没有你想要的话可以自己摸索下

/* 设置 QTabWidget 的 pane 样式 */
QTabWidget::pane {	
    border: 0.5px solid rgb(190, 190, 190); /* 保持原来的边框颜色 */
    background-color: rgb(240, 240, 240); /* 灰白色的背景 */
}

/* 设置 QTabBar 中 tab 的通用样式 */
QTabWidget QTabBar::tab {
    background-color: rgb(250, 250, 250); /* 较浅的灰色背景 */
    color: rgb(80, 80, 80); /* 比较深的文字颜色 */
    padding: 5px;
    width: 60px;
    height: 20px;
    border-bottom: 1.5px solid #c2c2c2; /* 保持原来的底部分割线 */
    font: normal normal 13px "Microsoft YaHei";
}

/* 设置选中的 tab 样式 */
QTabWidget QTabBar::tab:selected {
    background-color: rgb(252, 239, 235); 
    border-bottom-color: rgb(226, 95, 50); 
}

QTabBar::tab:!selected {
    margin-top: 2px; /* make non-selected tabs look smaller */
}

1)QTabWidget::pane
主要设置的是QTabWidget的页面区域，一般设置border，background这两个样式；注意设置背景色的话需要先设置border，不然背景色不生效；

QTabWidget::pane {}

2）QTabWidget QTabBar::tab
设置标签页的样式，除此之外还可以引伸出标签页的伪状态

QTabBar::tab {}					//普通样式
QTabBar::tab:selected{}			//选中样式
QTabBar::tab:!selected{}		//未选中样式
QTabBar::tab:hover{}			//悬浮样式
QTabWidget::tab-bar {}			//标签栏 可设置标签页的显示位置或其他基础样式

3）QTabWidget QStackedWidget
这个和pane的话其实差不多，但是优先级的话比pane要高的多，因为QStackedWidget是pane的子级（当两个样式都设置了border时可以看出来）；所以如果pane设置了背景色不生效的问题可以看看是不是和这里冲突了；

QTabWidget QStackedWidget{}

本次分享就到这里了，如果有什么错误的话请指正，或者有什么疑问的，也可以在评论区一起探讨！