Qt TabWidget每个选项卡标题背景颜色 [英] Qt TabWidget Each tab Title Background Color

问题描述

这是原始的Tabwidget，未设置标题背景颜色

This is the original Tabwidget without setting title background color

我的客户要求我做这样的事情； 为标题设置不同的背景颜色

My customer ask me to do something like this; Set different background colour for title

All - Yellow
purchase - light blue
POS Sales - light green
Cash Sales - Pink
invoice - light purple

我已经尝试过SetStyleSheet了:

I have try the SetStyleSheet like:

     QTabBar {
          background-color : Yellow;
     }

但所有标签的颜色已更改 有人知道如何设置每种QTabBar背景颜色吗?

But all tab Color changed Somebody know how to setting each QTabBar background color?

推荐答案

无法通过QSS设置这些属性.要更改每个选项卡的样式，我们必须创建一个自定义QTabBar并覆盖其paintEvent方法，以便能够更改每个选项卡的样式，我们使用QStyleOptionTab类，但是要更改QTabWidget标签栏，我们需要使用setTabBar方法，但这是私有的，因此您需要创建一个自定义的QTabWidget，如下所示:

These properties can not be set through QSS. To change the style to each tab we must create a custom QTabBar and override its paintEvent method, to be able to change the style of each tab we use the QStyleOptionTab class, but to change the QTabWidget tabbar we need to use the setTabBar method but this is private so you need to create a custom QTabWidget as shown below:

tabwidget.h

#ifndef TABWIDGET_H
#define TABWIDGET_H

#include <QStyleOptionTab>
#include <QStylePainter>
#include <QTabWidget>

class TabBar: public QTabBar
{
public:
    TabBar(const QHash<QString, QColor> &colors, QWidget *parent=0):QTabBar(parent){
        mColors = colors;
    }

protected:
    void paintEvent(QPaintEvent */*event*/){

        QStylePainter painter(this);
        QStyleOptionTab opt;

        for(int i = 0;i < count();i++)
        {
            initStyleOption(&opt,i);
            if(mColors.contains(opt.text)){
                opt.palette.setColor(QPalette::Button, mColors[opt.text]);
            }

            painter.drawControl(QStyle::CE_TabBarTabShape, opt);
            painter.drawControl(QStyle::CE_TabBarTabLabel,opt);
        }
    }


private:
    QHash<QString, QColor> mColors;
};

class TabWidget : public QTabWidget
{
public:
    TabWidget(QWidget *parent=0):QTabWidget(parent){

        // text - color
        QHash <QString, QColor> dict;

        dict["All"] = QColor("yellow");
        dict["purchase"] = QColor("#87ceeb");
        dict["POS Sales"] = QColor("#90EE90");
        dict["Cash Sales"] = QColor("pink");
        dict["invoice"] = QColor("#800080");

        setTabBar(new TabBar(dict));
    }
};

#endif // TABWIDGET_H

为此，应在Qt Designer的QTabWidget中使用它进行升级，我们右键单击tabwidget并选择菜单Promoted Widgets，在我的情况下，先前的代码是在tabwidget.h文件中创建的，因此这将是头文件，对于Promoted Class Name，我们使用TabWidget，然后按下Add和Promote按钮获取下图所示的内容:

And to use it in our QTabWidget in Qt Designer should be promoted for this we right click on the tabwidget and select the menu Promoted Widgets, in my case the previous code is created in the file tabwidget.h so this will be the header file and in the case of Promoted Class Name we use TabWidget, after that we press the buttons Add and Promote obtaining what is shown in the following image:

最终结果如下图所示:

_{完整的示例可以在下面的链接中找到}

Python:

from PyQt5 import QtGui, QtWidgets


class TabBar(QtWidgets.QTabBar):
    def __init__(self, colors, parent=None):
        super(TabBar, self).__init__(parent)
        self.mColors = colors

    def paintEvent(self, event):
        painter = QtWidgets.QStylePainter(self)
        opt = QtWidgets.QStyleOptionTab()

        for i in range(self.count()):
            self.initStyleOption(opt, i)
            if opt.text in self.mColors:
                opt.palette.setColor(
                    QtGui.QPalette.Button, self.mColors[opt.text]
                )
            painter.drawControl(QtWidgets.QStyle.CE_TabBarTabShape, opt)
            painter.drawControl(QtWidgets.QStyle.CE_TabBarTabLabel, opt)


class TabWidget(QtWidgets.QTabWidget):
    def __init__(self, parent=None):
        super(TabWidget, self).__init__(parent)
        d = {
            "All": QtGui.QColor("yellow"),
            "purchase": QtGui.QColor("#87ceeb"),
            "POS Sales": QtGui.QColor("#90EE90"),
            "Cash Sales": QtGui.QColor("pink"),
            "invoice": QtGui.QColor("#800080"),
        }
        self.setTabBar(TabBar(d))

        self.addTab(QtWidgets.QLabel(), "All")
        self.addTab(QtWidgets.QLabel(), "purchase")
        self.addTab(QtWidgets.QLabel(), "POS Sales")
        self.addTab(QtWidgets.QLabel(), "Cash Sales")
        self.addTab(QtWidgets.QLabel(), "invoice")


if __name__ == "__main__":
    import sys

    app = QtWidgets.QApplication(sys.argv)
    app.setStyle("fusion")
    w = TabWidget()
    w.show()
    sys.exit(app.exec_())

这篇关于Qt TabWidget每个选项卡标题背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！