該文章原創於Qter開源社區

環境：Windows Xp + Qt 4.8.5+QtCreator2.8.0

二、在設計模式使用Qt樣式表

三、在代碼中設置Qt樣式表

要學習Qt樣式表，需要對其有一個全麵的了解，應該知道它到底有什麼用，可以給哪些部件設置樣式。為了了解這些內容，我們先在Qt幫助中查看Qt StyleSheets關鍵字，如下圖所示。

這裏將所有內容分為了幾部分：The Style Sheet Syntax中介紹了Qt樣式表的語法，就是一些使用規則；Qt Designer Integration中介紹了如何在設計器中使用Qt樣式表；CustomizingQt Widgets Using Style Sheets中介紹了如何使用Qt樣式表來定製部件樣式；QtStyle Sheets Reference中羅列了Qt中所有可以使用樣式表的部件；QtStyle Sheets Examples中列出了常用部件使用樣式表的例子，這個是我們後麵學習使用時的重要參考。

1.新建Qt Gui應用，項目名稱為myStyle，其他保持默認即可。完成後打開mainwindow.ui進入設計模式，然後拖入一個Push Button按鈕。

2.在按鈕部件上右擊，選擇“改變樣式表”菜單項，在彈出的編輯樣式表對話框中點擊“添加顏色”下拉框，然後選擇background-color，我們為其添加背景顏色。如下圖所示。

這時會彈出選擇顏色按鈕，大家可以隨便選擇一個顏色，這裏選擇了紅色，然後點擊確定按鈕關閉對話框。添加好的代碼如下圖所示。這種方法可以快速設置樣式表，當然我們也可以自己手動來添加代碼。

3.完成後大家可能發現按鈕的顏色並沒有改變，不要著急，這時運行程序，發現已經有效果了。如下圖所示。

4.其實在設計模式還可以很容易地使用背景圖片，這個需要使用Qt資源，大家可以試試，這裏就不再介紹。

       既然在設計器中可以使用樣式表，那麼使用代碼就一定可以實現。在代碼中可以使用setStyleSheet()函數來設置樣式表，不過用兩種設置方法。

1.設置所有的相同部件都使用相同的樣式。我們在mainwindow.cpp的構造函數中添加如下代碼：

setStyleSheet("QPushButton { color: white }");

可以看到按鈕的文本顏色變成了白色，不過這種方式是給所有QPushButton類對象設置的樣式。也就是說，我們再往界麵上拖放其他的Push Button，它的文本顏色也會變成白色。

2.那麼怎樣才能隻給特定的一個按鈕設置樣式表呢，這就需要使用第二種方式了。我們接著在mainwindow.cpp構造函數中添加代碼：

ui->pushButton->setStyleSheet("color: blue");

這樣就是隻給先前添加的pushButton按鈕設置了樣式，將文本顏色設置為藍色。為了有一個對比，大家可以再往界麵上拖入一個Push Button按鈕，然後運行程序，如下圖所示。

也許現在又會問了，怎麼按鈕的背景不是紅色的了？這是因為一個部件隻能單獨設置一個樣式表，我們在代碼中為pushButton設置了樣式表就會屏蔽設計器中設置的。這裏隻是說單獨為一個部件同時設置了多個樣式表會出現這種情況，如果對其父類進行設置，則隻會對其有影響，但是不會屏蔽掉自己的樣式表，比如前麵按鈕的紅底白字就是這種情況。

ui->pushButton->setStyleSheet("background-color:red; color: blue");

現在大家應該可以了解到，我們前麵在設計模式中就是隻為指定的pushButton按鈕設置了背景。

樣式表包含了一係列的樣式規則，一個樣式規則由一個選擇符（selector）和一個聲明（declaration）組成。選擇符指定了受該規則影響的部件；聲明指定了這個部件上要設置的屬性。例如：

QPushButton{color:red}

       在這個樣式規則中，QPushButton是選擇符，{color:red}是聲明，而color是屬性，red是值。這個規則指定了QPushButton和它的子類應該使用紅色作為它們的前景色。Qt樣式表中一般不區分大小寫，例如color、Color、COLOR和COloR表示相同的屬性。隻有類名，對象名和Qt屬性名是區分大小寫的。一些選擇符可以指定相同的聲明，隻需要使用逗號隔開，例如：

QPushButton,QLineEdit,QComboBox{color:red}

       一個樣式規則的聲明部分是一些屬性：值對組成的列表，它們包含在大括號中，使用分號隔開。例如：

QPushButton{color:red;background-color:white}

對一些複雜的部件修改樣式，可能需要訪問它們的子控件，例如QComboBox的下拉按鈕，還有QSpinBox的向上和向下的箭頭等。選擇符可以包含子控件來對部件的特定子控件應用規則，例如：

QComboBox::drop-down{image:url(dropdown.png)}

       這樣的規則可以改變所有的QComboBox部件的下拉按鈕的樣式。在Qt Style Sheets Reference關鍵字對應的幫助文檔的List of Stylable Widgets一項中列出了所有可以使用樣式表來自定義樣式的Qt部件，在List of Sub-Controls一項中列出了所有可用的子控件。

QPushButton:hover{color:white}

       這個規則表明當鼠標懸停在一個QPushButton部件上時才被應用。偽狀態可以使用感歎號來表示否定，例如要當鼠標沒有懸停在一個QRadioButton上時才應用規則，那麼這個規則可以寫為：

QRadioButton:!hover{color:red}

       偽狀態還可以多個連用，達到邏輯與效果，例如當鼠標懸停在一個被選中的QCheckBox部件上時才應用規則，那麼這個規則可以寫為：

QCheckBox:hover:checked{color:white}

       如果有需要，也可以使用逗號來表示邏輯或操作，例如：

QCheckBox:hover,QCheckBox:checked{color:white}

在Qt Style Sheets Reference關鍵字對應的幫助文檔的List of Pseudo-States一項中列出了Qt支持的所有的偽狀態。

       大家可以在Qt Style Sheets Examples頁麵找到很多相關的例子來學習，例如，下麵是QSpinBox部件的一段樣式表：

     padding-right: 15px; /* make room for the arrows */

     border-image: url(:/images/frame.png) 4;

     border-width: 3;

}

QSpinBox::up-button {

     subcontrol-origin: border;

     subcontrol-position: top right; /* position at the top right corner */

     width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */

     border-image: url(:/images/spinup.png) 1;

     border-width: 1px;

}

QSpinBox::up-button:hover {

     border-image: url(:/images/spinup_hover.png) 1;

}

QSpinBox::up-button:pressed {

     border-image: url(:/images/spinup_pressed.png) 1;

}

QSpinBox::up-arrow {

     image: url(:/images/up_arrow.png);

     width: 7px;

     height: 7px;

}

QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* off state when value is max */

    image: url(:/images/up_arrow_disabled.png);

}

QSpinBox::down-button {

     subcontrol-origin: border;

     subcontrol-position: bottom right; /* position at bottom right corner */

     width: 16px;

     border-image: url(:/images/spindown.png) 1;

     border-width: 1px;

     border-top-width: 0;

}

QSpinBox::down-button:hover {

     border-image: url(:/images/spindown_hover.png) 1;

}

QSpinBox::down-button:pressed {

     border-image: url(:/images/spindown_pressed.png) 1;

}

QSpinBox::down-arrow {

     image: url(:/images/down_arrow.png);

     width: 7px;

     height: 7px;

}

QSpinBox::down-arrow:disabled,

QSpinBox::down-arrow:off { /* off state when value in min */

    image: url(:/images/down_arrow_disabled.png);

}