Qt的皮膚設(shè)計（Style Sheet）
Qt的皮膚設(shè)計，也可以說是對Qt應(yīng)用程序的界面美化，Qt使用了一種類CSS的樣式規(guī)則QSS。
?
一、Style Sheet的應(yīng)用
1.直接在程序代碼中設(shè)置樣式，利用setStyleSheet()方法
widget->setStyleSheet("color:red");???? //widget內(nèi)字體顏色為紅色
widget->->setStyleSheet(QPushButton{color:red} QPushButton:hove{color:yellow});?
?//widget內(nèi)的QPushButton對象字體顏色為紅色，當(dāng)鼠標(biāo)懸浮時為黃色
?
2.使用qss文件
步驟：
創(chuàng)建qss文檔，例：stylesheet.qss
根據(jù)qss語法，寫自定義的內(nèi)容（詳見qss語法）
引入qss文件，使界面效果生效
QFile file("skin/clean.qss");//路徑為應(yīng)用程序所在目錄開始
file.open(QFile::ReadOnly);
QTextStream filetext(&file);
QString stylesheet= filetext.readAll();
this->setStyleSheet(stylesheet);
?
二、qss語法
qss和css一樣有兩部分組成，選擇器和語句聲明（selector和declaration）
選擇器分為一般選擇器、子控件選擇器(輔助控制器)和偽選擇器（偽狀態(tài)）（下面為轉(zhuǎn)載，出處http://www.cnblogs.com/davesla/archive/2011/01/30/1947928.html）
1、 一般選擇器（selector）
Qt支持所有的CSS2定義的選擇器，其祥細(xì)內(nèi)容可以在w3c的網(wǎng)站上查找http://www.w3.org/TR/CSS2/selector.html ， 其中比較常用的selector類型有：
通用類型選擇器：* 會對所有控件有效果。 類型選擇器：QPushButton匹配所有QPushButton的實例和其子類的實例。屬性選擇器：QPushButton[flat=”false”]匹配所有QPushButton屬性flat為false的實例，屬性分為兩種，靜態(tài)的和動態(tài)的，靜態(tài)屬性可以通過Q_PROPERTY() 來指定，來動態(tài)屬性可以使用setProperty來指定，如：
QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty("mandatoryField", true);
如果在設(shè)置了qss后Qt屬性改變了，需要重新設(shè)置qss來使其生效，可以使用先unset再setqss。類選擇器：.QPushButton匹配所有QPushButton的實例，但不包含其子類，這相當(dāng)于：*[class~="QPushButton"]? ???~=的意思是測試一個QStringList類型的屬性是否包含給定的QStringID選擇器：QPushButton#okButton對應(yīng)Qt里面的object name設(shè)置，使用這條CSS之前要先設(shè)置對應(yīng)控件的object name為okButton，如：Ok->setObjectName(tr(“okButton”));后裔選擇器：QDialog QPushButton匹配所有為QDialog后裔（包含兒子，與兒子的兒子的遞歸）為QPushButton的實例子選擇器：QDialog > QPushButton匹配所有的QDialog直接子類QPushButton的實例，不包含兒子的兒子的遞歸。
2、子控件選擇器
對于復(fù)雜的控件，可能會在其中包含其他子控件，如一個QComboxBox中有一個drop-down的按鈕。那么現(xiàn)在如果要設(shè)置QComboxBox的下拉按鈕的話，就可以這樣訪問：
QComboBox::drop-down { image: url(dropdown.png) }其標(biāo)志是（::） 子控件選擇器是用位置的引用來代表一個元素，這個元素可以是一個單一控件或是另一個包含子控件的復(fù)合控件。使用subcontrol-origin屬性可以改變子控件的默認(rèn)放置位置，如：
QComboBox {
? ?? ? margin-right: 20px;
}
QComboBox::drop-down {
? ?? ? subcontrol-origin: margin;
}
如上語句可以用來改變drop-down的margin。 相對位置屬性可以用來改變子控件相對于最初位置的偏移量，如當(dāng)一個QCombox的drop-down按鈕被按下時，我們可以用一個內(nèi)部的小偏移量來表示被按下的效果，如下：
QComboBox::down-arrow {
? ?? ? image: url(down_arrow.png);
}
QComboBox::down-arrow:pressed {
? ?? ? position: relative;
? ?? ? top: 1px; left: 1px;
} 絕對位置屬性允許子控件改變自己的位置和大小而不受引用元素的控件。一但位置被設(shè)定了，這些子控件就可以被當(dāng)成一般的widget來對待，并且可以使用合模型。關(guān)于合模型可以參考下面。
如果你要查看Qt支持哪些子控件選擇器，可以參考：http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls-syntax.html
3、偽選擇器（pseudo-states）
偽選擇器以冒號（:）表示，與css里的偽選擇器相似，是基于控件的一些基本狀態(tài)來限定程序的規(guī)則，如hover規(guī)則表示鼠標(biāo)經(jīng)過控件時的狀態(tài)，而press表示按下按鈕時的狀態(tài)。如：
QPushButton:hover {
? ?? ? Background-color:red;
}
表示鼠標(biāo)經(jīng)過時QPushButton背景變紅。 Pseudo還支持否定符號(!)，如：
QRadioButton:!hover { color: red }
表示沒有鼠標(biāo)移上QRadioButton時他顯示的顏色是red。 Pseudo可以被串連在一起，比如：
QPushButton:hover:!pressed { color: blue; }
表示QPushButton在鼠標(biāo)移上卻沒有點擊時顯示blue字，但如果點擊的時候就不會顯示blue顏色了。 同樣可以和之前所講的子控件選擇器一起聯(lián)合使用，如：
QSpinBox::down-button:hover { image: url(btn-combobox-press.bmp) } 與前面所講的一樣，偽選擇器，子控件選擇器等都是可以用逗號(,)分隔表示連續(xù)相同的設(shè)置的，如：
QPushButton:hover,QSpinBox::down-button, QCheckBox:checked { color: white ;image: url(btn-combobox-press.bmp);} 表示如下更多請參考：http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-pseudo-states
常用的語句聲明
基本用法
QPushButton?{?color:?red?}多個共享屬性(? ,? )
?QPushButton,?QLineEdit,?QComboBox?{?color:?red?}設(shè)置多個屬性（? ; ）
QPushButton?{?color:?red;?background-color:?white?}?
常用的屬性
color:red //字體顏色為紅色
background:yellow //背景顏色為黃色
background-color:yellow //使用rgb(255,0,0)? rgba（255，0，0，50%）最后為透明度 #ffffff顏色RGB值
background-image:url(images/top.jpg);//背景不隨窗口伸縮
border:1px solid gray //邊框為1px并填充實心灰色 （groove凹槽）
border-top??boder-botom……
boder-color
border-radius:10px //邊框圓角半徑為10px
border-top-left-radius
border-top-rightt-radius
……
border-image:url(images/top.jpg);//背景圖片隨窗口變化
padding：2px 4px //設(shè)置內(nèi)邊框?qū)傩陨蟽?nèi)邊距2px，右內(nèi)邊距為4px，下為0，左為0可不寫（上右下左）
##設(shè)置背景顏色漸變
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #C7F8FA); /*背景顏色：顏色漸變(x1右,y1下,x2左,y2上,stop漸變點(0-1):顏色) ，y2:1顏色從上向下漸變*/
?
下載文檔
