更改 PYQT4 中选项卡的背景颜色

Posted 2023-03-30

【中文标题】更改 PYQT4 中选项卡的背景颜色

【英文标题】：Change background color of Tabs in PYQT4

【发布时间】：2012-10-15 17:43:16

【问题描述】：

是否可以在 PYQT4 中更改 QTabWidget 选项卡的背景颜色？有一种方法可以更改文本的颜色，但不能更改选项卡的背景颜色。

我有一个包含多个选项卡的程序，我想为每个级别赋予自己的背景颜色。见附件示例。

from PyQt4 import QtCore, QtGui

try:
    _fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
    _fromUtf8 = lambda s: s

class Ui_Dialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName(_fromUtf8("Dialog"))
        Dialog.resize(661, 397)
        self.verticalLayout = QtGui.QVBoxLayout(Dialog)
        self.verticalLayout.setObjectName(_fromUtf8("verticalLayout"))
        self.tabWidget = QtGui.QTabWidget(Dialog)
        self.tabWidget.setObjectName(_fromUtf8("tabWidget"))
        self.tab = QtGui.QWidget()
        self.tab.setObjectName(_fromUtf8("tab"))
        self.verticalLayout_2 = QtGui.QVBoxLayout(self.tab)
        self.verticalLayout_2.setObjectName(_fromUtf8("verticalLayout_2"))
        self.tabWidget_2 = QtGui.QTabWidget(self.tab)
        self.tabWidget_2.setObjectName(_fromUtf8("tabWidget_2"))
        self.tab_3 = QtGui.QWidget()
        self.tab_3.setObjectName(_fromUtf8("tab_3"))
        self.verticalLayout_3 = QtGui.QVBoxLayout(self.tab_3)
        self.verticalLayout_3.setObjectName(_fromUtf8("verticalLayout_3"))
        self.tabWidget_3 = QtGui.QTabWidget(self.tab_3)
        self.tabWidget_3.setObjectName(_fromUtf8("tabWidget_3"))
        self.tab_5 = QtGui.QWidget()
        self.tab_5.setObjectName(_fromUtf8("tab_5"))
        self.verticalLayout_4 = QtGui.QVBoxLayout(self.tab_5)
        self.verticalLayout_4.setObjectName(_fromUtf8("verticalLayout_4"))
        self.tabWidget_4 = QtGui.QTabWidget(self.tab_5)
        self.tabWidget_4.setObjectName(_fromUtf8("tabWidget_4"))
        self.tab_7 = QtGui.QWidget()
        self.tab_7.setObjectName(_fromUtf8("tab_7"))
        self.verticalLayout_5 = QtGui.QVBoxLayout(self.tab_7)
        self.verticalLayout_5.setObjectName(_fromUtf8("verticalLayout_5"))
        self.tabWidget_5 = QtGui.QTabWidget(self.tab_7)
        self.tabWidget_5.setElideMode(QtCore.Qt.ElideRight)
        self.tabWidget_5.setObjectName(_fromUtf8("tabWidget_5"))
        self.tab_9 = QtGui.QWidget()
        self.tab_9.setObjectName(_fromUtf8("tab_9"))
        self.tabWidget_5.addTab(self.tab_9, _fromUtf8(""))
        self.tab_10 = QtGui.QWidget()
        self.tab_10.setObjectName(_fromUtf8("tab_10"))
        self.tabWidget_5.addTab(self.tab_10, _fromUtf8(""))
        self.verticalLayout_5.addWidget(self.tabWidget_5)
        self.tabWidget_4.addTab(self.tab_7, _fromUtf8(""))
        self.tab_8 = QtGui.QWidget()
        self.tab_8.setObjectName(_fromUtf8("tab_8"))
        self.tabWidget_4.addTab(self.tab_8, _fromUtf8(""))
        self.verticalLayout_4.addWidget(self.tabWidget_4)
        self.tabWidget_3.addTab(self.tab_5, _fromUtf8(""))
        self.tab_6 = QtGui.QWidget()
        self.tab_6.setObjectName(_fromUtf8("tab_6"))
        self.tabWidget_3.addTab(self.tab_6, _fromUtf8(""))
        self.verticalLayout_3.addWidget(self.tabWidget_3)
        self.tabWidget_2.addTab(self.tab_3, _fromUtf8(""))
        self.tab_4 = QtGui.QWidget()
        self.tab_4.setObjectName(_fromUtf8("tab_4"))
        self.tabWidget_2.addTab(self.tab_4, _fromUtf8(""))
        self.verticalLayout_2.addWidget(self.tabWidget_2)
        self.tabWidget.addTab(self.tab, _fromUtf8(""))
        self.tab_2 = QtGui.QWidget()
        self.tab_2.setObjectName(_fromUtf8("tab_2"))
        self.tabWidget.addTab(self.tab_2, _fromUtf8(""))
        self.verticalLayout.addWidget(self.tabWidget)
        self.buttonBox = QtGui.QDialogButtonBox(Dialog)
        self.buttonBox.setOrientation(QtCore.Qt.Horizontal)
        self.buttonBox.setStandardButtons(QtGui.QDialogButtonBox.Cancel|QtGui.QDialogButtonBox.Ok)
        self.buttonBox.setObjectName(_fromUtf8("buttonBox"))
        self.verticalLayout.addWidget(self.buttonBox)

        self.retranslateUi(Dialog)
        self.tabWidget.setCurrentIndex(0)
        self.tabWidget_2.setCurrentIndex(0)
        self.tabWidget_3.setCurrentIndex(0)
        self.tabWidget_4.setCurrentIndex(0)
        self.tabWidget_5.setCurrentIndex(0)
        QtCore.QObject.connect(self.buttonBox, QtCore.SIGNAL(_fromUtf8("accepted()")), Dialog.accept)
        QtCore.QObject.connect(self.buttonBox, QtCore.SIGNAL(_fromUtf8("rejected()")), Dialog.reject)
        QtCore.QMetaObject.connectSlotsByName(Dialog)

    def retranslateUi(self, Dialog):
        Dialog.setWindowTitle(QtGui.QApplication.translate("Dialog", "Dialog", None, QtGui.QApplication.UnicodeUTF8))
        self.tabWidget_5.setTabText(self.tabWidget_5.indexOf(self.tab_9), QtGui.QApplication.translate("Dialog", "Tab 9", None, QtGui.QApplication.UnicodeUTF8))
        self.tabWidget_5.setTabText(self.tabWidget_5.indexOf(self.tab_10), QtGui.QApplication.translate("Dialog", "Tab 10", None, QtGui.QApplication.UnicodeUTF8))
        self.tabWidget_4.setTabText(self.tabWidget_4.indexOf(self.tab_7), QtGui.QApplication.translate("Dialog", "Tab 7", None, QtGui.QApplication.UnicodeUTF8))
        self.tabWidget_4.setTabText(self.tabWidget_4.indexOf(self.tab_8), QtGui.QApplication.translate("Dialog", "Tab 8", None, QtGui.QApplication.UnicodeUTF8))
        self.tabWidget_3.setTabText(self.tabWidget_3.indexOf(self.tab_5), QtGui.QApplication.translate("Dialog", "Tab 5", None, QtGui.QApplication.UnicodeUTF8))
        self.tabWidget_3.setTabText(self.tabWidget_3.indexOf(self.tab_6), QtGui.QApplication.translate("Dialog", "Tab 6", None, QtGui.QApplication.UnicodeUTF8))
        self.tabWidget_2.setTabText(self.tabWidget_2.indexOf(self.tab_3), QtGui.QApplication.translate("Dialog", "Tab 3", None, QtGui.QApplication.UnicodeUTF8))
        self.tabWidget_2.setTabText(self.tabWidget_2.indexOf(self.tab_4), QtGui.QApplication.translate("Dialog", "Tab 4", None, QtGui.QApplication.UnicodeUTF8))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), QtGui.QApplication.translate("Dialog", "Tab 1", None, QtGui.QApplication.UnicodeUTF8))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), QtGui.QApplication.translate("Dialog", "Tab 2", None, QtGui.QApplication.UnicodeUTF8))
#
#------------------------------------------------------------------------------ 
#
#  For Testing
#
        self.tab_33 = QtGui.QWidget()
        self.tabWidget.addTab(self.tab_33, "Hell")
        QColor = QtGui.QColor(255, 85, 0)
        a = self.tabWidget.tabBar()
        a.setTabTextColor(0, QColor)


if __name__ == "__main__":
    import sys
    app = QtGui.QApplication(sys.argv)
    Dialog = QtGui.QDialog()
    ui = Ui_Dialog()
    ui.setupUi(Dialog)
    Dialog.show()
    sys.exit(app.exec_())

【参考方案1】：

您可以使用 qt 样式表来自定义 QTabWidget 的外观：

http://doc.qt.digia.com/4.7-snapshot/stylesheet-examples.html#customizing-qtabwidget-and-qtabbar

例如：

self.tabwidget.setStyleSheet('QTabBar::tab background-color: red;')

【讨论】：

有效但不是一个干净的解决方案，因为背景颜色会移除标识不同选项卡的边缘。

【参考方案2】：

创建QTabBar 的子类并在重新实现的paintEvent 函数中重新着色选项卡。

然后用QTabWidget.setTabBar替换默认的tab-bar。

这是一个简单的演示：

from PyQt4 import QtGui

class TabBar(QtGui.QTabBar):
    def paintEvent(self, event):
        painter = QtGui.QStylePainter(self)
        option = QtGui.QStyleOptionTab()
        for index in range(self.count()):
            self.initStyleOption(option, index)
            bgcolor = QtGui.QColor(self.tabText(index))
            option.palette.setColor(QtGui.QPalette.Window, bgcolor)
            painter.drawControl(QtGui.QStyle.CE_TabBarTabShape, option)
            painter.drawControl(QtGui.QStyle.CE_TabBarTabLabel, option)

class Window(QtGui.QTabWidget):
    def __init__(self):
        QtGui.QTabWidget.__init__(self)
        self.setTabBar(TabBar(self))
        for color in 'tomato orange yellow lightgreen skyblue plum'.split():
            self.addTab(QtGui.QWidget(self), color)

if __name__ == '__main__':

    import sys
    app = QtGui.QApplication(sys.argv)
    window = Window()
    window.resize(420, 200)
    window.show()
    sys.exit(app.exec_())

更新

如果平台的主题引擎使用像素图而不是调色板来为背景着色，那么这种技术似乎不起作用。显然，Windows 和 Mac 样式使用像素图，因此为 individual 选项卡的背景着色要困难得多（当然，可以使用样式表来更改 all 的颜色选项卡一次，但这与当前问题无关）。

更多详情，请查看Qt FAQ。

【讨论】：

感谢 ekhumoro，但是当我测试上面的代码时，我没有看到选项卡的不同颜色，只有原始的正常 UI 颜色？我正在使用 Win7 + PyQt4（最新版本）。

@NaderAbedrabbo。是的，抱歉——我现在也在 WinXP 上测试了它，我可以确认我的演示只适用于 Linux。我已经用有关该主题的更多信息更新了我的答案 - 但恐怕它可能对解决您的问题没有太大帮助。