网站导航
> 技术文档 > QT原生控件-QTabBar的使用及样式

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

网友: 技术文档 2025-07-30 13:53:16

目录

    • @[TOC](目录)
  • 前言
  • 一、QTabBar初步介绍
  • 二、基本功能
    • 1.创建
    • 2.标签页管理​​
    • 3.标签属性设置
    • 4.外观与布局​​
  • 三、信号
  • 四、QTabWidget样式
    • 选择器
    • 伪装态
    • 意外用法

前言

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

一、QTabBar初步介绍

QTabBar的话是QT的一个自带的原生控件，不过不支持拖拽生成，只能通过代码去生成；一般是跟随着QTabWidget出现的，QTabWidget是集成了两个控件，一个是头部的标签栏由QTabBar组成，一个则是页面的QStackedWidget，堆栈控件，这一点在介绍QTabWidget的时候有说到 QTabWidget介绍 ；所以说单独使用QTabBar的场景也是比较少（暂时还没遇到），但是我们可以在操作QTabWidget的时候可以使用到，所以学一下还是有很大帮助的，接下来就是正文了；

二、基本功能

1.创建

QTabBar* tabBar = new QTabBar();tabBar->addTab(\"Tab1\");//这样就可以生成一个带有一个标签的QTabBar了，然后可以加入到布局当中

2.标签页管理​​

1）addTab
添加标签页，默认添加到当前最大索引标签后面，可添加图标，图标显示在文字的左侧；返回值为添加到的位置的索引

int addTab(const QString &text)int addTab(const QIcon &icon, const QString &text)

2）insertTab
按索引位置添加索引，如果索引小于最小值，则添加到第一个索引的位置，如果索引超过最大值，则添加到最大索引+1的位置；也可添加图标，返回索引；

int insertTab(int index, const QString &text)int insertTab(int index, const QIcon &icon, const QString &text)

注意，单独使用此控件进行添加标签页也会出现在QTabWidget中提到的标签页闪烁问题，具体解决办法可以通过上面介绍那里的QTabWidget介绍文查看，这里就不反复赘述了；
3）removeTab ()
移除指定索引的标签页

void removeTab(int index)

4)count()
获取QTabBar拥有的标签页总数

int count() const

5)tabAt
传入一个坐标点，如果坐标点有标签则返回标签的索引，没有的话则返回-1，一般用于点击检测

int tabAt(const QPoint &position) const

6）moveTab
将标签从 from 移动到 to 索引

void moveTab(int from, int to)

7）当前页
设置当前的显示的对应的索引的页，以及获取到当前页的一个索引值，可以和按钮之类的控件绑定（通过元对象属性）跳转到对应的页数

void setCurrentIndex(int index)int currentIndex() const

8）标签的禁启用状态
可以设置标签的禁用/启用状态，禁用之后不可通过鼠标点击跳转到对应的标签页，但是可通过方法去跳转，如上面的setCurrentIndex()

void setTabEnabled(int index, bool enabled)bool isTabEnabled(int index) const//获取状态

9）标签关闭按钮的显示/隐藏
可以通过setTabsClosable去让标签页显示关闭标签的按钮，显示再文本的右侧，样式可以修改

void setTabsClosable(bool closable)bool tabsClosable() const//获取状态

10）标签页拖拽
默认情况下标签页是不支持拖拽的，即为false；注意：拖拽过后标签页的索引值会动态进行更新

void setMovable(bool movable)bool isMovable() const//获取状态

11）滚动按钮
当标签页过多时会在标签栏右边出现滚动按钮，可设置是否启用，禁用后鼠标中键滚动不到后面区域的标签，只可以通过方法去跳转；

void setUsesScrollButtons(bool useButtons)bool usesScrollButtons() const

12）标签页的文本两侧添加按钮
QTabBar支持在标签的左侧 (LeftSide) 或右侧 (RightSide) 添加自定义按钮。这个方法可能会导致意外的一些操作，之前使用这个去写一个标签栏，发现有时边缘的标签页点击时，标签页显示的位置不是很正确（目前也没搞明白是什么问题，只知道不添加按钮后就不出现了）；另外，添加的widget的话不用手动释放，释放QTabBar的时候会自动释放；

void setTabButton(int index, QTabBar::ButtonPosition position, QWidget *widget)QWidget *tabButton(int index, QTabBar::ButtonPosition position) const//获取按钮控件

13）标签几何区域大小
获取标签的几何区域（用于自定义绘制）。

QRect tabRect(int index) const

3.标签属性设置

1）setTabText
设置标签文本

void setTabText(int index, const QString &text)

2）tabText
获取标签文本

QString tabText(int index) const

3）setTabIcon
设置标签图标

void setTabIcon(int index, const QIcon &icon)

4）tabIcon
获取标签图标

QIcon tabIcon(int index) const

5）setTabTextColor
设置标签文字颜色

void setTabTextColor(int index, const QColor &color)

6）tabTextColor
获取标签文字颜色

QColor tabTextColor(int index) const

7）setTabToolTip
设置标签ToolTip

void setTabToolTip(int index, const QString &tip)

8）tabToolTip
获取标签ToolTip

QString tabToolTip(int index) const

9）setTabData
设置标签自带数据，类似setProperty

void setTabData(int index, const QVariant &data)

10）tabData
获取标签自带属性

QVariant tabData(int index) const

4.外观与布局​​

1）setShape
设置标签方向：RoundedNorth（默认水平）、TriangularSouth等

void setShape(QTabBar::Shape shape)

2）Shape
获取当前方向。

QTabBar::Shape shape() const

3）setIconSize
设置图标标准大小。

void setIconSize(const QSize &size)

4）setExpanding
是否均匀拉伸标签，默认为false，按内容自适应。

void setExpanding(bool enabled)

5）expanding
是否启用了拉伸。

bool expanding() const

6）setElideMode
设置文本过长时的省略方式（如 ElideRight）

void setElideMode(Qt::TextElideMode)

7）elideMode
获取省略模式

Qt::TextElideMode elideMode() const

三、信号

1）currentChanged
当前标签切换时触发，index为新标签的索引值

void currentChanged(int index)

2）tabBarClicked
点击标签时触发，index为点击标签的索引值

void tabBarClicked(int index)

3）tabBarDoubleClicked
双击标签时触发，index为双击的标签的索引值

void tabBarDoubleClicked(int index)

4）tabCloseRequested
点击关闭按钮时触发

void tabCloseRequested(int index)

5）tabMoved
标签拖动后触发，from是原始位置，to是标签的新位置

void tabMoved(int from, int to)

四、QTabWidget样式

选择器

1）QTabBar​​
整个标签栏的容器。

QTabBar{}

2）QTabBar::tab​​
单个标签页

QTabBar::tab{}

​3）QTabBar::close-button
标签页上的关闭按钮（当 tabsClosable 启用时）

QTabBar::close-button{}

​4）QTabBar::scroller​​
滚动按钮背景区域（当 usesScrollButtons 启用时）

QTabBar::scroller{}

​5）QTabBar::tear​​
拖拽脱离时的视觉反馈，一般用在显示拖拽轨迹或区域

QTabBar::tear{}

​6）QTabBar QToolButton​​
滚动按钮（当 usesScrollButtons 启用时），一般用在定制箭头图标、圆角、悬停效果

QTabBar QToolButton{}QTabBar QToolButton::right-arrow{}//右箭头QTabBar QToolButton::left-arrow{}//左箭头

伪装态

1）:selected
选中样式

QTabBar::tab:selected{}

2）:hover​​
悬浮样式

QTabBar::tab:hover{}

3）:pressed
鼠标按下的样式

QTabBar::tab:pressed{}

4）:disabled
禁用的样式

QTabBar::tab:disabled{}

5）:first
第一个标签（水平布局时最左，垂直布局时最上）

QTabBar:first{}

6）:last​​
最后一个标签

QTabBar:last{}

7）:only-one
当只有一个标签时

QTabBar:only-one{}

8）:!selected
未选中的标签

QTabBar::tab:!selected{}

意外用法

因为QT的元对象系统，QTabBar是自带元属性的，所以我们就可以使用元属性去对他们不同属性时的样式进行设置，例如下面

/*QTabBar的shape属性*//* 垂直标签栏（West/East） */QTabBar[shape=\"West\"], QTabBar[shape=\"East\"] { width: 100px; /* 垂直标签栏宽度 */}

另外如果启用了标签拖动的话，也可以通过:movable伪装态设置可拖动标签的样式，一般用在提示用户标签可拖拽（光标变化）

QTabBar::tab:movable { background: rgba(255, 255, 0, 50); /* 半透明黄色 */}

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

南通妈妈网

网络标签：

相关问题