QSS 使用方式介绍
1. 概述
QSS 全称为 Qt Style Sheets 也就是 Qt 样式表,是 Qt 框架中用于定制界面样式的工具,语法格式类似 CSS。
官网说明参考: Qt Style Sheets Reference
帮助关键字: The Style Sheet Syntax。
2. 语法格式
选择器{属性名:属性值;属性名:属性值
}
说明:
&emsp1)如果有多个属性,则每行属性设置的后面的分号不能去掉。
&emsp2)最后一行的分号可以去掉。
&emsp3)可以使用 /**/添加注释。
3. 设置方式
3.1 通过界面【编辑样式表】对话框进行
- 打开【编辑样式表】对话框
方式一:在 ui 设置界面,选择部件,点击鼠标右键,选择【改变样式表】,会弹出【编辑样式表】的对话框。
方式二:选中部件,在右侧【属性编辑器】中找到 styleSheet,点击后面的按钮【…】
- 在弹出的【编辑样式表】对话中进行样式设置,设置完成后,点击【应用】,可在 ui 界面中直接看到设置效果。
3.2 在代码中调用 setStyleSheet() 函数进行设置
QPushButton *btn = new QPushButton("btn", this);QString style = QString("QPushButton:hover{border: 1px solid blue;}");btn->setStyleSheet(style);
3.3 通过 qss 文件进行设置
添加步骤如下:
-
在项目路径下新建 qss 文件,例如:style.qss
-
通过界面添加该资源文件,步骤如下:
1)添加资源文件,在项目名称上鼠标右键,选择【添加新文件】。
2)在弹框中选择Qt-》Qt Resource File,点击【选择】。3)在弹框中输入文件名,选择保存位置,然后点击【下一步】。
4)接着点击【完成】。此时,在项目的目录结构下会生成资源文件 res.qrc。pro 文件中自动添加了:
RESOURCES +=
res.qrc5)点击【添加前缀】,在 Prefix 中输入 /
6)点击【添加文件】,在弹框中选择刚才新建的 style.qss,并保存。此时在资源文件下会看到添加的样式文件。
7) 双击 style.qss 可打开编辑。 -
在 main.cpp 文件中读取样式文件,进行设置即可。
#include "Widget.h"#include <QApplication>#include <QFile>int main(int argc, char *argv[]){QApplication a(argc, argv);QFile file(":/style.qss");QString style = a.styleSheet();if(file.open(QIODevice::ReadOnly)){style += file.readAll();}a.setStyleSheet(style);Widget w;w.show();return a.exec();}