改造QTabWidget的QTabBar,自绘随意控制样式,不同颜色
2021-04-28 13:01
1056 查看
1,简介
本文介绍通过自绘,随意定制QTabWidget的 TabBar的方法
可设置不同Tab页的不同背景色、前景色、边框、鼠标三态色、尺寸,以及绘制其他自定义内容(如角标)
2,效果
3,主要思路
继承QTabBar
改尺寸就是重写 tabSizeHint 函数
改绘制就是重写 paintEvent 函数
另外由于QTabWidget 的setTabBar函数为protected, 为了替换 TabBar ,也继承了一份QTabWidget ,在构造函数内替换
因此要注意,demo里 tabWidget 已经在ui设计器内提升成了 MyTabWidget
4,主要代码
就是写了2个类:MyTabBar、MyTabWidget
这里只为了演示第1页和第2页的区分,代码里写死了。实际使用时,根据需要用变量控制。
MyTabBar.h:
#ifndef MYTABBAR_H #define MYTABBAR_H #include <QtWidgets> #define COLOR_HOVER "#CDC9C9" #define COLOR_SELECT_0 "#4F94CD" #define COLOR_SELECT_1 "#EEB422" #define COLOR_NORMAL_0 "#63B8FF" #define COLOR_NORMAL_1 "#FFFF00" #define COLOR_MARK "#FF3333" class MyTabBar : public QTabBar { Q_OBJECT public: explicit MyTabBar(QWidget *parent = 0); protected: QSize tabSizeHint(int index) const; void paintEvent(QPaintEvent *event); }; #endif // MYTABBAR_H
MyTabBar.cpp:
#include "mytabbar.h" #include <QPainter> MyTabBar::MyTabBar(QWidget *parent) : QTabBar(parent) { } QSize MyTabBar::tabSizeHint(int index) const { return QSize(200,50); } void MyTabBar::paintEvent(QPaintEvent *event) { // QTabBar::paintEvent(event); QPainter p(this); for(int i = 0 ; i < count(); i++) { QRect rc = tabRect(i); QStyleOptionTabV2 option; initStyleOption(&option, i); //tab背景 p.setPen(Qt::NoPen); if(QStyle::State_MouseOver & option.state) { p.setBrush(QColor(COLOR_HOVER)); } else if(QStyle::State_Selected & option.state) { if(i == 0) { p.setBrush(QColor(COLOR_SELECT_0)); } else if(i == 1) { p.setBrush(QColor(COLOR_SELECT_1)); } } else { if(i == 0) { p.setBrush(QColor(COLOR_NORMAL_0)); } else if(i == 1) { p.setBrush(QColor(COLOR_NORMAL_1)); } } p.drawRect(rc); //tab文字 p.setPen(Qt::black); p.setBrush(Qt::NoBrush); p.drawText(rc,Qt::AlignCenter,tabText(i)); //红色角标 if(i == 1) { QRect rect(0,0,30,30); rect.moveTopRight(rc.topRight()); p.setPen(Qt::NoPen); p.setBrush(QColor(COLOR_MARK)); p.drawEllipse(rect); p.setPen(QColor(Qt::white)); p.drawText(rect, Qt::AlignCenter, "99"); } } }
MyTabWidget.h:
#ifndef MYTABWIDGET_H #define MYTABWIDGET_H #include <QTabWidget> #include "mytabbar.h" class MyTabWidget : public QTabWidget { Q_OBJECT public: explicit MyTabWidget(QWidget *parent = 0); }; #endif // MYTABWIDGET_H
MyTabWidget.cpp:
#include "mytabwidget.h" MyTabWidget::MyTabWidget(QWidget *parent) { setTabBar(new MyTabBar(this)); }
5,源码下载
链接:https://pan.baidu.com/s/1v3mfwt3ReIoldXWBmzVOBw
提取码
1a2e2
xff1a;fo4f
链接不一定永久有效,如果失效可在群文件免费下载:
群号码:1149411109
群名称:Qt实战派学习群
相关文章推荐
- QTabWidget and QTabBar.的文字的颜色设置,三种方法
- lua终端控制输出不同颜色
- javascript控制不同行不同颜色
- QTabWidget添加自定义样式
- python 在控制台中用不同颜色打印信息
- QTabWidget样式设置
- 一个label定义不同字符样式和颜色
- JQuery来控制表格奇偶行的不同背景颜色显示
- Flex中如何给depthColors样式设置一个颜色数组给树Tree控件不同层设置不同颜色的例子
- 关于dev的Gridview控件的行数据的颜色控制,根据不同的值设置不同颜色
- qss配置QTabwidget页面样式
- 通过style来控制隔行显示不同颜色
- 在ALV 上控制不同的颜色和加复选框这样的按钮
- QTabWidget 细节样式定制'>'的使用
- 用不同颜色画出自己和敌人的坦克,同时用adws键控制自己的坦克运动
- python 在控制台中用不同颜色打印信息
- 正六面体染色 正六面体用4种颜色染色。共有多少种不同的染色样式?要考虑六面体可以任意旋转、翻转。
- python 输出的颜色、样式控制
- 终端字符颜色、样式控制
- 关于dev的Gridview控件的行数据的颜色控制,根据不同的值设置不同颜色