Qt关于tabWidget中tab样式的重绘

Qt关于tabWidget中tab样式的重绘

版本说明

版本	作者	日期	备注
0.1	loon	2018.12.29	初稿

目录

文章目录

一、需求分析

界面中需要做一个类似下面这样界面的效果：

在网上找了一下发现这篇文章​

OK，那么可以确定的就是这种效果可以通过QTabWidget来重绘达到类似的效果。只是对于参考文章中的内容部分内容不是很理解，直接套用后发现离我想要的效果还有些远，最终琢磨一段时间后发现要达到根据自己的要求重绘QTabWidget需要先了解Qt 2D绘图的一些基础概念，了解QPainter、QRect、QTextOption、QFont类、画刷和画笔等的作用（这些结合Qt助手和一些Qt教程书籍来学习和了解），以及对OOP中重写的一些了解（这个是语法问题了，暂时不会也不影响你照猫画虎）。

二、最终效果展示

三、源码详细说明

包含两部分，要重写肯定要有一个重写样式的类，然后tabwidget还要调用这个重写的类渲染样式。

重写类CustomTabStyle，继承自QProxyStyle，感兴趣的可以继续看看最终继承自哪里：

#ifndef
#define

#include <QPainter>
#include <QProxyStyle>


class CustomTabStyle:public QProxyStyle
{
public:
    CustomTabStyle();
    
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
            const QSize &size, const QWidget *widget) const;
    
    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const;
};

#endif// CUSTOMTABSTYLE_H

#include "customtabstyle.h"
#include <QStyleOptionTab>

CustomTabStyle::CustomTabStyle()
{
    
}

QSize CustomTabStyle::sizeFromContents(QStyle::ContentsType type, const QStyleOption *option, const QSize &size, const QWidget *widget) const
{
    QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
    if (type == QStyle::CT_TabBarTab) {
        s.transpose();
        s.rwidth() = 150; // 设置每个tabBar中item的大小
        s.rheight() = 40;
    }
    return s;
}

void CustomTabStyle::drawControl(QStyle::ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
{
    if (element == CE_TabBarTabLabel) {
        if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option)) {
            QRect allRect = tab->rect;
            
            if (tab->state & QStyle::State_Selected) {  //选中状态：tab的Qlabel为矩形，底色为白色，边框淡灰色，文字为淡蓝色且加粗居中（具体颜色值由拾色器提取）
                painter->save();
                painter->setPen(0xdadbdc);  //设置画笔颜色为淡灰色
                painter->setBrush(QBrush(0xffffff));  //设置画刷为白色
                painter->drawRect(allRect.adjusted(0,0,0,0));  //重绘tab的矩形边框
                painter->restore();  //还原为默认
                
                painter->save();
                painter->setPen(0x006ab1);  //重新设置画笔颜色为淡蓝色
                QTextOption option;
                option.setAlignment(Qt::AlignCenter);  //设置文字居中
                painter->setFont(QFont("", 9, QFont::Bold));  //设置文字样式，大小为9并加粗，颜色由画笔决定
                painter->drawText(allRect, tab->text, option);  //重绘文字
                painter->restore();
            }
            else if(tab->state & QStyle::State_MouseOver) { //hover状态：tab的Qlabel为矩形，底色为灰色，边框仍未淡灰色，文字加粗居中
                painter->save();
                painter->setPen(0xdadbdc);  //设置画笔颜色为淡灰色
                painter->setBrush(QBrush(0xf2f2f2));  //设置画刷为灰色
                painter->drawRect(allRect.adjusted(0,0,0,0));  //重绘tab的矩形边框
                painter->restore();  //还原
                
                painter->save();
                QTextOption option;
                option.setAlignment(Qt::AlignCenter);  //设置文字居中
                painter->setFont(QFont("", 9, QFont::Bold));  //设置文字样式，大小为9并加粗，颜色由画笔决定
                painter->drawText(allRect, tab->text, option);  //重绘文字
                painter->restore();
            }
            else //其它的：tab的Qlabel为矩形，底色为灰色，边框为淡灰色不变，文字不加粗但居中
            {
                painter->save();
                painter->setPen(0xdadbdc);
                painter->setBrush(QBrush(0xf2f2f2));
                painter->drawRect(allRect.adjusted(0,0,0,0));
                painter->restore();
                
                painter->save();
                QTextOption option;
                option.setAlignment(Qt::AlignCenter);
                painter->drawText(allRect, tab->text, option);
                painter->restore();
            }
            
            return;
        }
    }
    
    if (element == CE_TabBarTab) {
        QProxyStyle::drawControl(element, option, painter, widget);
    }
}

调用，包含重写类的头文件然后按如下调用即可：

ui->tabWidget->tabBar()->setStyle(new CustomTabStyle);

四、最后

控件样式重绘其实就是对基类提供的样式方法进行重写（Overriding ），一般来说，子类可继承父类中的方法，而不需要重新编写相同的方法。但有时子类并不想原封不动地继承父类的方法，而是想作一定的修改，这就需要采用方法的重写，比如这里我们就不想用原来的样式，想自己重绘tabwidget中tab的样式。方法重写又称方法覆盖，这个概念一般是和重载一起出现的，具体更多的内容这里就不展开了。

面向对象编程中经常会遇到重写，它是多态性的一种体现。界面开发中经常会遇到控件样式重绘，因为默认系统自带的控件往往不符合我们的要求，无论是PC界面还是APP界面等的开发基本上都会遇到控件样式重绘，从原理上了解重写以及掌握一些重绘需要使用的类，那么灵活运用重绘就是迟早的事了。

再次感谢 只有大家共同分享经验，才能让大家更快的进步。