Qt TabWidget Each tab Title Background Color

Question

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

I have try the SetStyleSheet like:

     QTabBar {
          background-color : Yellow;
     }

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

Answer 1

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

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:

The final result is shown in the following image:

The complete example can be found in the following link