QSS编辑器—实时预览 语法提示 颜色拾取

桌面应用Qt widgets是最好选择之一。尤其是不使用C#、vb等语言编写应用程序时。使用qss可以用类似css的方式美化Qt widgets界面，方法简单，效果也很漂亮。

但是目前并没有很好用的Qss编辑器。网上搜了一下 ，知名的qss编辑器QssEditor、Rizek Qss Editor等功能都不是很完善，QssEditor控件很少，不支持语法提示，Rizek Qss Editor不能实时预览。并且目前也没有qss编辑器可以支持变量，很是不方便。所以我就自己动手编写了一个功能更多的Qss编辑器：QssStylesheetEditor，界面如下：

QssStylesheetEditor软件下载地址：

windows 64bit版 下载地址：https://github.com/hustlei/QssStylesheetEditor/releases

32位系统，linux，unix等系统：

32位系统，linux，unix等系统也可以运行，但是需要自行安装配置，详见：[QssStylesheetEditor手动安装说明]

QssStylesheetEditor完全免费。

QssStylesheetEditor主要功能：

• 实时预览编辑的qss样式，可以预览几乎所有的qtwidget控件效果
• qss语法自动提示，自动补全qss关键字、属性、伪元素等
• 代码高亮，代码折叠等
• 可以使用自定义变量
• 自动识别文件中自定义的变量，并可以通过颜色拾取框选取变量颜色
• 支持相对路径引用图片，以及引用资源文件中的图片
• 可以预览自定义的ui代码
• 支持通过颜色对话框改变QPalette，并在Qss中引用
• 支持切换不同的系统theme(如xp主题,vista主题等)，不同theme下美化效果会略有差异
• 自带已编写好的qsst模板样式文件
• 能够在windows，linux，unix上运行

QssStylesheetEditor自定义qss变量

在QssStylesheetEditor中可以用下面方式为qss样式定义变量：

$background = #fff;
$border = red;
$text = rgb(10,10,10);

变量通过“$变量名”方式引用。参考如下：

QWidget
{
    color: $text;
    background-color: $background;
}

qss中颜色等有很多相同的，使用变量后会大大减少工作量，方便修改。

• 定义了变量的qss文件在QssStylesheetEditor中扩展名定义为qsst
• 可以通过软件的导出功能，将qsst导出为qss文件

当然也可以直接在QssStylesheetEditor软件中编辑qss样式

QssStylesheetEditor自动识别添加变量,颜色拾取功能

在QssStylesheetEditor中自定义一个变量后，在软件的颜色栏会自动显示变量名字和颜色，点击颜色可以用通过颜色拾取框选取变量颜色。

在QssStylesheetEditor中引用一个未定义的变量后，软件会自动识别，并在颜色栏显示该变量名字，通过颜色拾取框改变该变量颜色后，qsst文档内会自动添加该变量定义。

图片引用

相对路径引用

background-image: url("img/close.png");
/* background-image: url(img/close.png); */

软件会在打开的xxx.qss文件所在的文件夹下查找img/close.png文件。

资源文件引用

background-image: url(":/img/close.png");
/* background-image: url(:/img/close.png); */

软件会在当前打开的xxx.qss样式文件所在目录中搜索资源文件xxx.py并自动加载。

代码自动补全

QPalette引用

在qss中可以直接引用QPalette，格式如下：

color: palette(Text);
background-color: palette(Window);

通过Palette对话框，可以用颜色对话框拾取颜色的方式改变QPalette中每个ColorRole
的颜色。改变后的QPalette可以通过查看代码按钮显示QPalette代码。

Palette对话框中reset 按钮可以取消本次打开对话框做的修改。

自定义ui代码预览

在preview界面的’自定义’标签内可以编辑自己想要预览的ui代码。点击’预览’按钮预览效果。

自定义代码需要定义一个类名称为’MainWindow’。参考下图：

开源地址
本软件为本人业余开发，开源放在github上。我会持续更新增强该软件功能，有兴趣的朋友可以一起加入继续编写。

开源地址地址：https://github.com/hustlei/QssStylesheetEditor

尽管现在qt有了qtquick可以用qml写更华丽的GUI，但是写桌面应用，QtWidget还是很好的选择，使用qss美化后QtWidget也一样可以非常漂亮。