改造QTabWidget的QTabBar，自绘随意控制样式，不同颜色

 

1，简介

 

本文介绍通过自绘，随意定制QTabWidget的 TabBar的方法

可设置不同Tab页的不同背景色、前景色、边框、鼠标三态色、尺寸，以及绘制其他自定义内容（如角标）

 

2，效果

 

 

 

3，主要思路

 

继承QTabBar

改尺寸就是重写 tabSizeHint 函数

改绘制就是重写 paintEvent 函数

 

另外由于QTabWidget 的setTabBar函数为protected， 为了替换 TabBar ，也继承了一份QTabWidget ，在构造函数内替换

因此要注意，demo里 tabWidget 已经在ui设计器内提升成了 MyTabWidget

 

4，主要代码

 

就是写了2个类：MyTabBar、MyTabWidget

这里只为了演示第1页和第2页的区分，代码里写死了。实际使用时，根据需要用变量控制。

 

MyTabBar.h:

#ifndef MYTABBAR_H
#define MYTABBAR_H

#include <QtWidgets>

#define COLOR_HOVER         "#CDC9C9"
#define COLOR_SELECT_0      "#4F94CD"
#define COLOR_SELECT_1      "#EEB422"
#define COLOR_NORMAL_0      "#63B8FF"
#define COLOR_NORMAL_1      "#FFFF00"
#define COLOR_MARK          "#FF3333"

class MyTabBar : public QTabBar
{
    Q_OBJECT
public:
    explicit MyTabBar(QWidget *parent = 0);


protected:
    QSize tabSizeHint(int index) const;
    void paintEvent(QPaintEvent *event);

};

#endif // MYTABBAR_H

MyTabBar.cpp:

#include "mytabbar.h"
#include <QPainter>

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

}

QSize MyTabBar::tabSizeHint(int index) const
{
    return QSize(200,50);
}

void MyTabBar::paintEvent(QPaintEvent *event)
{
//    QTabBar::paintEvent(event);

    QPainter p(this);
    for(int i = 0 ; i < count(); i++)
    {
        QRect rc = tabRect(i);

        QStyleOptionTabV2 option;
        initStyleOption(&option, i);

        //tab背景
        p.setPen(Qt::NoPen);
        if(QStyle::State_MouseOver & option.state)
        {
            p.setBrush(QColor(COLOR_HOVER));

        }
        else if(QStyle::State_Selected & option.state)
        {
            if(i == 0)
            {
                p.setBrush(QColor(COLOR_SELECT_0));
            }
            else if(i == 1)
            {
                p.setBrush(QColor(COLOR_SELECT_1));
            }
        }
        else
        {
            if(i == 0)
            {
                p.setBrush(QColor(COLOR_NORMAL_0));
            }
            else if(i == 1)
            {
                p.setBrush(QColor(COLOR_NORMAL_1));
            }
        }
        p.drawRect(rc);

        //tab文字
        p.setPen(Qt::black);
        p.setBrush(Qt::NoBrush);
        p.drawText(rc,Qt::AlignCenter,tabText(i));

        //红色角标
        if(i == 1)
        {
            QRect rect(0,0,30,30);
            rect.moveTopRight(rc.topRight());

            p.setPen(Qt::NoPen);
            p.setBrush(QColor(COLOR_MARK));
            p.drawEllipse(rect);

            p.setPen(QColor(Qt::white));
            p.drawText(rect, Qt::AlignCenter, "99");
        }
    }

}

MyTabWidget.h:

#ifndef MYTABWIDGET_H
#define MYTABWIDGET_H

#include <QTabWidget>
#include "mytabbar.h"


class MyTabWidget : public QTabWidget
{
    Q_OBJECT
public:
    explicit MyTabWidget(QWidget *parent = 0);

};

#endif // MYTABWIDGET_H

MyTabWidget.cpp:

#include "mytabwidget.h"

MyTabWidget::MyTabWidget(QWidget *parent)
{
    setTabBar(new MyTabBar(this));
}

 

5，源码下载

 

链接：https://pan.baidu.com/s/1v3mfwt3ReIoldXWBmzVOBw 
提取码：fo4f 

 

链接不一定永久有效，如果失效可在群文件免费下载：

群号码：1149411109

群名称：Qt实战派学习群