下面我們以一個例項來講解樣式表的應用。這個例子取材於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

1#ifndef MAINWINDOW_H

2#define MAINWINDOW_H

3#include <QtGui>

4#include "ui_mainwindow.h"

5class StyleSheetEditor;

6class MainWindow : public QMainWindow

{

7Q_OBJECT

8public:

9MainWindow();

10private slots:

11void on_editStyleAction_triggered();

12void on_aboutAction_triggered();

13private:

14StyleSheetEditor *styleSheetEditor;

15Ui::MainWindow ui;

};

16#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檔案的內容。

1#include "mainwindow.h"

2#include "stylesheeteditor.h"

3MainWindow::MainWindow()

{

4ui.setupUi(this);

5ui.nameLabel->setProperty("class", "mandatory QLabel");

6styleSheetEditor = new StyleSheetEditor(this);

7statusBar()->addWidget(new QLabel(tr("Ready")));

8connect(ui.exitAction, SIGNAL(triggered()), qApp, SLOT(quit()));

9connect(ui.aboutQtAction, SIGNAL(triggered()), qApp, SLOT(aboutQt()));

}

10void MainWindow::on_editStyleAction_triggered()

{

11styleSheetEditor->show();

12styleSheetEditor->activateWindow();

}

13void MainWindow::on_aboutAction_triggered()

{

14QMessageBox::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()被呼叫後，該視窗部件可能還是不能成為頂層的活動視窗，而只是它的標題欄變為高亮，以告訴使用者該視窗部件的狀態發生了某些變化。這一點，請讀者朋友在使用時注意。

如果想知道某視窗是否為活動視窗，可以呼叫方法。

前面我們曾經講到過Qt核心機制中的“資源集檔案“。現在我們看一下如何在Qt Creator中書寫或配置資源集檔案。

在Qt Creator中用滑鼠雙擊資源集檔案，將開啟資源集檔案編輯器，在資源集編輯器中可以增加或刪除檔案、節點等，其操作比較方便，一目瞭然。如圖9-19所示。

圖9-19 資源集檔案編輯器

我們再來看一下stylesheeteditor.h檔案的內容。

#ifndef STYLESHEETEDITOR_H

#define STYLESHEETEDITOR_H

#include <QDialog>

#include "ui_stylesheeteditor.h"

1class StyleSheetEditor : public QDialog

{

2Q_OBJECT

3public:

4StyleSheetEditor(QWidget *parent = 0);

5private slots:

6void on_styleCombo_activated(const QString &styleName);

7void on_styleSheetCombo_activated(const QString &styleSheetName);

8void on_styleTextEdit_textChanged();

9void on_applyButton_clicked();

10private:

11void loadStyleSheet(const QString &sheetName);

12Ui::StyleSheetEditor ui;

};

13#endif

第1行宣告StyleSheetEditor類單公有繼承自QDialog。

第5-9行聲明瞭程式中的私有槽，命名遵循了Qt訊號/槽的“自動關聯規則”。

第11行聲明瞭私有方法loadStyleSheet()，它用來從.qss檔案中讀取內容並轉化問樣式表。

第12行聲明瞭私有成員變數ui。

再來看一下stylesheeteditor.cpp。

#include <QtGui>

#include "stylesheeteditor.h"

1StyleSheetEditor::StyleSheetEditor(QWidget *parent)

: QDialog(parent)

{

2ui.setupUi(this);

3QRegExp regExp(".(.*)//+?Style");

4QString defaultStyle = QApplication::style()->metaObject()->className();

5if (regExp.exactMatch(defaultStyle))

{

6defaultStyle = regExp.cap(1);

}

7ui.styleCombo->addItems(QStyleFactory::keys());

8ui.styleCombo->setCurrentIndex(ui.styleCombo->findText(defaultStyle, Qt::MatchContains));

9ui.styleSheetCombo->setCurrentIndex(ui.styleSheetCombo->findText("Coffee"));

10loadStyleSheet("Coffee");

}

11void StyleSheetEditor::on_styleCombo_activated(const QString &styleName)

{

12qApp->setStyle(styleName);

13ui.applyButton->setEnabled(false);

}

14void StyleSheetEditor::on_styleSheetCombo_activated(const QString &sheetName)

{

15loadStyleSheet(sheetName);

}

16void StyleSheetEditor::on_styleTextEdit_textChanged()

{

17ui.applyButton->setEnabled(true);

}

18void StyleSheetEditor::on_applyButton_clicked()

{

19qApp->setStyleSheet(ui.styleTextEdit->toPlainText());

20ui.applyButton->setEnabled(false);

}

21void StyleSheetEditor::loadStyleSheet(const QString &sheetName)

{

22QFile file(":/qss/" + sheetName.toLower() + ".qss");

23file.open(QFile::ReadOnly);

24QString styleSheet = QLatin1String(file.readAll());

25ui.styleTextEdit->setPlainText(styleSheet);

26qApp->setStyleSheet(styleSheet);

27ui.applyButton->setEnabled(false);

}

第3-6行呼叫Qt中的正則表示式來取得預設的樣式。

第3行定義一個正則表示式變數regExp。

首先通過style()方法獲得應用程式的樣式，然後利用Qt元物件機制獲取元物件資訊。style()方法是QApplication類的靜態方法，其原型如下：

QStyle * QApplication::style ()   [static]

它將返回應用程式的樣式物件。

這裡簡單的講解一下Qt元物件機制，詳細的內容請見第13章。

Qt的元物件系統是Qt的核心機制之一，Qt的訊號/槽機制、屬性系統、執行時型別資訊等機制都是以元物件系統為基礎的。在應用程式中，每一個QObject的子類都會有一個單獨的Qt元物件例項，這個例項中儲存了該類所有的元物件資訊，該例項可以通過呼叫QObject::metaObject()方法來得到。

而QMetaObject被稱作是Qt的元物件類，它包含了Qt物件的元資訊。

QObject::metaObject()方法的原型如下：

const  * 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 )

相關推薦