Qt关于tabWidget中tab样式的重绘

Qt关于tabWidget中tab样式的重绘

版本说明

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

目录

文章目录

    • Qt关于tabWidget中tab样式的重绘
    • 版本说明
    • 目录
    • 一、需求分析
    • 二、最终效果展示
    • 三、源码详细说明
    • 四、最后

一、需求分析

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

Qt关于tabWidget中tab样式的重绘_第1张图片

在网上找了一下发现这篇文章:https://blog.csdn.net/skyztttt/article/details/52448992

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

二、最终效果展示

Qt关于tabWidget中tab样式的重绘_第2张图片

三、源码详细说明

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

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

#ifndef CUSTOMTABSTYLE_H
#define CUSTOMTABSTYLE_H

#include 
#include 


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 

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界面等的开发基本上都会遇到控件样式重绘,从原理上了解重写以及掌握一些重绘需要使用的类,那么灵活运用重绘就是迟早的事了。

再次感谢:https://blog.csdn.net/skyztttt/article/details/52448992
只有大家共同分享经验,才能让大家更快的进步。

你可能感兴趣的:(Qt开发)