qt 使用qss控制界面外观

在 Qt 中，QSS（Qt Style Sheets） 是一种基于 CSS（Cascading Style Sheets）的样式表语言，用于自定义 Qt 应用程序的外观。通过 QSS，你可以轻松地修改控件的颜色、字体、边框、背景等属性，而无需修改代码。

以下是使用 QSS 的详细指南：

---

1. 基本语法

QSS 的语法与 CSS 类似，由 选择器 和 声明块 组成：

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

示例

QPushButton {
    background-color: red;
    color: white;
    font-size: 16px;
}

2. 应用 QSS

2.1 在代码中设置 QSS

使用 QWidget::setStyleSheet() 方法为控件或窗口设置样式表。

#include 
#include 

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

    QPushButton button("Click Me");
    button.setStyleSheet("QPushButton { background-color: red; color: white; }");
    button.show();

    return app.exec();
}

2.2 全局应用 QSS

通过 QApplication::setStyleSheet() 方法为整个应用程序设置样式表。

#include 
#include 

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

    app.setStyleSheet("QPushButton { background-color: red; color: white; }");

    QPushButton button("Click Me");
    button.show();

    return app.exec();
}

2.3 从文件加载 QSS

将 QSS 样式表保存到文件中（如 style.qss），然后在代码中加载。

#include 
#include 
#include 

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

    // 加载 QSS 文件
    QFile file(":/style.qss");
    file.open(QFile::ReadOnly);
    QString styleSheet = QLatin1String(file.readAll());
    app.setStyleSheet(styleSheet);

    QPushButton button("Click Me");
    button.show();

    return app.exec();
}

3. 注意事项

• 优先级：ID 选择器 > 类选择器 > 控件类型选择器。

• 性能：过多的 QSS 可能会影响性能，尤其是在复杂界面中。

• 兼容性：某些样式可能在不同平台上表现不一致。

4. 完整示例

以下是一个完整的示例，展示如何使用 QSS 自定义界面：

 

#include 
#include 
#include 
#include 
#include 
#include 

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

    QWidget window;
    window.setWindowTitle("QSS Example");

    QVBoxLayout *layout = new QVBoxLayout(&window);

    QPushButton *button = new QPushButton("Click Me");
    QLineEdit *lineEdit = new QLineEdit();
    QCheckBox *checkBox = new QCheckBox("Check Me");

    layout->addWidget(button);
    layout->addWidget(lineEdit);
    layout->addWidget(checkBox);

    // 设置 QSS
    QString styleSheet = R"(
        QPushButton {
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
            padding: 10px;
        }
        QPushButton:hover {
            background-color: #45a049;
        }
        QPushButton:pressed {
            background-color: #367c39;
        }
        QLineEdit {
            border: 2px solid #4CAF50;
            border-radius: 5px;
            padding: 5px;
        }
        QCheckBox {
            color: #4CAF50;
            font-size: 14px;
        }
        QCheckBox:checked {
            color: green;
        }
    )";

    window.setStyleSheet(styleSheet);
    window.show();

    return app.exec();
}

通过 QSS，你可以轻松实现 Qt 应用程序的美化，提升用户体验。