Qt借助隐藏控件和QSS绘制重复元素

借助隐藏控件使用QStyle绘制重复元素

在之前两篇文章，QComboBox文字居中 和 使用QSS定制SwitchButton 中，我借助不同的 QStyleOption 来定制复杂控件，目的是为了将 QSS 这一 UI 美化机制应用到自绘控件中，尽可能减少在代码中使用接口和变量。

本文对此技巧，再提出一种应用，使用 QSS 应用到隐藏控件，借助该控件的 QStyleOption，在其他窗口或图片中绘制出重复元素。

具体原理应该跟之前文章一样，没有什么新的东西，可以参考前两篇文章。

一、场景

当项目中某个控件内部包含多个简单重复元素，比如多个序号，数量动态变化、样式简单、无交互。使用 “布局+控件” 组合是个比较直接的办法，但如果想自绘又想使用 qss 统一定制，可以考虑该方法。

二、方法

假设要绘制多个圆形的标签，有边框，内部有不同的数字。

1.定义一个隐藏的按钮

按钮不需要设置文本等，是隐藏的，只是用来生效样式的。而且，由于元素重复，只需要一个按钮。

invisibleButton = new QPushButton(this);

invisibleButton->setVisible(false);

invisibleButton->setObjectName("message_number");

对该按钮设置一些基本样式

#message_number{

font-family: 'dengxian';

font-weight: 800;

border:2px solid white;/*边框*/

background: #CC3B45;/*背景*/

color: white;/*前景*/

font-size: 24px;

border-radius: 22px;/*圆角，调整为*/

min-width: 40px; /*限定尺寸*/

max-width: 40px;

min-height: 40px;

max-height: 40px;

}

2.重写事件

在指定的位置借助该隐藏按钮绘制一个元素

QPainter painter(this);

QStyleOptionButton option;

option.initFrom(invisibleButton);

option.text = "12"; // 修改文本

option.rect.moveTopLeft(QPoint(100, 100)); // QSS限制了隐藏按钮的尺寸，所以只调整位置

this->style()->drawControl(QStyle::CE_PushButton, &option, &painter, invisibleButton);

绘制效果如图（忽略我的审美）：

也可以设置不同状态下的样式，只不过要手动调整 QStyleOptionButton 的 state，例如，添加 disabled 样式：

#message_number:disabled{

background: #ED8C92;

color: #FFF5F5;

border-color: #FFF5F5;

}

在上面的图案右侧再画一个元素：

option.text = "20";

option.state &= ~QStyle::State_Enabled;// 手动去掉enable

option.rect.moveTopLeft(QPoint(160, 100));// 移动

this->style()->drawControl(QStyle::CE_PushButton, &option, &painter, invisibleButton);

这样就可以实现重复元素的绘制，实际上涉及交互的复杂控件，Qt 也是使用类似的原理。

三、总结

算上前两篇，关于 QStyle 和 QStyleOption 的使用技巧也就这么多，Qt 并没有把很多细节暴露出来，所以再熟练也玩不出多少花样。不过也有点优点，个人觉得能让代码看起来更贴近源码，简洁。

另外补一个最近的发现，Qt 里 setStyleSheet 设置样式表，支持传入文件路径，Qt 源码里判断参数是否是 “file:///” 开头，是的话去掉这8个字符并用 QFile 打开读取文件。所以按照逻辑可以这么写：

setStyleSheet("file:///:/qssfile.qss"); //Qt资源文件路径

setStyleSheet("file:///D:/qssfile.qss");

————————————————

版权声明：本文为CSDN博主「KumaNPC」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/eiilpux17/article/details/115985618