介绍

原生的qss不支持变量，所以，为了方便，本人实现了这个支持变量的qss模块。

使用

▼ 引入头文件

  1. #include <VStyleSheets>

▼ 函数

  1. //函数
  2. static QString toQss(const QString &style, bool simplified = false);
  3. /*
  4. *style: 你的qss
  5. *simplified：返回的qss是精简过的 （去多余的空格，换行）
  6. */
  8. // 判断 QSS是否有效
  9. static bool isStyleSheetValid(const QString &styleSheet);
  11. //调用
  12. toQss(qss, true);// 解析变量
  13. qDebug() << isStyleSheetValid(qss);// QSS是否有效

变量规则

支持所有的变量类型，如括号表达式，渐变色，十六进制等，支持任意位置声明变量，支持多行，单行等。

  1. // 声明变量
  2. $keyName = values;
  4. //使用变量
  5. QWidget{ color : $yourVar;}

▼ 以下是测试的变量类型匹配。
绿色是合格的变量命名，红色是合格的变量值, 蓝色是必须有的符号，变量以$开头 等号=赋值，分号;结束
image.png

举例

原生的QSS：

  1. QPushButton{
  2.     color:red;
  3. }
  5. QWidget{
  6.     color:red;
  7. }
  9. QLineEdit{
  10.     border-color:red;
  11. }

当我们的需求从 red变成green, 我们就要一个个修改，批量修改也容易出现替换失败，用代码实现，replace的匹配操作也是一个麻烦事，（以上描述是我本人为了夸赞 VStyleSheets 的恶意贬低，可忽略）

▼使用VStyleSheets 

  1. /*定义变量， 支持注释*/
  2. $color = red;
  4. QPushButton{
  5.     color:$color;
  6. }
  8. QWidget{
  9.     color:$color;
  10. }
  12. QLineEdit{
  13.     border-color:$color;
  14. }

以上，修改只需要改一下$color的值就好了，很方便。

实例

我们有一个需求，一键换色，已经内置好了主色调，氛围色等，我们只需要几个颜色就可以完成整体换色。

  1. QString qss("QWidget{color:$MainColor;}");//...等等 这里是你的QSS模板
  3. //这些颜色可以放在配置文件中
  4. QString test("$MainColor = %1;");
  5. test = test.arg("#f7f0de");// 举例，你还可以加入其他颜色
  7. // 因为支持任意位置声明变量，所以append, insert都可以
  8. QString result = VStyleSheets::toQss(qss.append(test), true);// 最后结果 演示用
  9. setStyleSheet(result);// 应用qss

实际应用效果

演示.gif