【Qt QSS样式设置】

flos chen

发布于 2026-01-23 17:29:16

1960

Qt中的QSS样式设置流程

Qt Style Sheets (QSS) 是Qt框架中用于自定义控件外观的样式表语言，其语法类似于CSS。以下是QSS的设置流程和示例。

QSS设置流程

1. 创建QSS样式表文件或字符串

首先，需要创建QSS样式表，可以是一个单独的.qss文件，或者直接在代码中以字符串形式定义。

2. 加载和应用样式表

有几种方式可以加载和应用样式表：

方式A：全局应用（应用到整个应用程序）

#include <QApplication>
#include <QFile>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    
    // 从文件加载样式表
    QFile styleFile(":/styles/style.qss");
    styleFile.open(QFile::ReadOnly);
    QString styleSheet = QLatin1String(styleFile.readAll());
    app.setStyleSheet(styleSheet);
    
    // 或者直接使用字符串
    // app.setStyleSheet("QPushButton { background-color: red; }");
    
    // 创建和显示窗口
    // ...
    
    return app.exec();
}

方式B：应用到特定控件

// 创建控件后应用样式
QPushButton *button = new QPushButton("Click me");
button->setStyleSheet("background-color: blue; color: white;");

方式C：应用到控件类型

// 应用到所有QPushButton
qApp->setStyleSheet("QPushButton { background-color: green; }");

3. 样式表重载和更新

如果需要动态更新样式，可以重新调用setStyleSheet()方法。

QSS语法基础

选择器类型

通用选择器：* - 匹配所有控件
类型选择器：QPushButton - 匹配所有QPushButton实例
类选择器：.QPushButton - 匹配所有QPushButton实例
ID选择器：QPushButton#okButton - 匹配objectName为"okButton"的QPushButton
属性选择器：QPushButton[flat="true"] - 匹配flat属性为true的QPushButton
子控件选择器：QComboBox::drop-down - 匹配QComboBox的下拉箭头
伪状态选择器：QPushButton:hover - 匹配鼠标悬停状态的QPushButton

常用属性

background, background-color
color (文本颜色)
border, border-radius
font, font-family, font-size
padding, margin
min-width, min-height
image, background-image

完整示例

示例1：简单的按钮样式

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

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    
    QWidget window;
    QVBoxLayout *layout = new QVBoxLayout(&window);
    
    QPushButton *button1 = new QPushButton("普通按钮");
    QPushButton *button2 = new QPushButton("主要按钮");
    QPushButton *button3 = new QPushButton("禁用按钮");
    button3->setEnabled(false);
    
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    
    // 设置样式表
    QString styleSheet = R"(
        /* 所有按钮的基础样式 */
        QPushButton {
            padding: 8px 16px;
            border: 2px solid #ccc;
            border-radius: 4px;
            background-color: #f0f0f0;
            color: #333;
            font-family: Arial;
            font-size: 14px;
        }
        
        /* 悬停状态 */
        QPushButton:hover {
            background-color: #e0e0e0;
            border-color: #999;
        }
        
        /* 按下状态 */
        QPushButton:pressed {
            background-color: #d0d0d0;
        }
        
        /* 特定按钮样式 */
        QPushButton#mainButton {
            background-color: #007acc;
            color: white;
            border-color: #005a9e;
        }
        
        QPushButton#mainButton:hover {
            background-color: #0062ab;
        }
        
        /* 禁用状态 */
        QPushButton:disabled {
            background-color: #f8f8f8;
            color: #aaa;
            border-color: #ddd;
        }
    )";
    
    // 设置对象名以便使用ID选择器
    button2->setObjectName("mainButton");
    
    // 应用样式表
    window.setStyleSheet(styleSheet);
    
    window.resize(300, 200);
    window.show();
    
    return app.exec();
}

示例2：使用外部QSS文件

创建样式表文件 style.qss:

/* style.qss */
QMainWindow {
    background-color: #f5f5f5;
}

QPushButton {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
}

QPushButton:hover {
    background-color: #45a049;
}

QPushButton:pressed {
    background-color: #3d8b40;
}

QLineEdit {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
}

QLineEdit:focus {
    border-color: #4CAF50;
}

QLabel {
    color: #333;
    font-size: 14px;
}

在代码中加载外部QSS文件:

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

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    
    QMainWindow window;
    QWidget *centralWidget = new QWidget(&window);
    QVBoxLayout *layout = new QVBoxLayout(centralWidget);
    
    QLabel *label = new QLabel("用户名:");
    QLineEdit *lineEdit = new QLineEdit();
    QPushButton *button = new QPushButton("登录");
    
    layout->addWidget(label);
    layout->addWidget(lineEdit);
    layout->addWidget(button);
    
    window.setCentralWidget(centralWidget);
    
    // 加载外部样式表文件
    QFile styleFile(":/style.qss");
    if (styleFile.open(QFile::ReadOnly)) {
        QString styleSheet = QLatin1String(styleFile.readAll());
        app.setStyleSheet(styleSheet);
    }
    
    window.resize(300, 200);
    window.show();
    
    return app.exec();
}

示例3：动态切换样式

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

class StyleSwitcher : public QWidget
{
    Q_OBJECT
public:
    StyleSwitcher(QWidget *parent = nullptr) : QWidget(parent)
    {
        QVBoxLayout *layout = new QVBoxLayout(this);
        
        QComboBox *styleCombo = new QComboBox();
        styleCombo->addItem("默认样式");
        styleCombo->addItem("暗色样式");
        
        QPushButton *testButton = new QPushButton("测试按钮");
        
        layout->addWidget(styleCombo);
        layout->addWidget(testButton);
        
        connect(styleCombo, QOverload<int>::of(&QComboBox::currentIndexChanged),
                this, &StyleSwitcher::changeStyle);
    }
    
private slots:
    void changeStyle(int index)
    {
        QString styleSheet;
        
        if (index == 0) {
            // 默认样式
            styleSheet = R"(
                QPushButton {
                    background-color: #f0f0f0;
                    color: #333;
                    border: 1px solid #ccc;
                    padding: 8px 16px;
                    border-radius: 4px;
                }
                QPushButton:hover {
                    background-color: #e0e0e0;
                }
            )";
        } else {
            // 暗色样式
            styleSheet = R"(
                QWidget {
                    background-color: #333;
                }
                QPushButton {
                    background-color: #555;
                    color: white;
                    border: 1px solid #666;
                    padding: 8px 16px;
                    border-radius: 4px;
                }
                QPushButton:hover {
                    background-color: #666;
                }
            )";
        }
        
        qApp->setStyleSheet(styleSheet);
    }
};

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    
    StyleSwitcher window;
    window.resize(300, 200);
    window.show();
    
    return app.exec();
}

#include "main.moc"