Qt样式表（SS）：美化你的应用程序

Qt样式表（Qt Style Sheets，简称QSS）是Qt框架中用于定制和美化应用程序界面的一种强大工具。它借鉴了Web开发中的CSS（层叠样式表），允许开发者通过简单的声明式语法来定义控件的外观和风格。本文将深入探讨如何使用Qt样式表来美化你的应用程序，并提供一些实际案例和代码示例。

1. Qt样式表的基本概念

Qt样式表是一种类似于CSS的语言，用于定义Qt控件的外观属性。通过样式表，你可以改变控件的颜色、字体、边框、背景等视觉效果，而无需修改控件的源代码。这种方式不仅提高了代码的可维护性，还使得界面设计更加灵活。

样式表的语法

Qt样式表的语法与CSS非常相似，例如：

QWidget {
    background-color: white;
    color: black;
}

上述代码表示所有QWidget及其子类的控件都会应用白色背景和黑色文字。

2. 使用Qt样式表的步骤

以下是使用Qt样式表的基本步骤：

步骤1：设置全局样式表

可以通过qApp->setStyleSheet()为整个应用程序设置一个全局样式表。例如：

#include <QApplication>
#include <QPushButton>
#include <QVBoxLayout>
#include <QWidget>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // 设置全局样式表
    qApp->setStyleSheet("QPushButton { background-color: #4CAF50; color: white; }");

    QWidget window;
    QVBoxLayout layout(&window);
    QPushButton *button1 = new QPushButton("按钮1");
    QPushButton *button2 = new QPushButton("按钮2");
    layout.addWidget(button1);
    layout.addWidget(button2);

    window.show();
    return app.exec();
}

步骤2：为单个控件设置样式表

如果只想为某个特定控件应用样式表，可以使用setStyleSheet()方法。例如：

button1->setStyleSheet("background-color: red; color: yellow;");

3. 常见的样式属性

以下是一些常用的样式属性及其用法：

3.1 背景颜色

QPushButton {
    background-color: blue;
}

3.2 字体样式

QLabel {
    font-size: 16px;
    font-family: Arial;
    font-weight: bold;
}

3.3 边框样式

QLineEdit {
    border: 2px solid gray;
    border-radius: 10px;
    padding: 5px;
}

3.4 悬停效果

通过伪状态hover，可以为控件添加悬停效果：

QPushButton:hover {
    background-color: green;
}

4. 高级用法：对象名选择器

在复杂的界面中，可能需要针对特定控件应用样式表。这时可以使用对象名选择器。例如：

button1->setObjectName("myButton");
button1->setStyleSheet("#myButton { background-color: orange; }");

5. 样式表的优先级规则

当多个样式表同时作用于同一个控件时，Qt会根据以下优先级规则进行处理：

1. 内联样式表（通过setStyleSheet()直接设置）优先级最高。
2. 对象名选择器次之。
3. 类型选择器再次之。
4. 全局样式表优先级最低。

6. 实际案例：自定义主题

假设我们需要为一个简单的登录窗口设计一个深色主题。以下是实现代码：

#include <QApplication>
#include <QVBoxLayout>
#include <QLineEdit>
#include <QPushButton>
#include <QWidget>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // 设置全局深色主题
    qApp->setStyleSheet(
        "QWidget { background-color: #333; color: white; }"
        "QLineEdit { background-color: #444; border: 1px solid #555; }"
        "QPushButton { background-color: #57A8FF; color: white; border: none; }"
        "QPushButton:hover { background-color: #4794E6; }"
    );

    QWidget window;
    QVBoxLayout layout(&window);

    QLineEdit *username = new QLineEdit;
    username->setPlaceholderText("用户名");

    QLineEdit *password = new QLineEdit;
    password->setEchoMode(QLineEdit::Password);
    password->setPlaceholderText("密码");

    QPushButton *loginButton = new QPushButton("登录");

    layout.addWidget(username);
    layout.addWidget(password);
    layout.addWidget(loginButton);

    window.show();
    return app.exec();
}

7. 流程图：样式表应用流程

以下是样式表应用的基本流程图：

graph TD;
    A[开始] --> B[创建控件];
    B --> C[设置样式表];
    C --> D{是否全局应用?};
    D --是--> E[调用 qApp->setStyleSheet()];
    D --否--> F[调用 控件->setStyleSheet()];
    F --> G[结束];