01_1_Qt工程实践_Qt样式表Qss（什么是QSS；基本语法；setStyleSheet函数；样式表的属性值；利用QtCreate实现样式切换；样式表实现皮肤改变实例）

article/2025/9/28 23:39:31

本篇介绍什么是样式表，讨论如何使用Qt样式表Qss修改应用程序外观，并通过实例进行讲解。

了解HTML的同学都知道，一般在HTML中我们把样式表叫做CSS，在Qt中我们称之为QSS。QSS和CSS并不完全等同，语法完全类似，定义上存在一些差别。

1. 什么是QSS

QSS是Qt程序界面中用来设置控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性，用于美化UI界面。实现界面和程序的分离，快速切换皮肤。
QSS最大的优点就是简单便捷，我们可以通过它快速实现应用程序的外观界面。

2. QSS的基本语法

1）选择器 {property:value}
Qt中有很多控件，例如 QPushButton、 QWidget等被称为选择器， {property:value}代表属性和值。

QPushButton {color: red} //代表QPushButton 颜色为红色

2）几个选择器可以指定相同的声明，使用逗号“，”来分隔选择器

 //代表QPushButton ，QLineEdit，QComboBox 颜色为红色
QPushButton，QLineEdit，QComboBox  {color: red}

3）声明部分的规则有多个属性值时包含在花括号{}中，以分号;分隔，属性之间在QSS之间是不区分大小写的

QPushButton {color: red;background-color:white;}

3. Qt样式表设置函数：setStyleSheet

Qt中设置样式表最主要的函数为setStyleSheet

4. 利用setStyleSheet实现样式表实例

通过实例来介绍如何去设置Qt的样式表，
1）新建工程
在这里插入图片描述
2）拉入一个按钮，此时编译运行之后，按下按钮其字体和颜色都是没有发生变化的。

3）通过样式表使得按下按钮后其字体和颜色发生变化。

（1）修改按钮中字体颜色
ui->pushButton->setStyleSheet(QString("QPushButton{color:rgb(255,0,0)}"));实现按钮中的字体显示为红色

Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton->setStyleSheet(QString("QPushButton{color:rgb(255,0,0)}"));
}

运行结果：
在这里插入图片描述
（2）设置按钮按下后的颜色变化
以下代码中：QPushButton:pressed表示按钮按下后，颜色为background-color:rgb(200,200,200);，border-style:inset;表示内边框；color:rgb(0,255,0);字体颜色为color:rgb(0,255,0);，其中“\”代表本行写不下，下行仍为同一行。

Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton->setStyleSheet(QString("QPushButton:pressed{ \background-color:rgb(200,200,200);\border-style:inset;\color:rgb(0,255,0);\}\QPushButton{color:rgb(255,0,0)}"));
}

运行结果：未按下按钮结果与上步一致，按下后字体颜色为绿色
在这里插入图片描述

上述的方法是使用setStyleSheet 函数实现QSS的方法，下来将会先介绍样式表的属性指向，然后利用QtCreate实现上述内容，最终探讨两种实现方法的区别。

5. Qt中样式表的属性值

以下属性值熟悉有什么内容即可，在使用时再去具体查询使用
1）QSS文本属性
在这里插入图片描述
2）QSS背景属性

3）QSS边框属性

4）QSS Box属性
我们将控件的一个区域称为Box，这个Box的内容如果溢出了如何处理，均使用Box属性进行设置

5）QSS 字体属性

6）QSS 外边框属性
控件之间的间距可以使用外边框属性设置
在这里插入图片描述
7）QSS 内边框属性

8）QSS 位置属性

6. 利用QtCreate实现上面按钮按下后颜色改变的功能

1）将原代码中使用setStyleSheet设置样式表的内容注释掉

#if 0ui->pushButton->setStyleSheet(QString("QPushButton:pressed{ \background-color:rgb(200,200,200);\border-style:inset;\color:rgb(0,255,0);\}\QPushButton{color:rgb(255,0,0)}"));#endif

2）在UI中选择按钮，右键选择“改变样式表”，将样式表中设置的内容粘贴至“编辑样式表”中
在这里插入图片描述

运行之后得到的效果与使用setStyleSheet函数设置样式表一样

7. 使用函数和QtCreate实现的区别

在“编译输出”位置查看
在这里插入图片描述
UI文件可以通过uic.exe来生成ui_widget.h，通过以下的构造函数中的ui->setupUi(this);加载界面

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

ui->setupUi(this);其实就是在ui_widget.h中，代开ui_widget.h进行查看
在这里插入图片描述
对应内容如下：

#include <QtWidgets/QWidget>QT_BEGIN_NAMESPACEclass Ui_Widget
{
public:QPushButton *pushButton;void setupUi(QWidget *Widget){if (Widget->objectName().isEmpty())Widget->setObjectName(QStringLiteral("Widget"));Widget->resize(475, 384);pushButton = new QPushButton(Widget);pushButton->setObjectName(QStringLiteral("pushButton"));pushButton->setGeometry(QRect(150, 160, 112, 34));pushButton->setStyleSheet(QLatin1String("QPushButton:pressed{ background-color:rgb(200,200,200);\n"
"                     border-style:inset;\n"
"                     color:rgb(0,255,0);\n"
"}\n"
"QPushButton{color:rgb(255,0,0)}"));retranslateUi(Widget);QMetaObject::connectSlotsByName(Widget);} // setupUivoid retranslateUi(QWidget *Widget){Widget->setWindowTitle(QApplication::translate("Widget", "Widget", Q_NULLPTR));pushButton->setText(QApplication::translate("Widget", "PushButton", Q_NULLPTR));} // retranslateUi};namespace Ui {class Widget: public Ui_Widget {};
} // namespace UiQT_END_NAMESPACE#endif // UI_WIDGET_H

可以看到工具自动生成代码如下，是与我们自己写的代码实际上是一样的。

        pushButton->setStyleSheet(QLatin1String("QPushButton:pressed{ background-color:rgb(200,200,200);\n"
"                     border-style:inset;\n"
"                     color:rgb(0,255,0);\n"
"}\n"
"QPushButton{color:rgb(255,0,0)}"));

可以看出两种方法都是使用setStyleSheet实现的，原理上是一样的。