QTabBar styling issue

Cobra91151

Hi! After reimplementing QTabWidget and QTabBar here, when I applied this stylesheet:

"QTabBar::tab:selected {background-color: #FA9944; color: #000000; border-top: 1px solid #FA9944;} 
QTabBar::tab:hover {color: #000000; border-top: 1px solid #FA9944; background-color: #FFFFFF;}"

Images:

My code:

AppTabBar::AppTabBar(QWidget *parent) : QTabBar(parent)
{

}

AppTabBar::~AppTabBar()
{

}

QSize AppTabBar::tabSizeHint(int index) const
{
    QSize s = QTabBar::tabSizeHint(index);
    s.transpose();
    return s;
}

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

    for (int i = 0; i < this->count(); i++) {
        initStyleOption(&opt, i);
        painter.drawControl(QStyle::CE_TabBarTabShape, opt);
        painter.save();

        QSize s = opt.rect.size();
        s.transpose();
        QRect r(QPoint(), s);
        r.moveCenter(opt.rect.center());
        opt.rect = r;

        QPoint c = tabRect(i).center();
        painter.translate(c);
        painter.rotate(90);
        painter.translate(-c);
        painter.drawControl(QStyle::CE_TabBarTabLabel, opt);
        painter.restore();
    }

    QWidget::paintEvent(event);
}

AppTabControl::AppTabControl(QWidget *parent) : QTabWidget(parent)
{
    this->setTabBar(new AppTabBar());
    this->setTabPosition(QTabWidget::West);
    this->tabBar()->setStyleSheet("QTabBar::tab {width: 30px; height: 115px; color: #000000; font-weight: bold; font-size: 10px; font-family: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;} "
  "QTabBar::tab:selected {background-color: #FA9944; color: #000000; border-top: 1px solid #FA9944;} "
  "QTabBar::tab:hover {color: #000000; border-top: 1px solid #FA9944; background-color: #FFFFFF;}");
}

Test::Test(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Test)
{
    AppTabControl *tabControl = new AppTabControl(this);
    AppTabBar *tabBar1 = new AppTabBar(tabControl);
    AppTabBar *tabBar2 = new AppTabBar(tabControl);
    AppTabBar *tabBar3 = new AppTabBar(tabControl);
    tabControl->addTab(tabBar1, "Tab1");
    tabControl->addTab(tabBar2, "Tab2");
    tabControl->addTab(tabBar3, "Tab3");
}

It styles tabs the wrong way. The problem is that it paints only some part of the tab, not entire tab, when tab is selected or hovered. Should I reimplement press event and hover event? Any suggestions? Thanks.

raven-worx

@Cobra91151
why do you overrride the paintEvent() AND use stylesheets?

Cobra91151

@raven-worx

Hi! I have finally fix it. The problem actually was with the tab size. I will post my solution later. Thanks.

Cobra91151

So my solution is:

Code:

apptabbar.h

#ifndef APPTABBAR_H
#define APPTABBAR_H

#include <QTabBar>
#include <QStylePainter>
#include <QStyleOptionTab>

class AppTabBar : public QTabBar
{
public:
    AppTabBar();
    AppTabBar(int tabWidth, int tabHeight);
    AppTabBar(QSize tabSize);
    AppTabBar(QWidget *parent);
    AppTabBar(QWidget *parent, int tabWidth, int tabHeight);
    AppTabBar(QWidget *parent, QSize tabSize);
    QSize tabSizeHint(int index) const override;
    ~AppTabBar();

protected:
    void paintEvent(QPaintEvent *event) override;

private:
    int width, height;
};

#endif // APPTABBAR_H

apptabbar.cpp

#include "apptabbar.h"

AppTabBar::AppTabBar() : QTabBar(),
width(30),
height(115)
{

}

AppTabBar::AppTabBar(int tabWidth, int tabHeight) : QTabBar(),
width(tabWidth),
height(tabHeight)
{

}

AppTabBar::AppTabBar(QSize tabSize) : QTabBar(),
width(tabSize.width()),
height(tabSize.height())
{

}

AppTabBar::AppTabBar(QWidget *parent) : QTabBar(parent),
width(30),
height(115)
{

}

AppTabBar::AppTabBar(QWidget *parent, int tabWidth, int tabHeight) : QTabBar(parent),
width(tabWidth),
height(tabHeight)
{

}

AppTabBar::AppTabBar(QWidget *parent, QSize tabSize) : QTabBar(parent),
width(tabSize.width()),
height(tabSize.height())
{

}

AppTabBar::~AppTabBar()
{

}

QSize AppTabBar::tabSizeHint(int index) const
{
    QSize s = QTabBar::tabSizeHint(index);
    s.setWidth(width);
    s.setHeight(height);
    s.transpose();
    return s;
}

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

    for (int i = 0; i < this->count(); i++) {
        initStyleOption(&opt, i);
        painter.drawControl(QStyle::CE_TabBarTabShape, opt);
        painter.save();

        QSize s = opt.rect.size();
        s.transpose();
        QRect r(QPoint(), s);
        r.moveCenter(opt.rect.center());
        opt.rect = r;

        QPoint c = tabRect(i).center();
        painter.translate(c);
        painter.rotate(90);
        painter.translate(-c);
        painter.drawControl(QStyle::CE_TabBarTabLabel, opt);
        painter.restore();
    }

    QWidget::paintEvent(event);
}

apptabcontrol.h

#ifndef APPTABCONTROL_H
#define APPTABCONTROL_H

#include <QTabWidget>
#include <QTabBar>
#include <QPalette>
#include <QPainter>
#include <QDebug>
#include "apptabbar.h"

class AppTabControl : public QTabWidget
{
public:
    AppTabControl();
    AppTabControl(QWidget *parent);
    AppTabControl(QWidget *parent, int width, int height);
    AppTabControl(QWidget *parent, QSize size);
    void setTabControlSize(int width, int height);
    void setTabControlSize(QSize tabSize);
    ~AppTabControl();

private:
    int tabWidth, tabHeight;
    QSize tabSize;
};

#endif // APPTABCONTROL_H

apptabcontrol.cpp

#include "apptabcontrol.h"

AppTabControl::AppTabControl()
{

}

AppTabControl::AppTabControl(QWidget *parent) : QTabWidget(parent)
{
    this->setTabBar(new AppTabBar(parent, tabWidth, tabHeight));
    this->setTabPosition(QTabWidget::West);
}

AppTabControl::AppTabControl(QWidget *parent, int width, int height) : QTabWidget(parent),
tabWidth(width),
tabHeight(height)
{
    this->setTabBar(new AppTabBar(parent, tabWidth, tabHeight));
    this->setTabPosition(QTabWidget::West);
}

AppTabControl::AppTabControl(QWidget *parent, QSize size) : QTabWidget(parent),
tabSize(size)
{
    this->setTabBar(new AppTabBar(parent, tabSize));
    this->setTabPosition(QTabWidget::West);
}

void AppTabControl::setTabControlSize(int width, int height)
{
    tabWidth = width;
    tabHeight = height;
}

void AppTabControl::setTabControlSize(QSize size)
{
    tabSize = size;
}

AppTabControl::~AppTabControl()
{

}

And now the final part:

Test::Test(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Test)
{
    AppTabControl *tabControl = new AppTabControl(this, 30, 115);
    this->setStyleSheet("QTabBar::tab {color: #000000; font-weight: bold; font-size: 10px; font-family: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;} "
   "QTabBar::tab:selected {background-color: #FA9944; color: #000000; border-top: 1px solid #FA9944;} "
   "QTabBar::tab:hover {color: #000000; border-top: 1px solid #FA9944; background-color: #FFFFFF;}");
    AppTabBar *tabBar1 = new AppTabBar(tabControl);
    AppTabBar *tabBar2 = new AppTabBar(tabControl);
    AppTabBar *tabBar3 = new AppTabBar(tabControl);
    tabControl->addTab(tabBar1, "Tab1");
    tabControl->addTab(tabBar2, "Tab2");
    tabControl->addTab(tabBar3, "Tab3")
}

The result:

Everything works well now.

Qt World Summit: Submit your Presentation

QTabBar styling issue