版本 | 作者 | 日期 | 备注 |
---|---|---|---|
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
#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
只有大家共同分享经验,才能让大家更快的进步。