QT 皮膚 QSS編程是本文要介紹的內(nèi)容，借用css 的靈感，Qt也支持Qt自己的css,簡(jiǎn)稱(chēng)qss。同css 相似，qss的主要功能與最終目的都是能使界面的表現(xiàn)與界面的元素分離，即質(zhì)與形的分離，就如同一個(gè)人可以在不同的時(shí)候穿上不同的衣服一樣，css機(jī)制的引入，使得設(shè)計(jì)一種皮膚與界面控件分離的軟件成為可能，應(yīng)用程序也能像web界面那樣隨意地改變外觀。

一、QSS語(yǔ)法

同css一樣，他也有由一個(gè)selector與一個(gè)declaration組成，selector指定了是對(duì)哪一個(gè)控件產(chǎn)生效果，而declaration才是真正的產(chǎn)生作用的語(yǔ)句。如：

QPushButton { color: red } 

QPushButton指定了是對(duì)所有的QPushButton或是其子類(lèi)控件（如用戶(hù)定義的MyPushButton）產(chǎn)生影響，而color:red表明所有的受影響控件的前景色都為red。

除了“類(lèi)名”，“對(duì)象名”，“Qt屬性名”這三樣?xùn)|西是大小寫(xiě)敏感的外其他的東西都是大小寫(xiě)不敏感的，如color與Color代表同一屬性。

如果有幾個(gè)selector指定了相同的declaration,可以使用逗號(hào)（,）將各個(gè)選擇器分開(kāi)，如：

QPushButton, QLineEdit, QComboBox{ color: red } 

他相當(dāng)于：

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

declaration部份是一系列的（屬性：值）對(duì)，使用分號(hào)（;）將各個(gè)不同的屬性值對(duì)分開(kāi)，使用大括號(hào)（{}）將所有declaration包含在一起。

1、一般選擇器（selector）

Qt支持所有的CSS2定義的選擇器，其祥細(xì)內(nèi)容可以在w3c的網(wǎng)站上查找 http://www.w3.org/TR/CSS2/selector.html ，其中比較常用的selector類(lèi)型有：

通用類(lèi)型選擇器：*會(huì)對(duì)所有控件有效果。

類(lèi)型選擇器：QPushButton匹配所有QPushButton的實(shí)例和其子類(lèi)的實(shí)例。

屬性選擇器：QPushButton[flat=”false”]匹配所有QPushButton屬性flat為false的實(shí)例，屬性分為兩種，靜態(tài)的和動(dòng)態(tài)的，靜態(tài)屬性可以通過(guò)Q_PROPERTY()來(lái)指定，來(lái)動(dòng)態(tài)屬性可以使用setProperty來(lái)指定，如：

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

如果在設(shè)置了qss后Qt屬性改變了，需要重新設(shè)置qss來(lái)使其生效，可以使用先unset再set qss。

類(lèi)選擇器：.QPushButton匹配所有QPushButton的實(shí)例，但不包含其子類(lèi)，這相當(dāng)于：*[class~="QPushButton"]     ~=的意思是測(cè)試一個(gè)QStringList類(lèi)型的屬性是否包含給定的QString

ID選擇器：QPushButton#okButton對(duì)應(yīng)Qt里面的object name設(shè)置，使用這條CSS之前要先設(shè)置對(duì)應(yīng)控件的object name為okButton，如：Ok->setObjectName(tr(“okButton”));

后裔選擇器：QDialog QPushButton匹配所有為QDialog后裔（包含兒子，與兒子的兒子的遞歸）為QPushButton的實(shí)例

子選擇器：QDialog > QPushButton匹配所有的QDialog直接子類(lèi)QPushButton的實(shí)例，不包含兒子的兒子的遞歸。

2、子控件選擇器

對(duì)于復(fù)雜的控件，可能會(huì)在其中包含其他子控件，如一個(gè)QComboxBox中有一個(gè)drop-down的按鈕。那么現(xiàn)在如果要設(shè)置QComboxBox的下拉按鈕的話，就可以這樣訪問(wèn)：

QComboBox::drop-down { image: url(dropdown.png)}其標(biāo)志是（::）

子控件選擇器是用位置的引用來(lái)代表一個(gè)元素，這個(gè)元素可以是一個(gè)單一控件或是另一個(gè)包含子控件的復(fù)合控件。使用subcontrol-origin屬性可以改變子控件的默認(rèn)放置位置，如：

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

如上語(yǔ)句可以用來(lái)改變drop-down的margin。

相對(duì)位置屬性可以用來(lái)改變子控件相對(duì)于最初位置的偏移量，如當(dāng)一個(gè)QCombox的drop-down按鈕被按下時(shí)，我們可以用一個(gè)內(nèi)部的小偏移量來(lái)表示被按下的效果，如下：

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

絕對(duì)位置屬性允許子控件改變自己的位置和大小而不受引用元素的控件。一但位置被設(shè)定了，這些子控件就可以被當(dāng)成一般的widget來(lái)對(duì)待，并且可以使用合模型。關(guān)于合模型可以參考下面。
 
如果你要查看Qt支持哪些子控件選擇器，可以參考：http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls-syntax.html

#p#

3、偽選擇器（pseudo-states）

偽選擇器以冒號(hào)（:）表示，與css里的偽選擇器相似，是基于控件的一些基本狀態(tài)來(lái)限定程序的規(guī)則，如hover規(guī)則表示鼠標(biāo)經(jīng)過(guò)控件時(shí)的狀態(tài)，而press表示按下按鈕時(shí)的狀態(tài)。如：

QPushButton:hover {  
       Background-color:red;  
} 

表示鼠標(biāo)經(jīng)過(guò)時(shí)QPushButton背景變紅。

Pseudo還支持否定符號(hào)(!)，如：

QRadioButton:!hover { color: red } 

表示沒(méi)有鼠標(biāo)移上QRadioButton時(shí)他顯示的顏色是red。

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

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

表示QPushButton在鼠標(biāo)移上卻沒(méi)有點(diǎn)擊時(shí)顯示blue字，但如果點(diǎn)擊的時(shí)候就不會(huì)顯示blue顏色了。

同樣可以和之前所講的子控件選擇器一起聯(lián)合使用，如：

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

與前面所講的一樣，偽選擇器，子控件選擇器等都是可以用逗號(hào)(,)分隔表示連續(xù)相同的設(shè)置的，如：

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

更多請(qǐng)參考：http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-pseudo-states

二、解決沖突

使用object name

在程序里面要先設(shè)置控件的，如：

btnOne = new QPushButton(centralWidget);  
btnOne->setObjectName(QString::fromUtf8("btnOneCh"));  

這樣，我們有了一個(gè)object name為btnOneCh的QPushButton，試驗(yàn)一下，使用指定object name的方式，如：

QPushButton#btnOneCh { color: red }  
QPushButton { color: white } 

可以看出，btnOncCh的color變成了red

使用偽選擇器，如hover，press，enabled等，如：按扭“1”是disable了的，QPushButton:!enabled {color: white}

所有的類(lèi)型選擇器都有一個(gè)共同的特性，就是如果有兩個(gè)屬性沖突了的話就會(huì)以***出現(xiàn)的一個(gè)為準(zhǔn),如：

QPushButton { color: red }  
QAbstractButton { color: gray} 

由于QPushButton為QAbstractButton的子類(lèi)，如果只設(shè)置QAbstractButton的可以想像結(jié)果是所有的QPushButton都為gray,如果只設(shè)置QPushButton的所有QPushButton都會(huì)為red，當(dāng)兩個(gè)都能設(shè)置起效的時(shí)候，以在文本上***出現(xiàn)的為準(zhǔn)，所以結(jié)果為Grey

當(dāng)然其中如果有#指定了object name，他所設(shè)置的優(yōu)先級(jí)是***的，具體規(guī)則可以參考：http://www.w3.org/TR/CSS2/cascade.html#specificity，

或是http://pepper.troll.no/s60prereleases/doc/stylesheet-syntax.html#conflict-resolution

QPushButton#btnOneCh { color: red }  
QPushButton { color: blue }  
QAbstractButton { color: gray} 

雖然QAbstractButton在***，但是之前有#btnOneCh指定了QPushButton“一”的color為red所以***顯示也是“一”為red。

#p#

三、級(jí)聯(lián)效應(yīng)

子類(lèi)可以繼承父類(lèi)的StyleSheet，但是如果子類(lèi)里面設(shè)置了StyleSheet與父類(lèi)里在設(shè)置的有沖突，那么當(dāng)然會(huì)優(yōu)先考慮子類(lèi)自己的，

同樣，如果在qApp時(shí)面設(shè)置了，但是在某一個(gè)特定控件里面也設(shè)置，如果有沖突，也是優(yōu)先控件自己的，例如，我在程序時(shí)面設(shè)置了：btnOneEn->setStyleSheet("QPushButton { color: red }");

而，當(dāng)我再設(shè)置qApp時(shí)，如果，將QPushButton的color設(shè)置成grey的，那么結(jié)果是對(duì)于btnOneEn這個(gè)QPushButton來(lái)說(shuō)他的顏色還是red。

這就是為什么這里設(shè)置為grey了btnOneEn卻還是red的。

如果我們對(duì)一個(gè)控件設(shè)置StyleSheet為：

QPushButton* myPushButton;  
myPushButton->setStyleSheet("*{ color: blue }"); 

其實(shí)他和設(shè)置為：myPushButton->setStyleSheet("color: blue");

效果相同，只是后一種設(shè)置不會(huì)對(duì)QPushButton的子類(lèi)產(chǎn)生作用，但***種卻會(huì)。

四、繼承性

與CSS不同的一點(diǎn)，在CSS box模型中，如果一個(gè)元素在別一元素的里面，那么里面的元素會(huì)自動(dòng)繼承外面元素的屬性，但QSS里面不會(huì)，如：

一個(gè)QPushButton如果放在一個(gè)QGroupBox里面，如果：qApp->setStyleSheet("QGroupBox{ color: red; }");

并不代表在QGroupBox里面的QPushButton也會(huì)有color:red的屬性，如果要想有的話要顯示寫(xiě)明，如：qApp->setStyleSheet("QGroupBox, QGroupBox*{ color: red; }");

或者在應(yīng)用程序里面也可以用QWidget::setFont等來(lái)設(shè)置到子控件的屬性。

五、Namespace沖突

類(lèi)型選擇器能夠使用到一個(gè)特定的類(lèi)型，如：

class MyPushButton : public QPushButton {  
      //...  
}  
qApp->setStyleSheet("MyPushButton { background: yellow; }"); 

因?yàn)镼SS使用QObject::className來(lái)判斷要賦與style sheet的控件類(lèi)型，如果一個(gè)用戶(hù)定義控件類(lèi)型在一個(gè)namespace里面的話，QObject::className會(huì)返回<namespace>::<classname> 的名字，這和子控件選擇器的語(yǔ)法相沖突，為了解決此問(wèn)題，使用“--”來(lái)代替“::”，比如：

namespace ns {  
      class MyPushButton : public QPushButton {  
          //...  
      }  
}  
qApp->setSytleSheet("ns--MyPushButton { background: yellow; }"); 

六、設(shè)置對(duì)像屬性

如果在程序里面使用Q_PROPERTY設(shè)置的屬性，可以在qss里面使用：qproperty-<property name>的形式來(lái)訪問(wèn)并設(shè)置值。如：

MyLabel { qproperty-pixmap: url(pixmap.png); }  
MyGroupBox{ qproperty-titleColor: rgb(100, 200, 100); }  
QPushButton { qproperty-iconSize: 20px 20px; } 

如果屬性引用到的是一個(gè)由Q_ENUMS申明的enum 時(shí)，要引用其屬性名字要用定義的名稱(chēng)而不是數(shù)字。

小結(jié)：詳解 QT 皮膚QSS編程的內(nèi)容介紹完了，希望本篇文章對(duì)你有所幫助。