借助隐藏控件使用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"); //磁盘文件