桌面应用Qt widgets是最好选择之一。尤其是不使用C#、vb等语言编写应用程序时。使用qss可以用类似css的方式美化Qt widgets界面,方法简单,效果也很漂亮。
但是目前并没有很好用的Qss编辑器。网上搜了一下 ,知名的qss编辑器QssEditor、Rizek Qss Editor等功能都不是很完善,QssEditor控件很少,不支持语法提示,Rizek Qss Editor不能实时预览。
详细用法可参考大佬博客:QSS 编辑预览工具
并且目前也没有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关键字、属性、伪元素等
- 代码高亮,代码折叠等
- 可以使用自定义变量
- 自动识别文件中自定义的变量,并可以通过颜色拾取框选取变量颜色
- 支持相对路径引用图片,以及引用资源文件中的图片
- 支持切换不同的系统theme(如xp主题,vista主题等),不同theme下美化效果会略有差异
- 自带已编写好的qsst模板样式文件
- 能够在windows,linux,unix上运行
- QssStylesheetEditor自定义qss变量
在QssStylesheetEditor中可以用下面方式为qss样式定义变量:
$background=#fff
$border=#888
变量通过“$变量名”方式引用。参考如下:
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并自动加载。
代码自动补全
开源地址
本软件为本人业余开发,开源放在github上。我会持续更新增强该软件功能,有兴趣的朋友可以一起加入继续编写。
开源地址地址:https://github.com/hustlei/QssStylesheetEditor
尽管现在qt有了qtquick可以用qml写更华丽的GUI,但是写桌面应用,QtWidget还是很好的选择,使用qss美化后QtWidget也一样可以非常漂亮。