Qt_QSS介绍与使用

1、QSS的语法介绍

2、QSS的基本使用

3、QSS的全局设置

4、样式的叠加特性

5、样式的优先级

6、使用Qt Designer设置样式

7、选择器种类介绍

7.1 类选择器

7.2 ID选择器

7.3 并集选择器

8、子控件选择器

9、伪类选择器

10、盒子模型

10.1 设置边框和内边距

结语

前言：

Qt中的QSS（Qt Style Sheets）作用是美化界面，他可以对控件的样式进行设计，比如控件的颜色、字体、位置、边框等属性。QSS是依照CSS而来的，而CSS是网页前端开发中最重要的一个工具，不过QSS只支持部分CSS属性，因此QSS会比CSS更简单⼀些。值得注意的是：当通过QSS设置样式和通过C++代码设置样式冲突时，QSS的优先级会更高。

1、QSS的语法介绍

QSS的基本语法非常简单，由选择器，属性名，属性值构成，如下：

选择器 {属性名: 属性值; 
}

其中，选择器表示要设置样式的控件，属性名表示具体设计哪些样式，属性值表示设置样式的方式。举个例子，比如：

QPushButton {color: red;
}

上述代码表示，将当前界面下的所有QPushButton（选择器）的文本颜色（属性名）变为红色（属性值）。

2、QSS的基本使用

在ui文件中创建一个QPushButton，让该控件调用setStyleSheet函数，并将QSS作为该函数的参数。设计如下图：

在widget.cpp中进行样式设计，代码如下：

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton1->setStyleSheet("QPushButton{color:red;}");
}Widget::~Widget()
{delete ui;
}

运行结果：

解释：上述代码表示对按钮1这个控件内所有名为QPushButton的控件的文本颜色设为红色，注意这里调用setStyleSheet函数的控件是按钮1而不是widget，因此不会更改按钮2的样式，如果调用者是widget，则会更改按钮1以及按钮2的样式。

3、QSS的全局设置

通过QApplication的对象调用setStyleSheet，从而设置整个程序的全局样式，全局样式优点: 1、使同⼀个样式针对多个控件生效, 代码更简洁，2、所有控件样式内聚在⼀起, 便于维护和问题排查。界面设计如下：

代码如下（注意是在main.cpp文件中）：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet("QPushButton{color:blue;}");//全局设置Widget w;w.show();return a.exec();
}

运行结果：

4、样式的叠加特性

通过QSS设置的样式是可以叠加的，比如在全局设置的样式可以和局部设置的样式叠加，并且调用setStyleSheet时可以叠加设置多个样式，依照上述例子的界面，测试如下。

局部设置样式的代码：

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//设置字体尺寸ui->pushButton1->setStyleSheet("QPushButton{font-size:80px};");
}Widget::~Widget()
{delete ui;
}

全局设置样式的代码：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet("QPushButton{color:blue;background:red}");//设置多项属性Widget w;w.show();return a.exec();
}

运行结果：

从结果可以发现设置的样式可以进行叠加。

5、样式的优先级

对一个控件的同一个属性先进行局部设置样式，再进行全局设置样式，则该控件的属性最终为局部设置的样式，即局部优先于全局，测试代码如下。

widget.cpp代码：

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton->setStyleSheet("QPushButton{color:red;}");
}Widget::~Widget()
{delete ui;
}

main.cpp代码：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);Widget w;w.show();a.setStyleSheet("QPushButton{color:blue;}");return a.exec();
}

运行结果：

可以看到，即使全局设置的代码在局部设置之后，最终的样式依然是局部代码设置的样式。所以通常使用全局设置“奠定基调”，然后使用局部设置进行“微调”。

6、使用Qt Designer设置样式

上述设置样式都是用代码的形式进行设置的，除了代码的形式，还可以在ui文件中（即Qt Designer）设置样式，步骤如下。

1、先进入ui文件，右键点击控件，点击改变样式表：

2、在输入框中直接输入QSS，点击OK即可完成样式的设置，如下图：

7、选择器种类介绍

QSS中的选择器表示要设置的控件，但是他可以有多种种类，常用的种类介绍如下（以QPushButton为例）：

选择器种类	示例	说明
全局选择器	*	选择当前控件下的所有控件
类型选择器	QPushButton	选择当前控件下QPushButton控件，以及其子类
类选择器	.QPushButton	选择当前控件下QPushButton控件，不会选择其子类
ID 选择器	#pushButton_1	指定选择名为 pushButton_2 的控件
并集选择器	xx，yy，zz	选择xx，yy，zz三种控件
属性选择器	QPushButton[flat="false"]	选择所有PushButton中，flat属性为false的控件

上文例子中的选择器都是类型选择器，下面测试一些其他的常用选择器种类。

7.1 类选择器

先自定义一个继承QPushButton的类，然后将该类实例化到界面上，观察在全局中使用类型选择器和类选择器对该控件属性的影响。

自定义类的mypushbutton.h文件代码如下：

#ifndef MYPUSHBUTTON_H
#define MYPUSHBUTTON_H#include <QWidget>
#include <QPushButton>class mypushbutton : public QPushButton
{Q_OBJECT
public:mypushbutton(QWidget *parent = nullptr);
};#endif // MYPUSHBUTTON_H

widget.cpp代码如下：

#include "widget.h"
#include "ui_widget.h"
#include "mypushbutton.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建自定义按钮mypushbutton* myQpush = new mypushbutton(this);myQpush->setText("自定义按钮");myQpush->move(100,200);//创建Qt系统按钮QPushButton* Qpush = new QPushButton("Qt按钮",this);Qpush->move(200,200);
}Widget::~Widget()
{delete ui;
}

先运行上述代码，观看结果：

此时可以看到界面中已有两个按钮，但是一个按钮是用我们自定义的类（mypushbutton）生成的，另一个按钮是用系统提供的QPushButton类生成的。

使用全局设置，选择器的种类选择类选择器，main.cpp代码如下：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet(".QPushButton{color:blue;}");//类选择器Widget w;w.show();return a.exec();
}

运行结果：

发现系统原始按钮的样式发生了改变，但是我们自定义的类样式却没有改变，原因就是类选择器不会选择QPushButton的子类，而我们自定义的类刚好是QPushButton的子类，所以我们自定义的按钮样式不会受到改变。如果采用的是类型选择器，则运行结果如下：

7.2 ID选择器

ID选择器就是指定控件ID对其精准的进行样式修改，界面设计如下：

全局设置的代码如下：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet("#pushButton{color:red;} ""#pushButton_2{color:blue;} #pushButton_3{color:green;}");Widget w;w.show();return a.exec();
}

运行结果：

7.3 并集选择器

创建一个QLabel、QPushButton、QLineEdit。采用并集选择器对这些控件进行样式修改，界面设计如下：

代码如下：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet("QLabel,QPushButton,QLineEdit{color:red;}");Widget w;w.show();return a.exec();
}

运行结果：

从结果可以看到，使用并集选择器可以用简易的代码给多个控件设置样式，是一种很好的代码复用行为。

8、子控件选择器

有些控件本身自带子控件，比如QComboBox的下拉按钮，以及QSpinBox的上下按钮等。即使是子控件，仍然可以使用QSS对其修改样式，使用子控件选择器”::“即可，比如：QComboBox::down-arrow表示选中了QComboBox的下拉按钮。测试步骤如下。

1、先建立一个Qt虚拟目录（qrc），将图片资源放入到该目录下（关于虚拟目录-qrc见：Qt_控件的QWidget属性介绍-第五点），如下图：

2、在main.cpp中使用全局设置更改该子控件的图标，代码如下：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet("QComboBox::down-arrow{image:url(:/down.png);}");Widget w;w.show();return a.exec();
}

运行结果：

9、伪类选择器

伪类选择器表示控件处于某一状态，比如控件被按下，控件获取到焦点，⿏标移动到某个控件上等，可以使用伪类选择器捕获到这一时刻，然后实现各种效果。与子控件选择器的写法有些相似，伪类选择器用“:”表示，常用的伪类选择器介绍如下：

:hover	⿏标放到控件上
:pressed	⿏标左键按下时
:focus	获取输⼊焦点时
:enabled	元素处于可⽤状态时
:checked	被勾选时
:read-only	元素为只读状态时

测试代码如下：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet("QPushButton{color:red;}""QPushButton:hover{color:blue;}""QPushButton:pressed{color:green;}");Widget w;w.show();return a.exec();
}

运行结果：

另外，上述在伪类选择器可以用“!”来表示取反，比如：!hover表示鼠标离开控件时，:!pressed 表示⿏标松开时。

10、盒子模型

盒子模型是一个控件的基础框架，表示一个框架由四个部分构成：

1、内容：指的是控件的文本或者图标。

2、内边距：指的是内容与边框之间的距离。

3、边框：指的是控件周围的边框。

4、外边距：指的是控件与其他控件的距离。

盒子模型示意图如下：

QSS中与边框和边距相关的常用属性名如下：

margin	设置四个方向的外边距
padding	设置四个方向的内边距
border-style	设置边框样式
border-width	边框的粗细
border-color	边框的颜⾊
border	边框属性的复合用法：border-width+border-style+border-color
border-radius	边框四个角的圆滑度，数值设置的越⼤，⻆就 "越圆"

10.1 设置边框和内边距

测试给一个QLabel设置边框和内边距，首先在界面上创建一个QLabel，如下图：

代码如下：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);//设置边框宽5px，边框样式固体，边框颜色蓝色。内左边距50px,边角圆滑50pxa.setStyleSheet("QLabel{border:5px solid blue;padding-left:50px;""border-radius:30px;}");Widget w;w.show();return a.exec();
}

运行结果：