使用Qt Style Sheet(1)

轉自：http://hi.baidu.com/buptyoyo/item/a6ca884a4aea20a5de2a9f27

借用css 的靈感， Qt也支援Qt自己的css, 簡稱qss。同css 相似，qss的主要功能與最目的都是能使介面的表現與介面的元素分離，即質與形的分離，就如同一個人可以在不同的時候穿上不同的衣服一樣，css機制的引入，使得設計一種皮膚與介面控制元件分離的軟體成為可能，應用程式也能像web介面那樣隨意地改變外觀。

1， QSS語法

同css一樣，他也有由一個selector與一個declaration組成，selector指定了是對哪一個控制元件產生效果，而declaration才是真正的產生作用的語句。如：

QPushButton { color: red }

QPushButton指定了是對所有的QPushButton或是其子類控制元件（如使用者定義的MyPushButton）產生影響，而color:red表明所有的受影響控制元件的前景色都為red。

除了“類名”，“物件名”，“Qt屬性名”這三樣東西是大小寫敏感的外其他的東西都是大小寫不敏感的，如color與Color代表同一屬性。

如果有幾個selector指定了相同的declaration, 可以使用逗號（,）將各個選擇器分開，如：

QPushButton, QLineEdit, QComboBox { color: red }

他相當於：

QPushButton { color: red }QLineEdit { color: red } QComboBox { color: red }

declaration部份是一系列的（屬性：值）對，使用分號（;）將各個不同的屬性值對分開，使用大括號（{}）將所有declaration包含在一起。

1，一般選擇器（selector）

Qt支援所有的CSS2定義的選擇器，其祥細內容可以在w的網站上查詢http://www.w3.org/TR/CSS2/selector.html ，其中比較常用的selector型別有：

i. 通用型別選擇器：*

會對所有控制元件有效果。

ii. 型別選擇器：QPushButton

匹配所有QPushButton的例項和其子類的例項。

iii. 屬性選擇器：QPushButton[flat=”false”]

匹配所有QPushButton屬性flat為false的例項，屬性分為兩種，靜態的和動態的，靜態屬性可以通過Q_PROPERTY() 來指定，來動態屬性可以使用setProperty來指定，如：

QLineEdit *nameEdit = new QLineEdit(this);nameEdit->setProperty("mandatoryField", true);

如果在設定了qss後Qt屬性改變了，需要重新設定qss來使其生效，可以使用先unset再set qss。

iv. 類選擇器：.QPushButton

匹配所有QPushButton的例項，但不包含其子類，這相當於：

*[class~="QPushButton"]

~=的意思是測試一個QStringList型別的屬性是否包含給定的QString。

v. ID選擇器：QPushButton#okButton

對應Qt裡面的object name設定，使用這條CSS之前要先設定對應控制元件的object name為okButton，如：

Ok->setObjectName(tr(“okButton”));

vi. 後裔選擇器：QDialog QPushButton

匹配所有為QDialog後裔（包含兒子，與兒子的兒子的遞迴）為QPushButton的例項

vii. 子選擇器：QDialog > QPushButton

匹配所有的QDialog直接子類QPushButton的例項，不包含兒子的兒子的遞迴。

2，子控制元件選擇器

i. 對於複雜的控制元件，可能會在其中包含其他子控制元件，如一個QComboxBox中有一個drop-down的按鈕。那麼現在如果要設定QComboxBox的下拉按鈕的話，就可以這樣訪問：

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

其標誌是（::）

ii. 子控制元件選擇器是用位置的引用來代表一個元素，這個元素可以是一個單一控制元件或是另一個包含子控制元件的複合控制元件。使用subcontrol-origin屬性可以改變子控制元件的預設放置位置，如：

QComboBox { margin-right: 20px; } QComboBox::drop-down { subcontrol-origin: margin; }

如上語句可以用來改變drop-down的margin。

iii. 相對位置屬性可以用來改變子控制元件相對於最初位置的偏移量，如當一個QCombox的drop-down按鈕被按下時，我們可以用一個內部的小偏移量來表示被按下的效果，如下：

QComboBox::down-arrow { image: url(down_arrow.png);}QComboBox::down-arrow:pressed { position: relative; top: 1px; left: 1px;}

iv. 絕對位置屬性允許子控制元件改變自己的位置和大小而不受引用元素的控制元件。一但位置被設定了，這些子控制元件就可以被當成一般的widget來對待，並且可以使用合模型。關於合模型可以參考下面。

如果你要檢視Qt支援哪些子控制元件選擇器，可以參考：

http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls

-syntax.html

3，偽選擇器（pseudo-states）

i. 偽選擇器以冒號（:）表示，與css裡的偽選擇器相似，是基於控制元件的一些基本狀態來限定程式的規則，如hover規則表示滑鼠經過控制元件時的狀態，而press表示按下按鈕時的狀態。如：

QPushButton:hover {

Background-color:red;

}

表示滑鼠經過時QPushButton背景變紅。

ii. Pseudo還支援否定符號（！），如：

QRadioButton:!hover { color: red }

表示沒有滑鼠移上QRadioButton時他顯示的顏色是red。

iii. Pseudo可以被串連在一起，比如：

QPushButton:hover:!pressed { color: blue; }

表示QPushButton在滑鼠移上卻沒有點選時顯示blue字，但如果點選的時候就不會顯示blue顏色了。

iv. 同樣可以和之前所講的子控制元件選擇器一起聯合使用，如：

QSpinBox::down-button:hover { image: url(btn-combobox-press.bmp) }

v. 與前面所講的一樣，偽選擇器，子控制元件選擇器等都是可以用逗號（，）分隔表示連續相同的設定的，如：

QPushButton:hover,QSpinBox::down-button, QCheckBox:checked { color: white ;image: url(btn-combobox-press.bmp);} 表示如下

使用Qt Style Sheet(1)

相關文章