## 9.4 使用樣式表 使用樣式表通常有兩種做法，一種是設置全局的樣式表，通過調用 QApplication::setStyleSheet()方法來實現；一種是在指定的窗口部件上使用樣式表 ，這可以通過調用 QWidget::setStyleSheet()方法來實現。如果你為同一個部件或應用程序指定了 多種不同的樣式表（比如有的設置字體顏色，有的設置界面背景），那么 Qt 將會自動將它們 的效果組合起來，這也被稱作是樣式表的層疊（ cascading）。 注意，Qt 樣式表目前尚不支持用戶自定義的 QStyle 樣式，在后續的版本中有望獲得支 持。也就是說，當你的應用程序中含有子類化自 QStyle 類的樣式時，在 Qt 4.5 以前的版本 中就不要再同時設置樣式表了。 ### 9.4.1與 Qt Designer 集成使用 在 Qt Designer 中，可以很方便的設置樣式表并瀏覽其效果。可以在 Qt Designer 設計 的界面之中的任意窗口部件上點擊鼠標右鍵，在彈出的上下文菜單上選擇 “改變樣式表”，如 圖 9-11 所示。  圖 9-11 改變樣式表的上下文菜單 接下來將彈出名為【編輯樣式表】的對話框，如圖 9-12 所示。其中有 4 個下拉按鈕， 分別是添加資源、添加漸變、添加顏色和添加字體， 使用它們可以細化設置情況。  圖 9-12 【編輯樣式表】對話框 舉個例子，依次點擊添加顏色和添加字體按鈕，為窗口部件設置顏色和字體的樣式 。其 結果如圖 9-13 所示。  圖 9-13 添加字體和設置顏色 從 Qt 4.2 開始， Qt Designer 內置了針對樣式表的語法高亮和語法有效性校驗支持 。 語法有效性指示器位于【編輯樣式表】窗體的左下角。樣式表的語法有效的話，將以綠色字 體指示出來“有效樣式表”，如圖 9-14 所示。  圖 9-14 樣式表設置正確 當你按下【確定】或者【應用】按鈕，Qt Designer 將立即把基于新的樣式表的程序外 觀展現在面前。 語法不正確的話，將以紅色字體指示出來“無效樣式表”，如圖 9-15 所示。  圖 9-15 樣式表的語法不正確 現在，我們舉個具體的小例子，也算是一個練習題吧。打開 Qt Designer，在界面上放 置兩個 Label、一個 LineEdit 和一個 ComboBox 窗口部件。通過使用右鍵菜單來改變各個窗 口部件的樣式表，最終完成的界面情形如圖 9-16 所示，大家可以自行嘗試如何實現這個界面 布局，多試幾遍就可以的。（提示：要把 LineEdit 設置成如圖 9-16 所示的圓角形式，需要加 入語句 border-style:outset;）  圖 9-16 一個具體的例子 ### 9.4.2 實例：樣式表的應用 下面我們以一個實例來講解樣式表的應用。這個例子取材于 Qt Demo，比較復雜，有一 定難度，基本上覆蓋了前面幾章講述的各種技能點，主要包括： + 如何自定義 Qt 的樣式表 + 如何在應用程序中應用樣式表 + 如何不使用樣式表來設置應用程序的樣式 + 如何使用單繼承法從.ui 文件創建派生類 + 如何自定義資源集文件 + 如何使信號和槽自動連接 + 如何在兩個窗口之間建立關聯 + 元對象系統方法的使用 這個程序名字叫 stylesheet，其運行后的效果如圖 9-17 所示。  圖 9-17 實例運行效果 該例子基于主窗口樣式，有些類似于我們在網上所常見的填寫個人資料的網站注冊程序。 程序有兩個主菜單，依次點擊【File】->【Edit Style】菜單項，將彈出如圖 9-18 所示的設置樣式表的對話框，在其中內置了幾種樣式供選擇，使用者也可以在編輯框中輸入自 定義的樣式。設置完成后，主界面的窗口部件的樣式將依此相應的變化 。里面的 Coffee 樣式自定義了 push button、frames 和 tooltip，但使用了下層的風格 （例如這里是 Windows XP風格）來繪制 checkbox，combobox 和 radio button。Pagefold 風格完全重新定義了對話框 中使用的所有控件的外觀，從而實現了一種獨特的，平臺無關的外觀。  圖 9-18 樣式表編輯器 這個程序里面包含如下原生源文件： ``` mainwindow.ui stylesheeteditor.ui stylesheet.qrc /qss/coffee.qss /qss/default.qss /qss/pagefold.qss /images/*.png mainwindow.h mainwindow.cpp stylesheeteditor.h stylesheeteditor.cpp ``` 其中，mainwindow.ui 和 stylesheeteditor.ui 分別是主程序和樣式編輯器的界面布局 文件，是使用 Qt Designer 制作的。Stylesheet.qrc 是資源集文件，在其中描述了程序中用 到的樣式表文件和圖片文件的位置和名稱 。在 qss 文件夾中包含了 3 個.qss 文件，它們描述 了程序中用到的樣式，我們的程序將讀取它們并轉換成樣式表 。在 images 文件夾中放置了程 序中用到的圖片文件。mainwindow.h 和 mainwindow.cpp 構成了程序中的主程序類，而 stylesheeteditor.h 和 stylesheeteditor.cpp 構成了樣式編輯器類。 下面我們就結合源代碼為大家講解這個程序的功能是怎樣實現的。 首先看看 mainwindow.h ``` #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QtGui> #include "ui_mainwindow.h" class StyleSheetEditor; class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(); private slots: void on_editStyleAction_triggered(); void on_aboutAction_triggered(); private: StyleSheetEditor *styleSheetEditor; Ui::MainWindow ui; }; #endif ``` 第 1、2 和第 16 行一起構成了頭文件的預定義衛哨 ，這樣做的目的是為了防止程序中重復定義或包含頭文件，是嚴謹的編程風格，建議大家遵循這一范例的做法。 第 3 行引入 QtGui 模塊的聲明，它包含了 QMainWindow 類的定義。 第 4 行引入 ui_mainwindow.h 的聲明。 第 5 行采用前置聲明的方式引入樣式編輯器類 StyleSheetEditor。 第 6 行聲明主程序類 MainWindow 單公有繼承自 QMainWindow 類。 第 7 行時必需的，因為要用到 Qt 的核心機制，如信號/槽機制等。 第 8、9 行聲明 MainWindow 類的構造函數。 第 10-12 行聲明私有槽，它們的命名遵循了 Qt 信號/槽的“自動關聯規則”。 第 13-15 行聲明了私有成員，它們分別是樣式編輯器類的對象和主程序界面類的對象 。 從這里也可以看出，我們對.ui 文件的引入將采用單繼承的方式。 下面再來看一下 mainwindow.cpp 文件的內容。 ``` #include "mainwindow.h" #include "stylesheeteditor.h" MainWindow::MainWindow() { ui.setupUi(this); ui.nameLabel->setProperty("class", "mandatory QLabel"); styleSheetEditor = new StyleSheetEditor(this); statusBar()->addWidget(new QLabel(tr("Ready"))); connect(ui.exitAction, SIGNAL(triggered()), qApp, SLOT(quit())); connect(ui.aboutQtAction, SIGNAL(triggered()), qApp, SLOT(aboutQt())); } void MainWindow::on_editStyleAction_triggered() { styleSheetEditor->show(); styleSheetEditor->activateWindow(); } void MainWindow::on_aboutAction_triggered() { QMessageBox::about(this, tr("About Style sheet"), tr("The <b>Style Sheet</b> example shows how widgets can be styled " "using <a href=\"http://doc.trolltech.com/4.5/stylesheet.html\">Qt " "Style Sheets</a>. Click <b>File|Edit Style Sheet</b> to pop up the " "style editor, and either choose an existing style sheet or design " "your own.")); } ``` 第 1、2 兩行引入程序中用到的頭文件聲明。 第 4 行初始化界面布局，setupUi()函數一般要放在構造函數內的第一行。 第 5 行設置 nameLabel 的屬性，setProperty()方法的原型如下： ``` bool QObject::setProperty ( const char * name, const QVariant & value ) ``` 它將對象的 name 的屬性值設置為 value。對于本句來說，就是把 nameLabel 的 class 屬性值設置為"mandatory QLabel"，這將使得該窗口部件被突出顯示。 第 6 行實例化 styleSheetEditor 類的對象，其父窗口為 MainWindow。 第 7 行為狀態欄添加一個窗口部件，顯示 "Ready"字樣，即漢語的“就緒“。 第 8、9 行分別連接菜單項 exitAction 和 aboutQtAction 的觸發信號 triggered()和全局對象 qApp 的 quit()槽和 aboutQt()槽。 第 10-12 行定義了 on_editStyleAction_triggered()槽函數。 第 11 行顯示樣式編輯器窗口。 第 12 行調用 activateWindow()方法把樣式編輯器窗口設置為活動窗口。 activateWindow()方法的原型如下： ``` void QWidget::activateWindow () ``` 它用來把某個頂層窗口設置為當前的活動窗口。 小貼士：活動窗口與如何設置活動窗口 所謂活動窗口就是當前能夠擁有鍵盤輸入焦點的，可見的頂層窗口。 activateWindow()方法的作用與用鼠標單擊頂層窗口的標題欄的效果是一樣的。在 X11上，這個效果并不確定，因為它依賴于具體的窗口管理器，如果要確保某窗口為活動窗口， 最好是在調用 activateWindow()方法之后再調用 raise()方法，后者本身也是 Qt 內置的一個 槽函數。但無論如何，在這之前都需要確保該窗口首先是可見的，否則將沒有任何效果。 在 Windows 平臺上，這種情形又有些差異。因為 Microsoft 不允許一個應用打斷由另一 個應用建立起來的和用戶的對話（即交互過程 ），所以 activateWindow()被調用后，該窗口 部件可能還是不能成為頂層的活動窗口，而只是它的標題欄變為高亮，以告訴用戶該窗口部 件的狀態發生了某些變化。這一點，請讀者朋友在使用時注意。 如果想知道某窗口是否為活動窗口，可以調用 isActiveWindow()方法。 前面我們曾經講到過 Qt 核心機制中的“資源集文件“。現在我們看一下如何在 Qt Creator 中書寫或配置資源集文件。 在 Qt Creator 中用鼠標雙擊資源集文件，將打開資源集文件編輯器，在資源集編輯器中可以增加或刪除文件、節點等，其操作比較方便，一目了然。如圖 9-19 所示。  圖 9-19 資源集文件編輯器 我們再來看一下 stylesheeteditor.h 文件的內容。 ``` #ifndef STYLESHEETEDITOR_H #define STYLESHEETEDITOR_H #include <QDialog> #include "ui_stylesheeteditor.h" class StyleSheetEditor : public QDialog { Q_OBJECT public: StyleSheetEditor(QWidget *parent = 0); private slots: void on_styleCombo_activated(const QString &styleName); void on_styleSheetCombo_activated(const QString &styleSheetName); void on_styleTextEdit_textChanged(); void on_applyButton_clicked(); private: void loadStyleSheet(const QString &sheetName); Ui::StyleSheetEditor ui; }; #endif ``` 第 1 行聲明 StyleSheetEditor 類單公有繼承自 QDialog。 第 5-9 行聲明了程序中的私有槽，命名遵循了 Qt 信號/槽的“自動關聯規則”。 第 11 行聲明了私有方法 loadStyleSheet()，它用來從.qss 文件中讀取內容并轉化問樣式表。 第 12 行聲明了私有成員變量 ui。 再來看一下 stylesheeteditor.cpp。 ``` #include <QtGui> #include "stylesheeteditor.h" 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"); } void StyleSheetEditor::on_styleCombo_activated(const QString &styleName) { qApp->setStyle(styleName); ui.applyButton->setEnabled(false); } void StyleSheetEditor::on_styleSheetCombo_activated(const QString &sheetName) { loadStyleSheet(sheetName); } void StyleSheetEditor::on_styleTextEdit_textChanged() { ui.applyButton->setEnabled(true); } void StyleSheetEditor::on_applyButton_clicked() { qApp->setStyleSheet(ui.styleTextEdit->toPlainText()); ui.applyButton->setEnabled(false); } 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); } ``` 第 3-6 行調用 Qt 中的正則表達式來取得默認的樣式。 第 3 行定義一個正則表達式變量 regExp。 第 4 行是 Qt 元對象機制（ Meta-Object System）的應用。 首先通過 style()方法獲得應用程序的樣式，然后利用 Qt 元對象機制獲取元對象信息。 style()方法是 QApplication 類的靜態方法，其原型如下： ``` QStyle * QApplication::style () [static] ``` 它將返回應用程序的樣式對象。 這里簡單的講解一下 Qt 元對象機制，詳細的內容請見第 13 章。 Qt 的元對象系統是 Qt 的核心機制之一，Qt 的信號/槽機制、屬性系統、運行時型別信息 等機制都是以元對象系統為基礎的。在應用程序中，每一個 QObject 的子類都會有一個單獨的 Qt 元對 象實例， 這個實例 中保存了 該類所有 的元對象 信息，該 實例可以 通過調用 QObject::metaObject()方法來得到。 而 QMetaObject 被稱作是 Qt 的元對象類，它包含了 Qt 對象的元信息。 QObject::metaObject()方法的原型如下： ``` const QMetaObject * QObject::metaObject () const [virtual] ``` 可以看到，它返回本對象的指向其元對象的指針。 用來獲取元對象信息的方法有很多，本程序中用到的 className()是其中的一種，它返回類 的名字。 第 5、6 兩行應用正則表達式的校驗來獲得 defaultStyle 的值。 第 8 行是為 styleCombo 設置當前下拉框列表中的默認選項。 findText()是 QcomboBox 類的方法，其原型如下： ``` int QComboBox::findText ( const QString & text, Qt::MatchFlags flags = Qt::MatchExactly | Qt::MatchCaseSensitive ) const ``` 它在 QComboBox 對象的 item 列表中搜索與 text 相匹配的項的索引值，如果沒有相匹配的項，則返回-1，該值是 int 型的。flags 參數給出了搜索的方法，即如何與 text 相匹配。 flags 的值取自枚舉值 Qt::MatchFlag，后者描述了在一個模型中搜索時可以遵循的匹配原 則，如表 9-2 所示。 表 9-2 MatchFlag 的取值 | 常量 | 值 | 說明 | | --- | --- | --- | | Qt::MatchExactly | 0 | 執行 QVariant 匹配（QVariant 可以看做是 Qt 的最常用變量類型的聯合體） | | Qt::MatchFixedString | 8 | 執行按字符匹配。注意這種方式默認情況下不區分大小寫，只有同時指定 Qt::MatchCaseSensitive 才區分大小寫。 | | Qt::MatchContains | 1 | 搜索條件包含在（QComboBox 的下拉列表）項目中 | | Qt::MatchStartsWith | 2 | 匹配條件是與項的開頭相匹配，即“以 XXX 開頭” | | Qt::MatchEndsWith | 3 | 搜索的條件與項的結尾相匹配，即“以 XXX 為結尾” | | Qt::MatchCaseSensitive | 16 | 執行大小寫敏感匹配搜索 | | Qt::MatchRegExp | 4 | 以一個正則表達式為匹配條件執行按字符匹配搜素，注意這種方式不區分大 小寫，除非同時指定 Qt::MatchCaseSensitive 條件。 | | Qt::MatchWildcard | 5 | | Qt::MatchWrap | 32 | 執行類似“令牌環”式的搜索，對每一個項都要經過驗證 | | Qt::MatchRecursive | 64 | 執行遞歸搜索 | 所有上述這些標記符號都是 QFlags< MatchFlag >的一部分，它們之間的組合可以用 OR 來連接，在程序中即是使用|符號。這些標記符號經常與 QRegExp 類結合使用。 第 9 行與第 8 行同理，設置 styleSheetCombo 的當前項為 Coffee，也即當前的樣式表的 名稱為 Coffee。 緊接著，第 10 行調用 loadStyleSheet()方法相應的設置應用程序的樣式表為 Coffee。 第 21-27 行是 loadStyleSheet()方法的定義。 第 22 行使用 QFile 類的對象根據實參取得 Coffee 樣式表對應的.qss 文件全名，即帶路 徑的 Coffee.qss。 第 23 行以只讀方式打開 Coffee.qss 文件。 第 24 行讀取文件的全部內容。QLatin1String 類的構造函數原型如下： ``` QLatin1String::QLatin1String ( const char * str ) ``` 注意它的參數是 const char * str，而不是 QString 類的對象。 小貼士：QLatin1String 類的使用 關于 QLatin1String 類的使用有很多話題。這里只講一下最為基本的部分。 QLatin1String 類為采用 ASCII/Latin-1 編碼形式的字符串操作提供了一個輕量級的封裝。 通常在操作字符串時，Qt 推薦開發者盡量不要直接使用 QString 類，因為它的速度比較慢。替代的方法一種是使用 const char*，使用它可以避免創建一個臨時的 QString 對象， 這樣就節省了開銷。很多 QString 的成員函數如 insert()、replace()、index()等都接受 const char*作為參數或返回值。舉個例子，在下面的所有的示例代碼中假設變量 str 是 QString 類型。 ``` if (str == "auto" || str == "extern" || str == "static" || str == "register") { ... } ``` 上面和下面的兩段代碼實現了相同的操作 。由于下面的代碼在執行期間創建了 4 個臨時的 QString 變量并且對字串值進行了深度拷貝，增大了程序運行的開銷，所以上面這段代碼 的執行速度就要明顯的快于下面這段代碼。 ``` if (str == QString("auto") || str == QString("extern") || str == QString("static") || str == QString("register")) { ... } ``` 如果使用 QLatin1String 類，代碼可以寫成下面這樣，書寫起來比較費力氣些，但是代碼執行的效率很高，比使用 QString::fromLatin1()要快得多。 ``` if (str == QLatin1String("auto") || str == QLatin1String("extern") || str == QLatin1String("static") || str == QLatin1String("register") { ... } ``` 基本上在各種場合都可以使用 QLatin1String 來代替 QString，就像下面代碼中示例的這種用法。 ``` QLabel *label = new QLabel(QLatin1String("MOD"), this); ``` 第 25 行使用 setPlainText()方法把 styleTextEdit 要顯示的內容設置為樣式表文件的內容。 第 26 行設置應用程序的樣式表。 代碼段中的其它部分比較簡單，不再贅述了。 再來看一看 main.cpp 的內容。 ``` #include <QtGui> #include "mainwindow.h" int main(int argc, char *argv[]) { Q_INIT_RESOURCE(stylesheet); QApplication app(argc, argv); MainWindow window; window.show(); return app.exec(); } ``` 這里第 1 行最為重要，要使用資源集文件，就要使用 Q_INIT_RESOURCE 宏。 小貼士：Q_INIT_RESOURCE 宏的使用 Q_INIT_RESOURCE 宏的原型如下： ``` void Q_INIT_RESOURCE ( name ) ``` 該宏的作用是初始化在 name 指定的.qrc 文件中的資源文件。通常，Qt 在應用程序初始化時自動加載資源。注意，在某些平臺上使用靜態鏈接庫時，必須使用 Q_INIT_RESOURCE() 宏來存儲資源。 舉個例子，如果應用程序中用到的資源文件列在名為 myapp.qrc 的資源集文件中，那么 為了確保資源在應用程序初始化時被加載，你需要確保在主程序的 main()中加上下面這句： ``` Q_INIT_RESOURCE(myapp); ``` 有兩點需要注意，一是參數 name 的命名必須符合標準 C++對于變量命名的規范，不可以含有不合適的字符。 第二，該宏不能用在名字空間里面。它必須在 main()主函數中被調用。如果必須在名字 空間中使用，可以使用下面的示例代碼。 ``` inline void initMyResource() { Q_INIT_RESOURCE(myapp); } namespace MyNamespace { ... void myFunction() { initMyResource(); } } ``` 項目文件 stylesheet.pro 可以像下面這樣書寫。 ``` TEMPLATE = app TARGET = DEPENDPATH += . INCLUDEPATH += . # Input HEADERS += mainwindow.h stylesheeteditor.h FORMS += mainwindow.ui stylesheeteditor.ui SOURCES += main.cpp mainwindow.cpp stylesheeteditor.cpp RESOURCES += stylesheet.qrc ``` 第 1 行表明應用程序的模板為 app。第 5 行是注釋，第 9 行表明要包含用到的資源集文件。 通過本實例，大家可以看到，樣式表是一種在運行時解釋的普通文本文件 ，使用它們不 需要具備編程知識。我們可以在應用程序級別和窗口級別設置樣式表。 另外，如果在不同的 級別都設置了樣式表，則應用程序將繼承所有有效的樣式，你看到的程序樣子是這些效果的 疊加，這被稱作是樣式表效果的層疊（ cascading）。