讓你的Qt桌面程式看上去更加native（四）：stylesheet

臨近春節，更新也慢了許多。今天再來寫一篇，不知道會不會是春節前的最後一篇了。豆子先祝大家新春愉快！

我們知道，HTML 僅僅被定義為一種內容佈局的語言。也就是說，HTML 應該做的，是告訴瀏覽器，這個東西應該放在這裡，那個東西應該放在那裡。至於這些東西該怎麼顯示，例如，用紅色還是用藍色，這樣的顯示的定義應該交給 CSS 去做。所以，在新近版本的 HTML 中，font、color 這樣的標籤和屬性已經不被推薦使用了。同樣，在 Qt 中也有這麼一個樣式表，被稱為 style sheet——這其實和 CSS 如出一轍。不僅名字相似，就連語法之類也相當雷同。

style sheet 雖然很好用，但是，我們應該提出幾個需要注意的地方。style sheet 應該被小心使用，因為它會打破系統正常的 look and feel。還記得我們前面提到的那個同普通 Windows 程式格格不入的 safari 嗎？所以在使用 style sheet 時應該儘量選用系統調色盤，而不是自己定義一個另類的顏色。

關於 style sheet 語法更詳細的手冊，我們可以到這裡去檢視。當然，如果你安裝的是 mingw 版本的 Qt（Windows 平臺），這個文件已經在 Qt Help 裡面了。在這裡，我們不去詳細介紹具體的語法細節，而是專注於如何正確使用 style sheet。所以，如果你有的語法看不懂，請自行查閱文件瞭解。

自己定義 label 的顏色固然很簡單，請看以下程式碼：

1. #include <QtGui> 
2.  
3. int main(int argc, char *argv[]) 
4. { 
5.     QApplication app(argc, argv); 
6.  
7.     QLabel label; 
8.     label.setText(“Hello, style sheet!”); 
9.     label.setStyleSheet(QString(“color:red”)); 
10.     label.show(); 
11.  
12.     return app.exec(); 
13. } 

我們將 label 的顏色使用 style sheet 定義為紅色，執行起來如下圖所示：

這種預定義的顏色很簡單，然而，如果我想用個系統顏色呢？比如，我希望是系統高亮的顏色？難道還得自己去找高亮色的 RGB 值嗎？正確的做法是，使用系統調色盤，如下程式碼所示：

1. label.setStyleSheet(QString(“color:palette(highlight)”)); 

這樣，我們直接從系統調色盤中得到高亮色，即便是不同的系統，也不需要修改任何程式碼。以下是在 Windows 7 上面的執行結果：

即使你必須使用自定義顏色，也不應該將顏色硬編碼。而是使用一種變通的方式，例如：

1. QColor color(128, 200, 128); 
2. label.setStyleSheet(QString(“color:%1”).arg(color.name())); 

這樣做的好處是，你可以很方便地讓使用者選擇顏色，存入配置檔案，並且在以後的啟動中從配置檔案中讀取 color 的值，而不需要修改程式碼。

使用 style sheet 可以做出很漂亮的顯示效果。由於使用 style sheet 要比 前面說的自定義 style 簡單得多，因此，我們還是建議多多使用這一技術。下面，我們製作一個蘋果風格的前進/後退按鈕。效果如下：

為了製作這一按鈕，我們需要以下四幅圖片：

按照從上向下的順序分別命名為 btn_left.png, btn_left_pressed.png, btn_right.png 和 btn_right_pressed.png。然後，我們用下面的程式碼：

1. #include <QtGui> 
2.  
3. int main(int argc, char *argv[]) 
4. { 
5.     QApplication app(argc, argv); 
6.  
7.     QWidget segmentedButton; 
8.     QToolButton *backButton = new QToolButton(&segmentedButton); 
9.     QToolButton *forwardButton = new QToolButton(&segmentedButton); 
10.     segmentedButton.setLayout(new QHBoxLayout); 
11.     segmentedButton.layout()->setSpacing(0); 
12.     segmentedButton.layout()->setMargin(0); 
13.     backButton->setStyleSheet(QString(“QToolButton{border-image:url(:/btn_left.png)}” 
14.                                       “QToolButton:pressed{border-image:url(:/btn_left_pressed.png)}”)); 
15.     forwardButton->setStyleSheet(QString(“QToolButton{border-image:url(:/btn_right.png)}” 
16.                                       “QToolButton:pressed{border-image:url(:/btn_right_pressed.png)}”)); 
17.     backButton->setFixedSize(28, 23); 
18.     forwardButton->setFixedSize(28, 23); 
19.     segmentedButton.layout()->addWidget(backButton); 
20.     segmentedButton.layout()->addWidget(forwardButton); 
21.  
22.     QWidget win; 
23.     win.setLayout(new QHBoxLayout); 
24.     win.layout()->setSpacing(0); 
25.     win.layout()->setMargin(0); 
26.     win.layout()->setAlignment(Qt::AlignLeft); 
27.     win.layout()->addWidget(&segmentedButton); 
28.     win.show(); 
29.  
30.     return app.exec(); 
31. } 

即可得到上圖所示的效果。注意，我們之所以把 segmentedButton 又放入一個新的 widget 裡面，是由於 Windows 平臺下的視窗有一個最小值。如果直接呼叫 segmenedButton.show(); ，由於這個最小值的緣故，兩個 button 並不會在一起。使用這一技術，我們很容易製作出很漂亮的介面。這一技術的關鍵就在於圖片素材的製作，將介面大部分工作交予美工。

本文轉自 FinderCheng 51CTO部落格，原文連結：