PyQt5中如何为QTabWidget单个选项卡设置背景色

问题原因 #

两种常见写法失效的核心原因是QSS的级联匹配规则：

• 给内容容器contents1设置QTabBar::tab样式时，QSS会递归匹配容器下所有后代层级的QTabBar控件，内层嵌套的QTabWidget的标签栏自然会被命中，导致"test"标签被误染色
• 直接给外层QTabWidget设置全局QTabBar::tab样式时，没有指定标签索引，会把当前标签栏下所有选项卡全部染色，无法实现单个标签定制

可行实现方案 #

通过QSS的对象名选择器、直接子控件选择器、索引伪选择器三个特性组合，实现精准样式命中，不会产生样式污染，操作步骤如下：

• 给外层目标QTabWidget设置唯一的objectName，和其他嵌套的QTabWidget做区分
• 用#对象名选择器限定样式作用范围，仅匹配目标QTabWidget
• 用>直接子选择器，仅匹配QTabWidget下直接挂载的QTabBar，跳过嵌套在内容页里的其他QTabBar
• 用:index(索引值)伪选择器，精准选中需要设置背景的单个选项卡

修正后可运行代码 #

import sys
from PyQt5 import QtWidgets


class Window(QtWidgets.QMainWindow):

    def __init__(self):
        super(Window, self).__init__()
        self.tabs = QtWidgets.QTabWidget(self)
        self.setWindowTitle('PyQt demo')
        self.setGeometry(500, 500, 500, 500)
        self.createTabs()
        self.show()

    def createTabs(self):
        self.tabs.resize(1000, 1000)
        # 给外层QTabWidget设置唯一对象名，供QSS精准定位
        self.tabs.setObjectName("outerTabs")

        contents1 = QtWidgets.QWidget()
        contents2 = QtWidgets.QWidget()

        contents1.layout = QtWidgets.QVBoxLayout()
        contents1.setLayout(contents1.layout)

        self.tabs.addTab(contents1, 'one')
        self.tabs.addTab(contents2, 'two')

        # 设置精准匹配的样式表
        self.tabs.setStyleSheet("""
            #outerTabs > QTabBar::tab:index(0) {
                background-color: red;
            }
        """)

        extra_tab_widget = QtWidgets.QTabWidget()
        extra_tab = QtWidgets.QWidget()
        extra_tab_widget.addTab(extra_tab, 'test')
        contents1.layout.addWidget(extra_tab_widget)



def run():
    app = QtWidgets.QApplication(sys.argv)
    GUI = Window()
    sys.exit(app.exec_())


run()

动态匹配选项卡扩展 #

如果不想硬编码选项卡索引，需要按选项卡标题/关联控件动态匹配目标，可以先查询目标索引再拼接QSS：

# 示例：查找标题为"one"的选项卡索引
target_index = 0
for i in range(self.tabs.count()):
    if self.tabs.tabText(i) == "one":
        target_index = i
        break

# 动态拼接样式
self.tabs.setStyleSheet(f"""
    #outerTabs > QTabBar::tab:index({target_index}) {{
        background-color: red;
    }}
""")

内容的提问来源于stack exchange，提问作者Mavla Afa