桌面应用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主要功能:
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并自动加载。
在qss中可以直接引用QPalette,格式如下:
color: palette(Text);
background-color: palette(Window);
通过Palette对话框,可以用颜色对话框拾取颜色的方式改变QPalette中每个ColorRole
的颜色。改变后的QPalette可以通过查看代码按钮显示QPalette代码。
Palette对话框中reset 按钮可以取消本次打开对话框做的修改。
在preview界面的’自定义’标签内可以编辑自己想要预览的ui代码。点击’预览’按钮预览效果。
自定义代码需要定义一个类名称为’MainWindow’。参考下图:
开源地址
本软件为本人业余开发,开源放在github上。我会持续更新增强该软件功能,有兴趣的朋友可以一起加入继续编写。
开源地址地址:https://github.com/hustlei/QssStylesheetEditor
尽管现在qt有了qtquick可以用qml写更华丽的GUI,但是写桌面应用,QtWidget还是很好的选择,使用qss美化后QtWidget也一样可以非常漂亮。
联系客服