Qt的皮膚設(shè)計(jì)（Style Sheet）

Qt的皮膚設(shè)計(jì)，也可以說(shuō)是對(duì)Qt應(yīng)用程序的界面美化，Qt使用了一種類(lèi)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對(duì)象字體顏色為紅色，當(dāng)鼠標(biāo)懸浮時(shí)為黃色

?

2.使用qss文件

步驟：

創(chuàng)建qss文檔，例：stylesheet.qss

根據(jù)qss語(yǔ)法，寫(xiě)自定義的內(nèi)容（詳見(jiàn)qss語(yǔ)法）

引入qss文件，使界面效果生效

QFile file("skin/clean.qss");//路徑為應(yīng)用程序所在目錄開(kāi)始

file.open(QFile::ReadOnly);

QTextStream filetext(&file);

QString stylesheet= filetext.readAll();

this->setStyleSheet(stylesheet);

?

二、qss語(yǔ)法

qss和css一樣有兩部分組成，選擇器和語(yǔ)句聲明（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類(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再setqss。類(lèi)選擇器：.QPushButton匹配所有QPushButton的實(shí)例，但不包含其子類(lèi)，這相當(dāng)于：*[class~="QPushButton"]? ???~=的意思是測(cè)試一個(gè)QStringList類(lèi)型的屬性是否包含給定的QStringID選擇器：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
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

常用的語(yǔ)句聲明

基本用法

QPushButton?{?color:?red?}

多個(gè)共享屬性(? ,? )

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

設(shè)置多個(gè)屬性（? ; ）

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 //邊框?yàn)?px并填充實(shí)心灰色 （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可不寫(xiě)（上右下左）

##設(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漸變點(diǎn)(0-1):顏色) ，y2:1顏色從上向下漸變*/

?