Qt关于tabWidget中tab样式的重绘
Qt关于tabWidget中tab样式的重绘
版本说明
版本 | 作者 | 日期 | 备注 |
---|---|---|---|
0.1 | loon | 2018.12.29 | 初稿 |
目录
文章目录
- Qt关于tabWidget中tab样式的重绘
- 版本说明
- 目录
- 一、需求分析
- 二、最终效果展示
- 三、源码详细说明
- 四、最后
一、需求分析
界面中需要做一个类似下面这样界面的效果:
在网上找了一下发现这篇文章: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
只有大家共同分享经验,才能让大家更快的进步。
Qt关于tabWidget中tab样式的重绘相关推荐
- C# ListBox控件中item换行 C#重绘ListBox项
C# ListBox控件中item换行 C#重绘ListBox项 WindowsForm项目开发中,Listbox控件item数据项,只能一条数据显示在一行,有的时候内容很长,体验就非常之差.简直要歇 ...
- IE8中伪元素动态作用样式不重绘bug记录
前阵子对公司框架的前端优化中,使用了字体图标(iconfont)来做模块的图标集,供用户进行配置选择. 字体图标的有非常好的灵活性和复用性,可以像处理文字一样通过font-size进行大小设置.通过c ...
- 3ds模型在OpenGL中的读取和重绘
关键字: OpenGL 3ds模型文件格式 读取与重绘 对OpenGL做了基本的介绍,并详细介绍了3ds模型的文件格式.在VC+十下的OpenGL编程中完成了3ds模型的读取与重绘.并例举了一个3d ...
- iphone中怎么强制view重绘
当绘图绘制在view上,可以调用[view setNeedsDisplay];系统会回调drawRect方法,当view上小范围重复刷新,建议使用[view setNeedsDisplayInRect ...
- java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
- C++重绘CPropertySheet
CWizard类继承自CPropertySheet,左边的按钮使用重绘的CListBox(CSideNav).CPropertySheet原有的CTabCtrl被隐藏了,窗口中的按钮使用重绘的CBut ...
- 重排 (reflow) 与重绘 (repaint)
前言 本文依旧是日常学习总结篇,主要是要理解浏览器的重排与重绘. 一.浏览器解析渲染页面过程 当浏览器获得一个 html 文件时,会 "自上而下" 加载,并在加载过程中进行解析渲染 ...
- CSS回流(Reflow)与重绘(Repaint)
一.介绍 CSS中的回流与重绘是指当HTML或CSS节点发生变化时,浏览器重新绘制和展示页面的过程.回流和重绘会导致浏览器性能降低,应尽量减少. 二.浏览器解析页面的流程 浏览器解析页面主要分为以下的 ...
- Stable Diffusion系列课程上:安装、提示词入门、常用模型(checkpoint、embedding、LORA)、放大算法、局部重绘、常用插件
文章目录 一.Stable Diffusion简介与安装 二.文生图(提示词解析) 2.1 提示词入门 2.2 权重 2.3 负面提示词( Negative prompt) 2.4 出图参数设置 2. ...
最新文章
- 微信小程序组件 日历
- 查 101.201.62.30 IP信誉方法
- 平流式隔油池计算_玻璃钢隔油池
- 飞鸽传书2012绿色版下载
- 工信部苗圩:提速降费并不会影响运营商对5G投入
- 修改tomcat控制台title的方法
- 2018春招-赛码网-例题-不确定输入组数的多组数列求和
- Java 支付对接之微信/支付宝扫码支付(也就是H5支付)
- 毕业生写论文必备!!超详细讲解参考文献格式
- C#Excel导入导出以及导出为txt文件
- ubuntu等linux发行版声卡、网卡、显卡驱动问题解决
- 05Echarts - 折线图(Smoothed Line Chart)
- 数学建模学习:因子分析
- attrib批量显示文件夹_[attrib命令隐藏文件夹]Attrib命令,可以让文件夹彻底的隐藏起来(转载)...
- 张亚勤:天才少年的勇敢成长
- vue-cli脚手架卡在 ‘98%’ after emitting CopyPlugin 报错,无法运行
- 古文字识别助手与众包平台——项目博客五
- SketchUp: Modeling Exteriors from Photos SketchUp:从照片建模外部 Lynda课程中文字幕
- java.io.InvalidClassException异常解决
- java lcm_Orac and LCM
热门文章
- 鸿蒙启智 博学多才是什么意思,博学多才是什么意思
- 鸿蒙启智 博学多才,明代大才子解缙博学多才, 对的下联构思巧妙, 让人佩服
- 手机号/邮箱/身份证验证
- 勒索病毒变种再来!你如何应对措施
- 计算机辅助设计绘图佛,计算机辅助设计绘图员-标准及考试大纲.doc
- 政府怎么应用视频直播系统?
- Sapling: 一款 Facebook 开源跨平台、高度可扩展、兼容 Git 的源码控制系统
- 华为鸿蒙os适配机型曝光,手机资讯导报:华为鸿蒙OS2.0首批适配机型曝光
- oracle数据库9.2,Oracle数据库从 9.2.0.1 到 9.2.0.8升级步骤 for win
- WPS2019设置自动保存方法