QTabWidget+QSS

一、QTabBar

说QTabWidget之前，

我觉得还是先了解下QTabBar比较好些,

毕竟标签控件QTabWidget，

是QTabBar+QStackWidget的组合体。

QTabWidget可管理qss的子控件,

有这么几个：

::tab 标签页

::tear 撕裂指示器

::close-button 标签页关闭按钮

::scroller 滚动按钮的容器

QToolButton::left-arrow 左箭头(滚动左按钮)

QToolButton::left-arrow 右箭头(滚动右按钮)

可管理的伪状态有：

:top 在顶部位置

:bottom 在底部位置

:left 在左边的位置

:right 在右边的位置

:only-one 只有个标签时

:first 第一个标签页

:middle 中间的标签页

:last 最后一个标签页

:selected 当前选中的标签页

:previous-selected 当前选中的前一个标签页

:next-selected 当前选中的后一个标签页

01 伪状态1

QTabBar::tab:previous-selected{ background-color: red; } QTabBar::tab:next-selected{ background-color: green; } QTabBar::tab:selected { background-color: blue; color: #fff; }

先认识下这三个伪状态

被选中的标签页为蓝色，

在它右边的是previois-selected 红色

在它左边的是next-selected 绿色

02 伪状态2

QTabBar::tab:first{ background-color: #1E90FF; } QTabBar::tab:last{ background-color: #9932CC; } QTabBar::tab:middle{ background-color: #32CD32; } QTabBar::tab:selected { background-color: #1E40AF; color: #fff; }

最左边就是 first

最右边就是 last

中间四个就是 middle

被选中时的优先级最高。

03 伪状态3

QTabBar::tab:first{ background-color: #1E90FF; } QTabBar::tab:last{ background-color: #9932CC; } QTabBar::tab:only-one{ background-color: #FF3333; }

最开始有两个标签的时候，

是first和last在起作用；

当我们关闭一个标签的时候，

只剩下一个标签页，

此时由only-one起作用了。

如果还定义了selected的话，

依然是selected的优先最高，

但这是为了演示only-one，

所以就不能定义它。

04 伪状态4

QTabBar::tab:top{ background-color: #FF3333; } QTabBar::tab:bottom{ background-color: #1E90FF; } QTabBar::tab:left{ background-color: #32CD32; } QTabBar::tab:right{ background-color: #00CED1; }

位置状态生效有个前提，

标签必须要在对应的位置才行，

按钮用来辅助动态调整标签位置

//上 void DialogQSSTabBar::on_pushButton_clicked() { ui->tabWidget_5->setTabPosition(QTabWidget::North); } //下 void DialogQSSTabBar::on_pushButton_2_clicked() { ui->tabWidget_5->setTabPosition(QTabWidget::South); } //左 void DialogQSSTabBar::on_pushButton_3_clicked() { ui->tabWidget_5->setTabPosition(QTabWidget::West); } //右 void DialogQSSTabBar::on_pushButton_4_clicked() { ui->tabWidget_5->setTabPosition(QTabWidget::East); }

代码中设置位置的时候，

就变成了地图的方向，

上北，下男，左西，右东。

05 子部件

QTabBar::tear{ background: #FF6600; } QTabBar::close-button{ background: #9932CC; } QTabBar::scroller{ width: 80px; background: #00CED1; } QTabBar QToolButton{ background: red; } QTabBar QToolButton::left-arrow { background: yellow; } QTabBar QToolButton::right-arrow { background: green; }

要让滑动按钮和撕裂指示器出现，

就要求标签页的数量多到让控件装不下。

还是图示下更清楚些：