Qt——界面美化 QSS

界面美化 QSS

类似于网页前端的CSS，可以对界面的各种样式进行设置

需要注意，如果QSS和C++代码同时对同一个控件的同一个属性进行了设置，那么QSS的优先级更高

QSS 基本格式：

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

例如，将窗口内所有的QPushBUtton的文本设置成红色：

#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 : rgb(200, 0, 100);}");
}

Widget::~Widget() {
   
    delete ui; }

设置样式的时候，是可以指定某个控件来设置的。指定控件之后，此时的样式就会针对这个指定的控件和这个控件的子控件同时生效

例如：

#include "widget.h"

#include "./ui_widget.h"

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {
   
   
    ui->setupUi(this);

    this->setStyleSheet("QPushButton {color : rgb(200, 0, 100);}");
}

Widget::~Widget() {
   
    delete ui; }

全局样式

通过main函数内部构造的QApplication类，进行全局样式设置

• 如果设置了全局样式，然后在某个控件里面又设置了新的样式（不冲突），那么这个控件的样式就会叠加。即层叠性
• 如果设置了全局样式，然后在某个控件里面又设置了同样的的样式，那么局部样式就会覆盖全局样式。即局部样式优先级高于全局样式
• 所以，实际开发中，就可以设置通用的全局样式，来统一风格。如果需要对界面的某个控件进行微调，就可以使用局部样式

例如：

#include <QApplication>

#include "widget.h"

int main(int argc, char *argv[]) {
   
   
    QApplication a(argc, argv);
    Widget w;

    a.setStyleSheet("QPushButton {color : green;}");

    w.show();
    return a.exec();
}

// widget.cpp
#include "widget.h"

#include "./ui_widget.h"

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {
   
   
    ui->setupUi(this);

    ui->pushButton_1->setStyleSheet("background-color : white;");		// 叠加性
    ui->pushButton_2->setStyleSheet("color : rgb(200, 0, 100);}");		// 局部样式优先级高于全局样式
}

Widget::~Widget() {
   
    delete ui; }

样式和代码分离

如果涉及到的样式比较多，那么将其和C++代码混合明显是不合适的。

我们可以把样式代码拎出来，放到单独的文件中，后续可以直接让C++代码来读取并加载文件内容

Qt Designer中直接集成了上述功能，允许我们把样式直接写到 **.ui**文件里，并支持实时预览

选择器

类型选择器

例如：

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {
   
   
    ui->setupUi(this);

    QString style = "QWidget {color : rgb(200, 50, 100);}";
    ui->layoutWidget->setStyleSheet(style);
}

通过类型选择器，将layoutWidget下的，所有QWidget及其子类的控件的文本设置颜色

效果：

类选择器

类选择器和类型选择器的区别是，类选择器不会选择指定控件类型的子类

例如：

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {
   
   
    ui->setupUi(this);

    QString style = ".QWidget {color : rgb(200, 50, 100);}";
    ui->layoutWidget->setStyleSheet(style);
}

通过类选择器，将layoutWidget下的QWidget类型的控件的文本设置颜色

效果：

ID选择器

ID选择器只针**对传入的****objectName**的空间生效

例如：

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {
   
   
    ui->setupUi(this);

    QString style = "#pushButton_1 {color : rgb(200, 50, 100);}";
    ui->layoutWidget->setStyleSheet(style);
}

使用ID选择器，对objectName为pushButton_1的控件，设置字体颜色

效果：

并集选择器

通过传入多个类型，样式会对传入的所有类型生效

例如：