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語法基礎

選擇器類型

1. 通用選擇器：* - 匹配所有控件
2. 類型選擇器：QPushButton - 匹配所有QPushButton實例
3. 類選擇器：.QPushButton - 匹配所有QPushButton實例
4. ID選擇器：QPushButton#okButton - 匹配objectName為"okButton"的QPushButton
5. 屬性選擇器：QPushButton[flat="true"] - 匹配flat屬性為true的QPushButton
6. 子控件選擇器：QComboBox::drop-down - 匹配QComboBox的下拉箭頭
7. 偽狀態選擇器：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文件

1. 創建樣式表文件 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;
}

2. 在代碼中加載外部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"

注意事項

1. 樣式表優先級：后應用的樣式會覆蓋先應用的樣式，特定選擇器的樣式會覆蓋通用選擇器的樣式。

2. 性能考慮：大量使用樣式表可能會影響性能，特別是在嵌入式設備上。

3. 平臺差異：某些樣式在不同平臺上可能有不同的表現。

4. 繼承：子控件不會自動繼承父控件的所有樣式屬性。

5. 調試：如果樣式不生效，可以使用Qt Designer或Qt Creator的樣式表編輯器進行調試。

通過QSS，可以輕松地為Qt應用程序創建美觀且一致的用戶界面。