how to use style sheets in Qt-----Style Sheet Example instruction

           《Qt Examples and demos 》中有一個關於Qt界面美化和樣式風格使用的例子《Style Sheet Example》，該例子很好的展現了Qt進行界面美化的功能和特點（版本：Qt4.7）(圖1)。

          

                                                              圖1 Style Sheet Example

          運行該示例（圖2）,點擊菜單“File”-“Edit Style...”,

          

                                                               圖2 Style Sheet Example 運行

         進入“Style Editor” 對話框（圖3），在該對話框中，可以通過改變“Style”和“Style Sheet”來調整圖1和圖2對話框的界面風格。當調整“Style Sheet”中的選項時，可以看到下面QTextEdit中的內容不同，QTextEdit中的內容是從該例子qss目錄下面加載的qss文件內容，我們也可以通過調整QTextEdit中qss的內容後，點擊“Apply”查看圖1和圖2對話框的界面風格的變化。

         

                                                               圖3 Style Editor

        下面分別介紹“Style”和“Style Sheet”：

         1，“Style”中枚舉了Qt封裝的GUI外觀樣式，這些外觀樣式通過調用QStyleFactory類keys()函數獲得，型的情況下它包含"windows"、"motif"、"cde"、"plastique"和"cleanlooks"，依賴於平臺。

      

                                                              圖4 GUI外觀樣式

在該示例的StyleSheetEditor類的構造函數中加載這些外觀樣式到“Style”的QComboBox中。

StyleSheetEditor::StyleSheetEditor(QWidget *parent)
     : QDialog(parent)
 {
     ui.setupUi(this);

     QRegExp regExp(".(.*)\\+?Style");
     QString defaultStyle = QApplication::style()->metaObject()->className();

     if (regExp.exactMatch(defaultStyle))
         defaultStyle = regExp.cap(1);

     ui.styleCombo->addItems(QStyleFactory::keys);
     ui.styleCombo->setCurrentIndex(ui.styleCombo->findText(defaultStyle, Qt::MatchContains));
     ui.styleSheetCombo->setCurrentIndex(ui.styleSheetCombo->findText("Coffee"));
     loadStyleSheet("Coffee");
 }

當我們需要改變“Style”，選擇不同的GUI外觀樣式時，我是怎麼響應的呢？我們看QComboBox選擇響應代碼中的的qApp->setStyle(styleName)，就是用該函數來改變GUI的外觀的。

void StyleSheetEditor::on_styleCombo_activated(const QString &styleName)
 {
     qApp->setStyle(styleName);
     ui.applyButton->setEnabled(false);
 }

整個應用的樣式可以通過QApplication::setStyle()函數設置。
        2，“Style Sheet”使用加載qss文件中的樣式的方式來設置界面樣式。

        qss是Qt皮膚，借用css 的靈感， Qt也支持Qt自己的css, 簡稱qss。同css 相似，qss的主要功能與最目的都是能使界面的表現與界面的元素分離，即質與形的分離，就如同一個人可以在不同的時候穿上不同的衣服一樣，css機制的引入，使得設計一種皮膚與界面控件分離的軟件成爲可能，應用程序也能像web界面那樣隨意地改變外觀。關於qss的具體語法我不知本文中進行詳細介紹了。大家可以在網上找找。

        本示例程序中是如何加載使用qss的，看代碼，

        “Style Sheet”QComboBox的響應：

void StyleSheetEditor::on_styleSheetCombo_activated(const QString &sheetName)
 {
  loadStyleSheet(sheetName);}

        loadStyleSheet函數如下：

void StyleSheetEditor::loadStyleSheet(const QString &sheetName)
 {
     QFile file(":/qss/" + sheetName.toLower() + ".qss");
     file.open(QFile::ReadOnly);
     QString styleSheet = QLatin1String(file.readAll());

     ui.styleTextEdit->setPlainText(styleSheet);
     qApp->setStyleSheet(styleSheet);
     ui.applyButton->setEnabled(false);
 }

將qss樣式文件加載，然後使用QApplication::setStyleSheet()函數將該樣式皮膚在界面上應用。