QT开发：详解Qt样式表（QSS）：美化界面的应用

在现代应用程序中，美观和用户友好的界面是成功的关键因素之一。Qt 提供了强大的样式表（QSS, Qt Style Sheets）功能，类似于 CSS，可以用来美化和定制应用程序的界面。本篇技术博客将详细讲解 QtGui 和 QtWidgets 模块中的样式表（QSS），帮助你轻松掌握样式表的基本概念和应用技术，创建美观且用户友好的界面。

1. Qt样式表（QSS）的基本概念

什么是 QSS

Qt 样式表（QSS）是一种用于描述 Qt 控件外观的语言，类似于 Web 开发中的 CSS。通过使用 QSS，可以轻松地美化和定制 Qt 应用程序的界面，而无需修改控件的代码。

QSS 的基本语法

QSS 的基本语法与 CSS 类似。以下是一些 QSS 的基本语法规则：

选择器：用于选择要应用样式的控件。选择器可以是控件的类名、对象名或属性。

QPushButton { /* 选择所有 QPushButton 控件 */
    background-color: blue;
    color: white;
    font-size: 14px;
}

属性：用于定义控件的外观属性。属性名称和属性值之间使用冒号分隔，属性对之间使用分号分隔。

QPushButton {
    background-color: blue; /* 背景颜色 */
    color: white; /* 文字颜色 */
    font-size: 14px; /* 字体大小 */
}

2. QSS 的基本应用

应用于单个控件

QSS 可以应用于单个控件，通过 setStyleSheet 方法设置样式表。

QPushButton *button = new QPushButton("Click Me", this);
button->setStyleSheet("QPushButton { background-color: blue; color: white; border-radius: 10px; }");

应用于整个应用程序

QSS 也可以应用于整个应用程序，通过 qApp->setStyleSheet 方法设置全局样式表。

qApp->setStyleSheet("QPushButton { background-color: blue; color: white; border-radius: 10px; }");

示例代码与详解

以下是一个完整的示例，展示了如何使用 QSS 应用于单个控件和整个应用程序：

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

class QSSExample : public QWidget {
public:
    QSSExample(QWidget *parent = nullptr) : QWidget(parent) {
        QVBoxLayout *layout = new QVBoxLayout(this);

        QPushButton *button1 = new QPushButton("Button 1", this);
        button1->setStyleSheet("QPushButton { background-color: blue; color: white; border-radius: 10px; }");
        layout->addWidget(button1);

        QPushButton *button2 = new QPushButton("Button 2", this);
        layout->addWidget(button2);

        QPushButton *button3 = new QPushButton("Button 3", this);
        layout->addWidget(button3);
    }
};

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

    app.setStyleSheet("QPushButton { background-color: green; color: white; border-radius: 10px; }");

    QSSExample window;
    window.show();

    return app.exec();
}

这个示例展示了如何使用 QSS 应用于单个控件和整个应用程序。button1 的样式是通过 setStyleSheet 方法设置的，而 button2 和 button3 继承了应用程序级别的样式表。

3. QSS 高级应用

伪状态（Pseudo-States）

QSS 支持伪状态（pseudo-states），用于定义控件在不同状态下的样式，如悬停、按下、禁用等。

常用伪状态

:hover：控件悬停时的样式
:pressed：控件按下时的样式
:disabled：控件禁用时的样式

示例代码与详解

以下是一个完整的示例，展示了如何使用 QSS 伪状态定义按钮在不同状态下的样式：

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

class PseudoStateExample : public QWidget {
public:
    PseudoStateExample(QWidget *parent = nullptr) : QWidget(parent) {
        QVBoxLayout *layout = new QVBoxLayout(this);

        QPushButton *button = new QPushButton("Hover and Press Me", this);
        button->setStyleSheet(
            "QPushButton { background-color: blue; color: white; border-radius: 10px; }"
            "QPushButton:hover { background-color: lightblue; }"
            "QPushButton:pressed { background-color: darkblue; }"
            "QPushButton:disabled { background-color: gray; }"
        );
        layout->addWidget(button);
    }
};

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

    PseudoStateExample window;
    window.show();

    return app.exec();
}

这个示例展示了如何使用 QSS 伪状态定义按钮在悬停、按下和禁用状态下的不同样式。

定制控件的外观

通过 QSS，可以高度定制控件的外观，包括背景颜色、边框、圆角、字体等。

自定义按钮外观

QPushButton {
    background-color: blue;
    color: white;
    border: 2px solid black;
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 14px;
}

自定义输入框外观

QLineEdit {
    background-color: white;
    border: 2px solid green;
    border-radius: 5px;
    padding: 5px;
    font-size: 14px;
}

示例代码与详解

以下是一个完整的示例，展示了如何使用 QSS 高度定制按钮和输入框的外观：

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

class CustomStyleExample : public QWidget {
public:
    CustomStyleExample(QWidget *parent = nullptr) : QWidget(parent) {
        QVBoxLayout *layout = new QVBoxLayout(this);

        QPushButton *button = new QPushButton("Custom Button", this);
        button->setStyleSheet(
            "QPushButton {"
            "    background-color: blue;"
            "    color: white;"
            "    border: 2px solid black;"
            "    border-radius: 10px;"
            "    padding: 5px 10px;"
            "    font-size: 14px;"
            "}"
        );
        layout->addWidget(button);

        QLineEdit *lineEdit = new QLineEdit(this);
        lineEdit->setStyleSheet(
            "QLineEdit {"
            "    background-color: white;"
            "    border: 2px solid green;"
            "    border-radius: 5px;"
            "    padding: 5px;"
            "    font-size: 14px;"
            "}"
        );
        layout->addWidget(lineEdit);
    }
};

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

    CustomStyleExample window;
    window.show();

    return app.exec();
}

这个示例展示了如何使用 QSS 高度定制按钮和输入框的外观，包括设置背景颜色、边框、圆角、字体等。

4. 综合示例：创建一个美观的登录界面

为了更好地展示 QSS 的综合应用，我们将创建一个美观的登录界面。这个界面包含以下部分：

标题标签（QLabel）
用户名和密码输入框（QLineEdit）
登录按钮（QPushButton）

综合示例代码

以下是完整的应用程序代码，展示了如何使用 QSS 创建一个美观的登录界面：

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

class LoginWindow : public QWidget {
public:
    LoginWindow(QWidget *parent = nullptr) : QWidget(parent) {
        QVBoxLayout *layout = new QVBoxLayout(this);

        QLabel *titleLabel = new QLabel("Login", this);
        titleLabel->setAlignment(Qt::AlignCenter);
        titleLabel->setStyleSheet(
            "QLabel {"
            "    font-size: 24px;"
            "    font-weight: bold;"
            "    color: darkblue;"
            "}"
        );
        layout->addWidget(titleLabel);

        QLineEdit *usernameEdit = new QLineEdit(this);
        usernameEdit->setPlaceholderText("Username");
        usernameEdit->setStyleSheet(
            "QLineEdit {"
            "    background-color: white;"
            "    border: 2px solid gray;"
            "    border-radius: 5px;"
            "    padding: 5px;"
            "    font-size: 14px;"
            "}"
        );
        layout->addWidget(usernameEdit);

        QLineEdit *passwordEdit = new QLineEdit(this);
        passwordEdit->setPlaceholderText("Password");
        passwordEdit->setEchoMode(QLineEdit::Password);
        passwordEdit->setStyleSheet(
            "QLineEdit {"
            "    background-color: white;"
            "    border: 2px solid gray;"
            "    border-radius: 5px;"
            "    padding: 5px;"
            "    font-size: 14px;"
            "}"
        );
        layout->addWidget(passwordEdit);

        QPushButton *loginButton = new QPushButton("Login", this);
        loginButton->setStyleSheet(
            "QPushButton {"
            "    background-color: darkblue;"
            "    color: white;"
            "    border: 2px solid black;"
            "    border-radius: 10px;"
            "    padding: 5px 10px;"
            "    font-size: 14px;"
            "}"
            "QPushButton:hover { background-color: blue; }"
            "QPushButton:pressed { background-color: navy; }"
        );
        layout->addWidget(loginButton);
    }
};

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

    LoginWindow window;
    window.show();

    return app.exec();
}

代码解析

这个综合示例展示了如何使用 QSS 创建一个美观的登录界面。以下是对各个部分的详细解析：

标题标签（QLabel）

QLabel *titleLabel = new QLabel("Login", this);
titleLabel->setAlignment(Qt::AlignCenter);
titleLabel->setStyleSheet(
    "QLabel {"
    "    font-size: 24px;"
    "    font-weight: bold;"
    "    color: darkblue;"
    "}"
);
layout->addWidget(titleLabel);

QLabel：用于显示登录界面的标题。
setAlignment：将文本对齐方式设置为居中。
setStyleSheet：通过 QSS 设置标题的字体大小、字体粗细和颜色。

用户名和密码输入框（QLineEdit）

QLineEdit *usernameEdit = new QLineEdit(this);
usernameEdit->setPlaceholderText("Username");
usernameEdit->setStyleSheet(
    "QLineEdit {"
    "    background-color: white;"
    "    border: 2px solid gray;"
    "    border-radius: 5px;"
    "    padding: 5px;"
    "    font-size: 14px;"
    "}"
);
layout->addWidget(usernameEdit);

QLineEdit *passwordEdit = new QLineEdit(this);
passwordEdit->setPlaceholderText("Password");
passwordEdit->setEchoMode(QLineEdit::Password);
passwordEdit->setStyleSheet(
    "QLineEdit {"
    "    background-color: white;"
    "    border: 2px solid gray;"
    "    border-radius: 5px;"
    "    padding: 5px;"
    "    font-size: 14px;"
    "}"
);
layout->addWidget(passwordEdit);

QLineEdit：用于输入用户名和密码。
setPlaceholderText：设置输入框的占位符文本，提示用户输入内容。
setEchoMode：将密码输入框的回显模式设置为密码模式，隐藏输入的字符。
setStyleSheet：通过 QSS 设置输入框的背景颜色、边框、圆角、内边距和字体大小。

登录按钮（QPushButton）

QPushButton *loginButton = new QPushButton("Login", this);
loginButton->setStyleSheet(
    "QPushButton {"
    "    background-color: darkblue;"
    "    color: white;"
    "    border: 2px solid black;"
    "    border-radius: 10px;"
    "    padding: 5px 10px;"
    "    font-size: 14px;"
    "}"
    "QPushButton:hover { background-color: blue; }"
    "QPushButton:pressed { background-color: navy; }"
);
layout->addWidget(loginButton);

QPushButton：用于提交登录信息的按钮。
setStyleSheet：通过 QSS 设置按钮的背景颜色、文字颜色、边框、圆角、内边距和字体大小。
伪状态：定义按钮在悬停和按下状态下的不同样式。

这个综合示例展示了如何使用 QSS 创建一个美观的登录界面，帮助你了解 QSS 的综合应用。

5. 总结

本篇技术博客详细介绍了 QtGui 和 QtWidgets 模块中样式表（QSS）的基本概念和高级应用技术。通过详细解析和完整的示例代码，我们展示了如何使用 QSS 美化和定制 Qt 应用程序的界面。

关键要点

QSS 基本概念：QSS 是一种用于描述 Qt 控件外观的语言，类似于 CSS。
QSS 基本语法：包括选择器和属性，用于定义控件的外观。
QSS 应用：可以应用于单个控件或整个应用程序，通过 setStyleSheet 方法设置样式表。
QSS 高级应用：包括伪状态、定制控件外观等，用于定义控件在不同状态下的样式。
综合应用：通过结合使用 QSS，可以创建功能丰富且高度美观的用户界面。

通过掌握这些 QSS 的基本概念和应用技术，你可以轻松开发美观的 Qt 应用程序，并自信地定制各种控件的外观。希望这篇文章对你的 Qt 开发之旅有所帮助！