Qt之可视化QSS生成器（初探）

简述

QSS是Qt的样式表，类似于CSS，目前主要支持CSS2。

写代码调样式非常不直观，因此需要一个所见即所得的可视化样式生成器，网上有很多CSS样式生成器，最适合网页开发人员的10款CSS代码生成器里面介绍了一些常用的CSS样式生成器，但是CSS和QSS毕竟不完全一样，所以生成的代码需要修改，这些修改的工作量也是不小的。Qt大神刘典武先生写了一个皮肤生成器，该生成器可以快速地生成整套皮肤，着实方便，但只有那几种皮肤，而且不开源，只能作为外观设计参考。CSDN博主hustlei写的QssStyleSheet在QssEditor的基础上增加了属性提示以及定义变量的功能，而且是开源的，挺好用的，可以了解一下。其它一些广为人知的qss编辑器如QssEditor、Rizek Qss Editor等都有这样或那样的缺点，不太好用。

前面介绍的都是Qss编辑器，也就是需要手写样式表，我打算开发一个可视化QSS生成器，效果如下所示：

上面展示了阴影效果的可视化设计。Qt默认是不支持box-shadow效果的，上面的按钮是自定义的，如何自定义见Qt之QGraphicsDropShadowEffect。

软件框架

顶层

Widget内部放置了两个控件，QListWidget用于展示各个控件种类标签，QStackedWidget用于展示每个标签所对应的页面。

大概效果就像这样：

这是Qt Creator中的options面板。

QStackedWidget层

在该层中，QStackedWidget会包含很多自定义的Tab控件，如ButtonsTab，ContainersTab，InputWidgetsTab，DisplayWidgetsTab等等。每一个Tab都是一个继承自QTabWidget的自定义TabWidget。

ButtonsTabWidget层

以ButtonsTabWidget为例，该TabWidget包含了一系列TabPage，如下所示：

每一个TabPage页用来生成一个具体的控件样式。例如，PushButtonPage用来生成PushButton样式。

PushButtonTabPage层

PushButtonTabPage中包含一个MyPushButton自定义按钮和一个PushBtnStyleTabWidget，后者用来输出按钮样式表字符串。在PushButtonTabPage的构造函数中用connect将PushBtnStyleTabWidget的样式字符串信号连接到MyPushButton的样式表设定函数，如下所示：

connect(styleTab, &PushBtnStyleTabWidget::styleChanged, pushBtn, &MyPushButton::setQSS);

每当用户进行参数调整，都会触发PushBtnStyleTabWidget的styleChanged信号。

PushBtnStyleTabWidget层

控件样式分为不同状态下的样式，以PushButton为例，有正常状态、按下状态、悬浮状态以及选中状态。每种状态的样式都需要分别设计，所以就需要多个页面。

每一个页面都有相应的信号函数用来发送样式字符串，需要在PushBtnStyleTabWidget种将这些信号与相应的槽连接起来以处理并形成总的按钮样式字符串，并触发styleChanged信号来传递样式字符串。

NormalStyleTabPage层

NormalStyleTabPage种包含着各种样式调整控件。在用户进行调整动作时，这些控件会发出相应的样式字符串信号。通过信号槽绑定，NormalStylePage中的槽函数会处理这些信号并合成一个正常状态的样式字符串，同时触发normalStyleChanged信号来传递样式字符串。

把上面的内容连起来如下图：

最终效果图

源码地址

https://github.com/YinShiJiaX/QSSGenerator

总结

上面以PushButton为例介绍了整个软件的基本框架。样式修改的动作流程大概是这样的：样式控件发出最小样式字符串，NormalStylePage将这些最小样式字符串收集起来组成正常状态样式字符串并发给PushBtnStyleTabWidget，PushBtnStyleTabWidget将各种状态样式字符串收集起来并发给按钮用于设置样式。