| 版本 | 作者 | 日期 | 备注 |
|---|---|---|---|
| 0.1 | loon | 2018.12.29 | 初稿 |
界面中需要做一个类似下面这样界面的效果：
在网上找了一下发现这篇文章：https://blog.csdn.net/skyztttt/article/details/52448992
OK，那么可以确定的就是这种效果可以通过QTabWidget来重绘达到类似的效果。只是对于参考文章中的内容部分内容不是很理解，直接套用后发现离我想要的效果还有些远，最终琢磨一段时间后发现要达到根据自己的要求重绘QTabWidget需要先了解Qt 2D绘图的一些基础概念，了解QPainter、QRect、QTextOption、QFont类、画刷和画笔等的作用（这些结合Qt助手和一些Qt教程书籍来学习和了解），以及对OOP中重写的一些了解（这个是语法问题了，暂时不会也不影响你照猫画虎）。
包含两部分，要重写肯定要有一个重写样式的类，然后tabwidget还要调用这个重写的类渲染样式。
重写类CustomTabStyle，继承自QProxyStyle，感兴趣的可以继续看看最终继承自哪里：
#ifndef CUSTOMTABSTYLE_H
#define CUSTOMTABSTYLE_H
#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界面等的开发基本上都会遇到控件样式重绘，从原理上了解重写以及掌握一些重绘需要使用的类，那么灵活运用重绘就是迟早的事了。
再次感谢：https://blog.csdn.net/skyztttt/article/details/52448992
只有大家共同分享经验，才能让大家更快的进步。