讓你的 Qt 桌面程序看上去更加 native（四）：style sheet

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

我們知道，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 的顏色固然很簡單，請看以下代碼：

#include <QtGui>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QLabel label;
    label.setText("Hello, style sheet!");
    label.setStyleSheet(QString("color:red"));
    label.show();

    return app.exec();
}

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

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

label.setStyleSheet(QString("color:palette(highlight)"));

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

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

QColor color(128, 200, 128);
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。然後，我們用下面的代碼：

#include <QtGui>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QWidget segmentedButton;
    QToolButton *backButton = new QToolButton(&segmentedButton);
    QToolButton *forwardButton = new QToolButton(&segmentedButton);
    segmentedButton.setLayout(new QHBoxLayout);
    segmentedButton.layout()->setSpacing(0);
    segmentedButton.layout()->setMargin(0);
    backButton->setStyleSheet(QString("QToolButton{border-image:url(:/btn_left.png)}"
                                      "QToolButton:pressed{border-image:url(:/btn_left_pressed.png)}"));
    forwardButton->setStyleSheet(QString("QToolButton{border-image:url(:/btn_right.png)}"
                                      "QToolButton:pressed{border-image:url(:/btn_right_pressed.png)}"));
    backButton->setFixedSize(28, 23);
    forwardButton->setFixedSize(28, 23);
    segmentedButton.layout()->addWidget(backButton);
    segmentedButton.layout()->addWidget(forwardButton);

    QWidget win;
    win.setLayout(new QHBoxLayout);
    win.layout()->setSpacing(0);
    win.layout()->setMargin(0);
    win.layout()->setAlignment(Qt::AlignLeft);
    win.layout()->addWidget(&segmentedButton);
    win.show();

    return app.exec();
}

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