Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Solved QTabBar styling issue

    General and Desktop
    2
    4
    889
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Cobra91151
      Cobra91151 last edited by 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:
      0_1533471571778_2018-08-05_151738.png
      1_1533471571779_2018-08-05_151803.png

      0_1533501569174_Tabs_style_issue.gif

      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 1 Reply Last reply Reply Quote 0
      • raven-worx
        raven-worx Moderators @Cobra91151 last edited by

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

        --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
        If you have a question please use the forum so others can benefit from the solution in the future

        Cobra91151 1 Reply Last reply Reply Quote 2
        • Cobra91151
          Cobra91151 @raven-worx last edited by

          @raven-worx

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

          1 Reply Last reply Reply Quote 1
          • Cobra91151
            Cobra91151 last edited by 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:
            0_1533540265396_2018-08-06_102357.png

            0_1533540726975_tabs_solution.gif

            Everything works well now.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post