QSS 樣式表 （一），qss樣式表

QSS 樣式表 （一），qss樣式表

在開發應用程序時，往往對界面的美觀有一定的要求。Qt 引入了 QSS 機制，使得界面的美化工作變的輕輕松松。嗯，QSS聽著有點耳熟。是的，QSS的語法和CSS類似。在此做些總結。

先來看一個簡單的例子。

 1 #include <QtGui/QPushButton>
 2 #include <QtGui/QWidget>
 3 #include <QTextCodec>
 4 #include <QtGui/QHBoxLayout>
 5 #include <QtGui/QApplication>
 6 
 7 int main(int argc, char *argv[])
 8 {
 9     QTextCodec::setCodecForTr(QTextCodec::codecForName(QTextCodec::codecForLocale()->name()));
10     QTextCodec::setCodecForLocale(QTextCodec::codecForName(QTextCodec::codecForLocale()->name()));
11     QTextCodec::setCodecForCStrings(QTextCodec::codecForName(QTextCodec::codecForLocale()->name()));
12 
13     QApplication app(argc, argv);
14 
15     QWidget *pWidget = new QWidget;
16     QPushButton *pBtn = new QPushButton;
17     pBtn->setText(QObject::tr("我是一個按鈕"));
18     QHBoxLayout *pLayout = new QHBoxLayout;
19 
20     pLayout->addWidget(pBtn);
21     pWidget->setLayout(pLayout);
22     
23     pWidget->show();
24 
25     return app.exec();
26 }

運行結果：

不是很好看吧！讓我們對以上代碼稍做修改：

 1 #include <QtGui/QPushButton>
 2 #include <QtGui/QWidget>
 3 #include <QTextCodec>
 4 #include <QtGui/QHBoxLayout>
 5 #include <QtGui/QApplication>
 6 
 7 int main(int argc, char *argv[])
 8 {
 9     QTextCodec::setCodecForTr(QTextCodec::codecForName(QTextCodec::codecForLocale()->name()));
10     QTextCodec::setCodecForLocale(QTextCodec::codecForName(QTextCodec::codecForLocale()->name()));
11     QTextCodec::setCodecForCStrings(QTextCodec::codecForName(QTextCodec::codecForLocale()->name()));
12 
13     QApplication app(argc, argv);
14 
15     QWidget *pWidget = new QWidget;
16     QPushButton *pBtn = new QPushButton;
17     pBtn->setText(QObject::tr("我是一個按鈕"));
18 
19     // 新添加的代碼
20     // 用於 QPushButton 的外觀美化
21     // 這句話就是QSS樣式
22     // QPushButton{ background-color: rgb(120,120, 120); color: rgb(0, 230, 230); }
23     // 這個函數就是應用樣式
24     // setStyleSheet
25     pBtn->setStyleSheet(QObject::tr("QPushButton{ background-color: rgb(120,120, 120); color: rgb(0, 230, 230); }"));
26 
27     QHBoxLayout *pLayout = new QHBoxLayout;
28 
29     pLayout->addWidget(pBtn);
30     pWidget->setLayout(pLayout);
31     
32     pWidget->show();
33 
34     return app.exec();
35 }

以上兩段代碼比較，第二段代碼增加了25行這一行代碼，運行效果：

可以看到按鈕的外觀發生了底色，按鈕的文本顏色改變。這就是QSS的神奇之處。

總結：QSS其實就是一段文本，這段文本裡指定了控件的外觀屬性（如背景色、邊框、文本）應該使用哪些屬性值做改變。QSS 樣式文本要想應用在 Qt 程序裡，可以使用 setStyleSheet 函數。象本文對QPushButton應用樣式，可以調用QPushButton的成員函數setStyleSheet。