将背景颜色限制为 QTabBar 上的三角形选项卡

Posted 2023-03-30

【中文标题】将背景颜色限制为 QTabBar 上的三角形选项卡

【英文标题】：Confining background color to Triangular tab on QTabBar

【发布时间】：2020-01-04 21:00:24

【问题描述】：

我使用 Qt 设计器设置了一个 QTabWidget，并为 tabShape 选择了“三角形”选项卡而不是“圆形”选项卡。我希望未选择的选项卡为绿色。我之前的一个问题的答案https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qtabwidget-and-qtabbar 为我提供了解决方案。 但是，背景颜色超出了三角形标签的形状，如下所示：

我在网上找了这个，这就是我想要的：

如何修改以下代码以使颜色保持在三角形标签的边框内？

self.ui.tabWidget.setStyleSheet(self.ui.tabWidget.styleSheet()
                                            + 'QTabBar::tab:!selected:hover '
                                              ' border: 2px solid #1e90ff;'
                                              ' background-color: green; ' )

【参考方案1】：

试试看：

import sys
from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(440, 400)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.centralwidget)
        self.verticalLayout.setObjectName("verticalLayout")
        self.qtabwidget = QtWidgets.QTabWidget(self.centralwidget)
        self.qtabwidget.setObjectName("qtabwidget")
        self.tab = QtWidgets.QWidget()
        self.tab.setObjectName("tab")
        self.qtabwidget.addTab(self.tab, "")
        self.tab_2 = QtWidgets.QWidget()
        self.tab_2.setObjectName("tab_2")
        self.qtabwidget.addTab(self.tab_2, "")
        self.verticalLayout.addWidget(self.qtabwidget)
        MainWindow.setCentralWidget(self.centralwidget)

        self.retranslateUi(MainWindow)
        self.qtabwidget.setCurrentIndex(0)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "Change the shape of the tabs of a QTabWidget"))
        self.qtabwidget.setTabText(self.qtabwidget.indexOf(self.tab), _translate("MainWindow", "Tab 1"))
        self.qtabwidget.setTabText(self.qtabwidget.indexOf(self.tab_2), _translate("MainWindow", "Tab 2"))


class Window(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        self.tab_3 = QtWidgets.QWidget()
        self.tab_3.setObjectName("tab_3")
        self.qtabwidget.addTab(self.tab_3, "Tab 3")

        # changes the shape of the tabs of the QTabWidget
        tab_shape = QtWidgets.QTabWidget.Triangular
        self.qtabwidget.setTabShape(tab_shape)


StyleSheet = '''
QTabWidget 
    background-color: green;

QTabWidget::pane 
    border: 1px solid #31363B;
    padding: 2px;
    margin:  0px;

QTabBar 
    border: 0px solid #31363B;
    color: yellow;

QTabBar::tab:top:selected 
    color: red;

'''


if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    app.setStyleSheet(StyleSheet)
    app.setFont(QtGui.QFont("Times", 12, QtGui.QFont.Bold))
    w = Window()
    w.show()
    sys.exit(app.exec_())

【讨论】：

值得一提的是，这个方法不是跨平台也不是跨风格。例如，在 MacOS 上使用它或使用 Oxygen 样式（如果设置为系统的默认设置或在应用样式表应用程序之前），样式完全忽略形状和背景颜色。跨度>

抱歉打扰了，但我看不出在您的示例中为 ui 使用对象派生类的原因。如果您这样做是因为 OP 使用了 self.ui 对象，那么您应该以这种方式使用它（因此，不使用多重继承方法），否则代码只会让人感到困惑，也意味着可以编辑pyuic 生成输出来编写程序（我们都知道这是一个我们几乎每天都必须劝阻的坏习惯）。考虑到这一点，我会要求您编辑您的答案，并在上面的评论中包含我报告的问题。