Changing QtabWidget tabbar color in paint event

Narutoblaze

I am trying to change the color of QTabBar via paintEvent according to documention and other solution on stackoverflow this works but in my case it is not working any help is greatly appreciated.

my code :

void myTab::paintEvent(QPaintEvent *event)
{
    QStylePainter painter(this);
    QStyleOptionTab opt;

    for (int i = 0; i < count(); i++) {
        initStyleOption(&opt, i);

        opt.palette.setColor(QPalette::Window, Qt::red);
        opt.palette.setColor(QPalette::Button, Qt::red);
        painter.drawControl(QStyle::CE_TabBarTabShape, opt);
        painter.drawControl(QStyle::CE_TabBarTabLabel, opt);
    }
}

JonB

@Narutoblaze
What does "not working" mean? E.g. what do you see/not see?
What stackoverflow post? How does your situation differ from it?
You don't have some stylesheet which already sets the color of the QTabBar do you?

Abderrahmene_Rayene

Hi,

Put a qDebug in your paintEvent, to see if it even gets called.

If it doesn't and the changes you applied are not visible (no red background), it's possible you did not set your custom Tab bar to your tab widget using QTabWidget::setTabBar.

For reference: dynamically style an individual tab in QTabWidget.

Narutoblaze

@JonB The reference @Abderrahmene_Rayene given is actually the same thing i am trying to do and my code almost 99% same as that and yes i have set the tabbar but the tabbar is same as default it is not red My qt version 6.5.0

Narutoblaze

@Abderrahmene_Rayene yes it does get called

Narutoblaze

@JonB no i have not set any stylesheet.

Abderrahmene_Rayene

The only code you're sharing is the painEvent, and it has no problems, it works if used correctly.

Share the code of both of your QTabBar and QTabWidget, how you're using both of them, and how and when are you setting the custom QTabBar.

A minimal reproducible example would answer all of these question.

Here's one:

#include <QApplication>
#include <QTabBar>
#include <QTabWidget>
#include <QStylePainter>
#include <QStyleOptionTab>

class myTab : public QTabBar
{
public:
    myTab (QWidget *parent = nullptr)
    {
        //I'm using this to check later if this is the tab bar being used
        setObjectName("myTabBar");
    }

    void paintEvent(QPaintEvent *event)
    {
        QStylePainter painter(this);
        QStyleOptionTab opt;

        for (int i = 0; i < count(); i++)
        {
            initStyleOption(&opt, i);

            opt.palette.setColor(QPalette::Window, Qt::red);
            opt.palette.setColor(QPalette::Button, Qt::red);
            painter.drawControl(QStyle::CE_TabBarTabShape, opt);
            painter.drawControl(QStyle::CE_TabBarTabLabel, opt);
        }
        qDebug()<<"window color role color:"<<opt.palette.color(QPalette::Window);
        qDebug()<<"button color role color:"<<opt.palette.color(QPalette::Button);
    }
};

class myTabWidget : public QTabWidget
{
    myTab *mt;
public:
    myTabWidget (QWidget *parent = nullptr)
    {
        mt = new myTab(this);
        setTabBar(mt);
    }
};

int main(int argc,char*argv[])
{
    QApplication a(argc, argv);

    myTabWidget *mtw = new myTabWidget();
    //This is where I check if the right tab bar is being used by verifyinng the object name
    qDebug()<<mtw->tabBar();

    mtw->tabBar()->addTab("tab1");
    mtw->tabBar()->addTab("tab2");
    mtw->tabBar()->addTab("tab3");

    mtw->show();

    return a.exec();
}

Here's the output:

QTabBar(0x556a0ace5a20, name="myTabBar")
window color role color: QColor(ARGB 1, 1, 0, 0)
button color role color: QColor(ARGB 1, 1, 0, 0)
window color role color: QColor(ARGB 1, 1, 0, 0)

Here's how it looks:

If you're not missing any of these details, I would suggest using this example and gradually adding your code to it, until it doesn't work, to identify what's reversing your custom painting.

Hope this helps!

JoeCFD

@Narutoblaze
is it simpler to set stylesheet?
https://stackoverflow.com/questions/43349684/how-to-customize-tab-header-for-qtabbar-with-a-custom-witdh-max-qt-style-sheet

Narutoblaze

@Abderrahmene_Rayene I have ran your code as it is but did not work there was no change from default QtabWidget but after adding a.setStyle("fusion") it worked as you have shown but i don't want to change other parts like the background became black and foreground white also why did it required a.setStyle("fusion") ??

My spec :
Windows 10
Qt 6.5.0

Running your code it shows color was applied but no changes happened :

window color role color: QColor(ARGB 1, 0.117647, 0.117647, 0.117647)
button color role color: QColor(ARGB 1, 1, 0, 0)

Worked after Adding setStyle :

int main(int argc, char *argv[])
{
    QApplication a(argc,argv);
  
    // Added this line
    a.setStyle("fusion");
}

Abderrahmene_Rayene

@Narutoblaze That's a good discovery!

Unfortunately that goes beyond the scope of my knowledge, and I'm using a Linux.

I did however set Windows style on my QApplication and got a slightly different result: bright red for the tabs as they became flat instead of raised in Fusion style.

Here's how it looks:

I'm not sure I can test and get the same result as you do, you'd need the insight of a Windows user for more accuracy.

But I could suggest setting Fusion style (or another style if available and works) to your tab bar only in its ctor like this:

myTab (QWidget *parent = nullptr)
    {
        setStyle(QStyleFactory::create("Fusion"));
    }

Just to compare, I set Windows style on my tab bar only and here's how it looks:

SGaist

Hi,

System styles such as those from Windows and macOS ignore certain hints and draw controls as expected for these platforms. Qt follows the platform user interface guidelines closely to ensure that applications looks as expected.

QtWS: Super Early Bird Tickets Available!

Changing QtabWidget tabbar color in paint event