QTabWidget的tabbar不同方向显示 文字方向设置 图标跟随变化 实现方式 qt控件绘制原理

先来看结果图：（参考博客：QTabWidget中tab页文本水平或垂直设置_pyqt tab_widget.settabposition(qtabwidget.west) 字体-CSDN博客）

从图中可知，"普通"是qt自己的样式，但是很明显，在垂直方向tab时候，字体也跟着垂直了，不太利于阅读，而第3个tab，则是将文字给正着显示过来了，第5个图，更是直接将文字也水平放置过来了，都是做了改进。但是仍然存在个问题，例如tab3，图标却仍然是反着的，不太好看，所以，如何解决这个问题？效果图如下：

我们需要来研究一下QTabBar绘制的原理，然后编写相关代码进行实现。

QTabBar绘制原理

QTabBar绘制过程，函数调用层级大概如下：

说明：一般的绘制简单控件，线条，路径，图片啥的，就是在paintEvent函数里直接调用painter的drawText函数，drawPixmap函数等， 绘制就可以了，但是绘制复杂一些的qt自己的控件，是通过创建一个QStylePainter 绘制控件专用对象，QStylePainter stylePainter里有个drawControl成员函数进行绘制的，而该函数需要传入绘制的控件类型（也叫element，例如tab头、pushbutton、listview等），然后里面调用 其拥有的成员QStyle对象 的 专用绘制方法void drawControl(QStyle::ControlElement element, const QStyleOption *option,   QPainter *painter, const QWidget *widget = nullptr) const;进行绘制。

这里面就有几个是虚函数，即我们可以子类化这些类重写这些函数，实现定制化功能：

  1. 子类化该控件类，重写 paintEvent(QPaintEvent * painter)函数
  2. 子类化QStyle，重写drawControl函数

paintEvent(QPaintEvent * painter) 

  1. QStylePainter stylePainter(this);

  2. QStyleOptionTab opt;

  3. initStyleOption(&opt,i); //初始化，将opt赋值为绘制时候所需要的信息，例如文本内容，线宽，尺寸大小等信息
  4. 这里可以设置一下画笔stylePainter的一些属性，例如绘制位置，旋转情况，颜色等
  5. stylePainter.drawControl(QStyle::CE_TabBarTabLabel,opt); //指定绘制对应的元素（tab文字和图标内容），以及绘制需要的细节信息
  6. stylePainter.drawControl(QStyle::CE_TabBarTabShape, opt);//指定绘制对应的元素（tab形状），以及绘制需要的细节信息

所以有了以上绘制原理的认识，接下来就是如何实现tabbar不同方向时，图标和文字同样能正着显示了。此外，qt其它控件的绘制，也是同样道理，以后我们都可以定制化实现或者魔改已有的控件了。

注：QStyle在qt中，已经有各种现成的子类了，QStyle <- QCommonStyle <- QProxyStyle

代码实现

这里仅仅举几个例子，因为原理明白了，就可以自己定制化实现了。

例1：实现图5：tab在左侧，但是tab文字水平

注：设置tab的方向，可以在UI设计时候直接设置了，也可以tabwidget的设置tab方向函数进行设置，然后tab头就是改变方向了的。

这个有两种实现方法：

  1. 子类化 QTabBar ，重写 paintEvent(QPaintEvent *) 函数，里面调用 drawControl 前，修改掉 stylePainter 的方向为旋转90度即可（因为默认的drawControl(QStyle::CE_TabBarTabLabel,opt)函数里面会再次旋转90读的），此外，重写tabSizeHint(int index)，返回该tab的大小也要跟着旋转一下的，即 QSize.transpose(); 可以参考博客：Qt tabWidget设置tab左右显示时 文字横向显示_qtabwidget标签文字横向-CSDN博客
  2. 子类化QStyle，重写drawControl函数。因为，控件的实际绘制是交给QStyle来完成的，所以我们就重写它的drawControl函数即可。然后把子类化的QStyle对象设置到目标控件中去即可（setStyle()函数实现）。可以参考最开始那个博客：（就是将每个字符后面加一个\n 换行符，从而实现一个垂直的qstring，然后画笔将文本直接正着画上去即可）QTabWidget中tab页文本水平或垂直设置_pyqt tab_widget.settabposition(qtabwidget.west) 字体-CSDN博客

备注：QSize sizeFromContents函数是内容显示的尺寸控制功能，比如我们可以额外增加一些size加进去，但是可以的。void drawItemText函数是绘制文本的集成化函数，我们也可以重新实现它，实现

例2：实现目标效果图：tab在左侧，tab文字垂直正着的，且图标也是正着的（也就是我们目标效果图）

唯一方法，子类化QStyle，重写drawControl函数。因为此时需要文字方向是竖直的，但是又是正的，是没法通过旋转画笔的方式直接来绘制实现。所以只能是重写QStyle的drawControl函数。

原理：文本的每一个字符后面加一个换行符，从而实现竖直方向的字符串。但是需要先绘制icon，然后y方向平移一下画笔，继续绘制处理好的字符串即可。

这里有几个要点：

  1. 传入的const QStyleOption *opt ，可以强转为 const QStyleOptionTab *tab，然后就能获得tab->rect，tab->text，tab->shape等信息，而tab->shape是能知道当前tab是水平的还是垂直的了。（查看qt的QTabBar控件源码得知，所以不知道怎么实现时候可以去看看qt的源码，很多问题就一目了然了）
  2. 具体实现该函数时，直接从qt源码实现里拷贝过来吧，然后自己修改指定地方，实现自己功能即可。

核心代码如下：（在第一个博客基础上，替换掉TabBarStyle.cpp文件内容即可编译运行 QTabWidget中tab页文本水平或垂直设置_pyqt tab_widget.settabposition(qtabwidget.west) 字体-CSDN博客）

#include "TabBarStyle.h"
#include <QPainter>
#include <QStyleOptionTab>
#include <QDebug>//拷贝的qt源码，不然下面有的函数调用该函数会报错
static QWindow *qt_getWindow(const QWidget *widget)
{return widget ? widget->window()->windowHandle() : nullptr;
}TabBarStyle::TabBarStyle(): QProxyStyle()
{// m_orientation = orientation;
}//拷贝的qt源码，不然下面有的函数调用该函数会报错
void TabBarStyle::tabLayout(const QStyleOptionTab *opt, const QWidget *widget, QRect *textRect, QRect *iconRect) const
{Q_ASSERT(textRect);Q_ASSERT(iconRect);QRect tr = opt->rect;bool verticalTabs = opt->shape == QTabBar::RoundedEast|| opt->shape == QTabBar::RoundedWest|| opt->shape == QTabBar::TriangularEast|| opt->shape == QTabBar::TriangularWest;if (verticalTabs)tr.setRect(0, 0, tr.height(), tr.width()); // 0, 0 as we will have a translate transformint verticalShift = pixelMetric(QStyle::PM_TabBarTabShiftVertical, opt, widget);int horizontalShift = pixelMetric(QStyle::PM_TabBarTabShiftHorizontal, opt, widget);int hpadding = pixelMetric(QStyle::PM_TabBarTabHSpace, opt, widget) / 2;int vpadding = pixelMetric(QStyle::PM_TabBarTabVSpace, opt, widget) / 2;if (opt->shape == QTabBar::RoundedSouth || opt->shape == QTabBar::TriangularSouth)verticalShift = -verticalShift;tr.adjust(hpadding, verticalShift - vpadding, horizontalShift - hpadding, vpadding);bool selected = opt->state & QStyle::State_Selected;if (selected) {tr.setTop(tr.top() - verticalShift);tr.setRight(tr.right() - horizontalShift);}// left widgetif (!opt->leftButtonSize.isEmpty()) {tr.setLeft(tr.left() + 4 +(verticalTabs ? opt->leftButtonSize.height() : opt->leftButtonSize.width()));}// right widgetif (!opt->rightButtonSize.isEmpty()) {tr.setRight(tr.right() - 4 -(verticalTabs ? opt->rightButtonSize.height() : opt->rightButtonSize.width()));}// iconif (!opt->icon.isNull()) {QSize iconSize = opt->iconSize;if (!iconSize.isValid()) {int iconExtent = pixelMetric(QStyle::PM_SmallIconSize, opt);iconSize = QSize(iconExtent, iconExtent);}QSize tabIconSize = opt->icon.actualSize(iconSize,(opt->state & QStyle::State_Enabled) ? QIcon::Normal : QIcon::Disabled,(opt->state & QStyle::State_Selected) ? QIcon::On : QIcon::Off);// High-dpi icons do not need adjustment; make sure tabIconSize is not larger than iconSizetabIconSize = QSize(qMin(tabIconSize.width(), iconSize.width()), qMin(tabIconSize.height(), iconSize.height()));const int offsetX = (iconSize.width() - tabIconSize.width()) / 2;*iconRect = QRect(tr.left() + offsetX, tr.center().y() - tabIconSize.height() / 2,tabIconSize.width(), tabIconSize.height());if (!verticalTabs)*iconRect = QStyle::visualRect(opt->direction, opt->rect, *iconRect);tr.setLeft(tr.left() + tabIconSize.width() + 4);}if (!verticalTabs)tr = QStyle::visualRect(opt->direction, opt->rect, tr);*textRect = tr;
}TabBarStyle::~TabBarStyle()
{
}void TabBarStyle::drawControl(ControlElement element, const QStyleOption *opt,QPainter *p, const QWidget *widget) const
{// 步骤一：调用父类的绘制 tab 的其它控件，即其它空间都按照默认绘制即可if (element != CE_TabBarTabLabel)QProxyStyle::drawControl(element, opt, p, widget);#if 1// 步骤二：定制化 绘制tab标签页文本，以及图标if (element == CE_TabBarTabLabel){if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(opt)) {QRect tr = tab->rect;bool verticalTabs = tab->shape == QTabBar::RoundedEast|| tab->shape == QTabBar::RoundedWest|| tab->shape == QTabBar::TriangularEast|| tab->shape == QTabBar::TriangularWest;int alignment = Qt::AlignCenter | Qt::TextShowMnemonic;if (!proxy()->styleHint(SH_UnderlineShortcut, opt, widget))alignment |= Qt::TextHideMnemonic;if (verticalTabs) {p->save();QTransform m1 = QTransform::fromTranslate(tr.x()-8, tr.y()+5);p->setTransform(m1);}//自己控制绘制tab的 文本，icon//原本：west：文本（上方）+icon（下方），且文字和ico方向不对。east：icon（上方）+文本（下方），且文字和ico方向不对//目标：west：icon（上方）+文本（下方），且文字和ico方向正确。east：同理QRect iconRect;tabLayout(tab, widget, &tr, &iconRect);tr = proxy()->subElementRect(SE_TabBarTabText, opt, widget); //we compute tr twice because the style may override subElementRectif (!tab->icon.isNull()) {QPixmap tabIcon = tab->icon.pixmap(qt_getWindow(widget), tab->iconSize,(tab->state & State_Enabled) ? QIcon::Normal: QIcon::Disabled,(tab->state & State_Selected) ? QIcon::On: QIcon::Off);p->drawPixmap(iconRect.x(), iconRect.y(), tabIcon);}if (verticalTabs)p->restore();QString tabText;if (verticalTabs){if (verticalTabs)p->save();p->resetTransform();QTransform m1 = QTransform::fromTranslate(0, 5);p->setTransform(m1);// 将文本字符串换行处理for (int i = 0; i < tab->text.length(); i++){tabText.append(tab->text.at(i));tabText.append('\n');}if (tabText.length() > 1)tabText = tabText.mid(0, tabText.length() - 1);}elsetabText = tab->text;if(verticalTabs)//注：这里传入的绘制区域，写的是 tab->rect，正确来说，不应该是这个区域，而是tr，即上面subElementRect(SE_TabBarTabText)//但是用tr显示不了，tr旋转一下也显示不了，当然，直接用tab->rect也就可以搞定的，但是其对齐方式作用就是//从tab最顶部开始算的，这里还存在一丁点问题，但是也没有什么明显问题了，不再继续研究了，这个不重要了proxy()->drawItemText(p, tab->rect, alignment, tab->palette, tab->state & State_Enabled, tabText, QPalette::WindowText);elseproxy()->drawItemText(p, tr, alignment, tab->palette, tab->state & State_Enabled, tabText, QPalette::WindowText);if (verticalTabs)p->restore();//qt本身源码if (tab->state & State_HasFocus) {const int OFFSET = 1 + pixelMetric(PM_DefaultFrameWidth);int x1, x2;x1 = tab->rect.left();x2 = tab->rect.right() - 1;QStyleOptionFocusRect fropt;fropt.QStyleOption::operator=(*tab);fropt.rect.setRect(x1 + 1 + OFFSET, tab->rect.y() + OFFSET,x2 - x1 - 2*OFFSET, tab->rect.height() - 2*OFFSET);drawPrimitive(PE_FrameFocusRect, &fropt, p, widget);}}}#endif
}QSize TabBarStyle::sizeFromContents(QStyle::ContentsType type, const QStyleOption *opt, const QSize &contentsSize, const QWidget *widget /*= nullptr*/) const
{if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(opt)){bool verticalTabs = tab->shape == QTabBar::RoundedEast|| tab->shape == QTabBar::RoundedWest|| tab->shape == QTabBar::TriangularEast|| tab->shape == QTabBar::TriangularWest;QString text = tab->text;int cnt = text.length()-1;QSize size = contentsSize;if (type == CT_TabBarTab){if (verticalTabs){size.rheight() += cnt*7;    //这是因为文本每个字符后加了换行符后，和水平摆放占据长度空间不一样了}}// size.setWidth(size.width()-20);return size;}elsereturn QProxyStyle::sizeFromContents(type, opt, contentsSize, widget);
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/285416.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【linux】进程的地址空间

【linux】进程的地址空间

1.代码看现象引入 #include<stdio.h>#include<unistd.h>#include<string.h> #include<stdlib.h>int val100;int main (){ printf("i am father,pid:%d,ppid:%d,val:%d&#xff0c;&val:%p\n",getpid(),getppid(),val,&val);size_t…
阅读更多...
Linux：点命令source

Linux：点命令source

相关阅读 Linuxhttps://blog.csdn.net/weixin_45791458/category_12234591.html?spm1001.2014.3001.5482 source命令用于读取一个文件的内容并在当前Shell环境&#xff08;包括交互式Shell或是非交互式Shell&#xff09;执行里面的命令。它被称为点命令是因为命令名source也可…
阅读更多...
IIS7/iis8/iis10安装II6兼容模块 以windows2022为例

IIS7/iis8/iis10安装II6兼容模块 以windows2022为例

因安全狗的提示 安全狗防护引|擎安装失败 可能原因是: IIS7及以上版本末安装1IS6兼容模块! .所以操作解决 如下. 在开始菜单中,找到服务器管理器.找到下图的IIS,右键添加角色和功能,找到web服务器的管理工具选项,iis6管理兼容性 打钩并安装. 如下图
阅读更多...
自然拼读-组合音（上篇）

自然拼读-组合音（上篇）

自然拼读-组合音 1、元音字母A的二声发音组合 组合音at 注意&#xff1a;“t”是气音&#xff0c;不要太重。 Eg&#xff1a;cat&#xff08;猫&#xff09; fat&#xff08;肥的&#xff09; bat&#xff08;蝙蝠&#xff09; 组合音ap 注意&#xff1a;“p”在尾巴发音…
阅读更多...
MRC是谁？- 媒体评级委员会 Media Rating Council

MRC是谁？- 媒体评级委员会 Media Rating Council

在在线广告的世界里&#xff0c;有许多不同的技术和实践用于提供和衡量广告。对于广告商、出版商和营销人员来说&#xff0c;了解这些技术是如何工作的以及如何有效使用这些技术很重要。在这方面发挥关键作用的一个组织是媒体评级委员会&#xff08;MRC&#xff09;。 1. 了解…
阅读更多...
蓝桥杯基础练习详细讲解二（具体代码、解题思路、Python）

蓝桥杯基础练习详细讲解二（具体代码、解题思路、Python）

试题 基础练习 回文数 提交此题 评测记录 资源限制 内存限制&#xff1a;512.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 1221是一个非常特殊的数&#xff0c;它从左边读和从右边读是一样的&#x…
阅读更多...
mysql基础3索引

mysql基础3索引

存储引擎 存储引擎就是存储数据、建立索引、更新/查询数据等技术的实现方式 。存储引擎是基于表的&#xff0c;而不是 基于库的&#xff0c;所以存储引擎也可被称为表类型。 1). 建表时指定存储引擎 CREATE TABLE 表名(字段1 字段1类型 [ COMMENT 字段1注释 ] ,......字段n…
阅读更多...
Docker进阶：Docker-compose 实现服务弹性伸缩

Docker进阶：Docker-compose 实现服务弹性伸缩

Docker进阶&#xff1a;Docker-compose 实现服务弹性伸缩 一、Docker Compose基础概念1.1 Docker Compose简介1.2 Docker Compose文件结构 二、弹性伸缩的原理和实现步骤2.1 弹性伸缩原理2.2 实现步骤 三、技术实践案例3.1 场景描述3.2 配置Docker Compose文件3.3 使用 docker-…
阅读更多...
【项目管理后台】Vue3+Ts+Sass实战框架搭建二

【项目管理后台】Vue3+Ts+Sass实战框架搭建二

Vue3TsSass搭建 git cz的配置mock 数据配置viteMockServe 建立mock/user.ts文件夹测试一下mock是否配置成功 axios二次封装解决env报错问题&#xff0c;ImportMeta”上不存在属性“env” 统一管理相关接口新建api/index.js 路由的配置建立router/index.ts将路由进行集中封装&am…
阅读更多...
AIGC实战——Transformer模型

AIGC实战——Transformer模型

AIGC实战——Transformer模型 0. 前言1. T52. GPT-3 和 GPT-43. ChatGPT小结系列链接 0. 前言 我们在 GPT (Generative Pre-trained Transformer) 一节所构建的 GPT 模型是一个解码器 Transformer&#xff0c;它逐字符地生成文本字符串&#xff0c;并使用因果掩码只关注输入字…
阅读更多...
海外媒体宣发：十大国外中文网站-大舍传媒

海外媒体宣发：十大国外中文网站-大舍传媒

十大国外中文网站 1、欧洲时报 覆盖欧洲且较具影响力的华文媒体 国外中文新闻网站&#xff0c;欧洲时报文化传媒集团旗舰日报《欧洲时报》旗下官方网站&#xff0c;总部设在法国巴黎&#xff0c;创刊于1983年&#xff0c;现已成为唯一发行覆盖全欧、发行量最大、最具影响力的华…
阅读更多...
Vue3 上手笔记

Vue3 上手笔记

1. Vue3简介 2020年9月18日&#xff0c;Vue.js发布版3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;n 经历了&#xff1a;4800次提交、40个RFC、600次PR、300贡献者 官方发版地址&#xff1a;Release v3.0.0 One Piece vuejs/core 截止2023年10月&#xff0c;最…
阅读更多...
STM32最小核心板使用HAL库ADC读取MCU温度(使用DMA通道)

STM32最小核心板使用HAL库ADC读取MCU温度(使用DMA通道)

STM32自带CPU的温度数据&#xff0c;需要使用ADC去读取。因此在MX创建项目时如图配置&#xff1a; 模块初始化代码如下&#xff1a; void MX_ADC1_Init(void) {/* USER CODE BEGIN ADC1_Init 0 *//* USER CODE END ADC1_Init 0 */ADC_ChannelConfTypeDef sConfig {0};/* USER…
阅读更多...
Docker 入门使用说明

Docker 入门使用说明

Docker 入门使用说明 Docker 安装 Docker 官网&#xff1a;Docker Docker 安装说明&#xff1a;Docker 安装说明 这里由于 Docker 在实时更新&#xff0c;所以每次安装 Docker 用来导入 key 的链接可能会有变化&#xff0c;这里就参考官方的安装方法即可 Docker 常用命令说…
阅读更多...
（ES6）前端八股文修炼Day2

（ES6）前端八股文修炼Day2

1. let const var 的区别 var&#xff1a; var 是在 ES5 中引入的声明变量的关键字。 具有函数作用域&#xff0c;而不是块作用域&#xff0c;这意味着使用 var 声明的变量在函数内部是可见的。 变量可以被重复声明&#xff0c;而且变量的值可以在声明前使用&#xff0c;这可能…
阅读更多...
生成微信小程序二维码

生成微信小程序二维码

首页 -> 统计 可以通过上面二个地方配置&#xff0c;生成小程序的二维码&#xff0c;并且在推广分析里&#xff0c;有详细的分析数据&#xff0c;
阅读更多...
Vue3更新Package.json版本号

Vue3更新Package.json版本号

由于我之前已经更新过了&#xff0c;下面的方法提示我已经是最新的了&#xff0c;记录一下&#xff0c;过段时间在测试一下 npm install -g vue/clivue upgrade
阅读更多...
【Hadoop大数据技术】——Hadoop高可用集群（学习笔记）

【Hadoop大数据技术】——Hadoop高可用集群（学习笔记）

&#x1f4d6; 前言&#xff1a;Hadoop设计之初&#xff0c;在架构设计和应用性能方面存在很多不如人意的地方&#xff0c;如HDFS和YARN集群的主节点只能有一个&#xff0c;如果主节点宕机无法使用&#xff0c;那么将导致HDFS或YARN集群无法使用&#xff0c;针对上述问题&#…
阅读更多...
项目1-加法计算器

项目1-加法计算器

1.创建项目 2.导入前端代码 2.1 static包内 2.2 测试前端代码是否有误 显示成功说明无误 2.3 定义用户接口 请求路径&#xff1a;calc/sum 请求方式&#xff1a;GET/POST 接口描述&#xff1a;计算两个整数相加 请求参数: 参数名类型是否必须备注num1Integer是参与计算的第…
阅读更多...
YiYi-Web项目介绍

YiYi-Web项目介绍

YiYi-Web项目介绍 1. 简介2. 使用2.1 后端开发环境2.2 前端开发环境 3. 测试环境&#xff1a;4. 更新日志5. 打包情况6.项目截图 本项目前端是html、css、js、jQuery基础技术。 后端都是最新的SpringBoot技术&#xff0c;不分离版本&#xff0c; 是最基础的项目开发教程&#x…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023