讓你的 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-p_w_picpath:url(:/btn_left.png)}"
                                      "QToolButton:pressed{border-p_w_picpath:url(:/btn_left_pressed.png)}"));
    forwardButton->setStyleSheet(QString("QToolButton{border-p_w_picpath:url(:/btn_right.png)}"
                                      "QToolButton:pressed{border-p_w_picpath: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 並不會在一塊兒。使用這一技術，咱們很容易製做出很漂亮的界面。這一技術的關鍵就在於圖片素材的製做，將界面大部分工做交予美工。