Qss语法及应用
1、何為Qt樣式表
Qt樣式表的思想很大程度上是來(lái)自于HTML的層疊式樣式表(CSS), 通過(guò)調(diào)用QWidget::setStyleSheet()或QApplication::setStyleSheet(), 你可以為一個(gè)獨(dú)立的子部件、整個(gè)窗口,甚至是整個(gè)個(gè)應(yīng)用程序指定一個(gè)樣式表。
樣式表是通過(guò)QStyle的一個(gè)叫做QStyleSheetStyle的特殊子類來(lái)實(shí)現(xiàn)的。 這個(gè)特殊的子類實(shí)際上是其他的系統(tǒng)特定風(fēng)格類的包裹類, 它會(huì)把通過(guò)樣式表指定的自定義外觀風(fēng)格應(yīng)用在底層的系統(tǒng)特定風(fēng)格之上。
Qt的help文檔中有例子來(lái)幫助學(xué)習(xí)樣式表,喜歡參見(jiàn)英文示例的可參看Qt文檔,在幫助文檔中搜索“stylesheet”,可找到比較全的幫助文檔,注意,搜索一定要全小寫。
2、樣式表語(yǔ)法基礎(chǔ)
Qt樣式表與CSS的語(yǔ)法規(guī)則幾乎完全相同,如果你已經(jīng)了解了CSS,完全可以跳過(guò)本節(jié)。
qss由一個(gè)selector與一個(gè)declaration組成,selector指定了是對(duì)哪一個(gè)控件產(chǎn)生效果,而declaration才是真正的產(chǎn)生作用的語(yǔ)句。如:QPushButton { color: red }。QPushButton指定了是對(duì)所有的QPushButton或是其子類控件(如用戶定義的MyPushButton)產(chǎn)生影響,而color:red表明所有的受影響控件的前景色都為red。
除了“類名”,“對(duì)象名”,“Qt屬性名”這三樣?xùn)|西是大小寫敏感的外其他的東西都是大小寫不敏感的,如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包含在一起。
2.1一般選擇器
Qt支持所有的CSS2定義的選擇器, 其中比較常用的selector類型有:
a) 通用類型選擇器:* 會(huì)對(duì)所有控件有效果。
b) 類型選擇器:QPushButton匹配所有QPushButton的實(shí)例和其子類的實(shí)例。
c) 屬性選擇器:QPushButton[flat=”false”]匹配所有QPushButton屬性flat為false的實(shí)例,屬性分為兩種,靜態(tài)的和動(dòng)態(tài)的,靜態(tài)屬性可以通過(guò)Q_PROPERTY() 來(lái)指定,動(dòng)態(tài)屬性可以使用setProperty來(lái)指定,如:
QLineEdit *nameEdit = newQLineEdit(this);nameEdit->setProperty("mandatoryField",true);如果在設(shè)置了qss后Qt屬性改變了,需要重新設(shè)置qss來(lái)使其生效,可以使用先unset再set qss。
ptb->style()->unpolish(ptb); ptb->style()->polish(ptb); ptb->update ();d) 類選擇器:.QPushButton匹配所有QPushButton的實(shí)例,但不包含其子類,這相當(dāng)于:*[class~=“QPushButton”] ~=的意思是測(cè)試一個(gè)QStringList類型的屬性是否包含給定的QString
e) ID選擇器:QPushButton#okButton對(duì)應(yīng)Qt里面的objectname設(shè)置,使用這條QSS之前要先設(shè)置對(duì)應(yīng)控件的objectname為okButton,如:Ok->setObjectName(tr(“okButton”));
f) 后裔選擇器:QDialog QPushButton匹配所有為QDialog后裔(包含兒子,與兒子的兒子的遞歸)的QPushButton的實(shí)例 ,如圖1所示。
QFrame的Qss語(yǔ)句為:
QFrame QPushButton{background-color: qlineargradient(spread:pad, x1:0,
y1:0, x2:1, y2:0, stop:0 rgba(255,200, 200, 255), stop:1 rgba(255,
255, 100, 255));}
左圖中QPushButton不是QFrame的直接后裔,但QFrame有關(guān)其QPushButton后裔的設(shè)定依然起作用
圖1后裔選擇器實(shí)例
g) 子選擇器:QDialog >QPushButton匹配所有的QDialog直接兒子的QPushButton的實(shí)例,不包含兒子的兒子的遞歸,如圖2所示。
QFrame的Qss語(yǔ)句為:
QFrame>QPushButton{background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0rgba(255, 200, 200, 255), stop:1 rgba(255, 255, 100, 255));}
左圖中QPushButton不是QFrame的直接后裔
圖2子選擇器示例
2.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 {undefined
margin-right: 20px;}
QComboBox::drop-down {undefined
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 {undefined
image:url(down_arrow.png);}
QComboBox::down-arrow:pressed {undefined
position:relative;top:1px; left: 1px;}
絕對(duì)位置屬性允許子控件改變自己的位置和大小而不受引用元素的控件。一但位置被設(shè)定了,這些子控件就可以被當(dāng)成一般的widget來(lái)對(duì)待,并且可以使用合模型。
有關(guān)相對(duì)位置和絕對(duì)位置的定義參見(jiàn)后面的論述。
如果要查看Qt支持哪些子控件選擇器,可以參考
點(diǎn)擊打開(kāi)鏈接http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls-syntax.html
2.3偽選擇器
a)偽選擇器以冒號(hào)(:)表示(注意和上述子控件的區(qū)別,子控件(:😃),與css里的偽選擇器相似,是基于控件的一些基本狀態(tài)來(lái)限定程序的規(guī)則,如hover表示鼠標(biāo)經(jīng)過(guò)控件時(shí)的狀態(tài),而press表示按下按鈕時(shí)的狀態(tài)。如:
QPushButton:hover
{undefined
Background-color:red;}
表示鼠標(biāo)經(jīng)過(guò)時(shí)QPushButton背景變紅。
Pseudo還支持否定符號(hào)(!),如:
QRadioButton:!hover { color: red}
表示沒(méi)有鼠標(biāo)移上QRadioButton時(shí)他顯示的顏色是red。
b)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
2.4解決沖突
a) 使用object name
在程序里面要先設(shè)置控件的對(duì)象名稱,如:
btnOne = newQPushButton(centralWidget);
btnOne->setObjectName(QString::fromUtf8(“btnOneCh”));
這樣,我們有了一個(gè)objectname為btnOneCh的QPushButton,試驗(yàn)一下,使用指定object name的方式,如:
QPushButton#btnOneCh { color: red} QPushButton { color: white }
可以看出,btnOncCh的color變成了red
b) 使用偽選擇器
偽選擇器主要有hover、press等,如“按扭1”是disable的,QPushButton:!enabled {color:white};
c) 先后順序
所有的類型選擇器都有一個(gè)共同的特性,就是如果有兩個(gè)屬性沖突了的話就會(huì)以最后出現(xiàn)的一個(gè)為準(zhǔn),如:
QPushButton { color: red }
QAbstractButton { color: gray }
由于QPushButton為QAbstractButton的子類,如果只設(shè)置QAbstractButton的可以想像結(jié)果是所有的 QPushButton都為gray, 如果只設(shè)置QPushButton的所有QPushButton都會(huì)為red,當(dāng)兩個(gè)都能設(shè)置起效的時(shí)候,以在文本上最后出現(xiàn)的為準(zhǔn),所以結(jié)果為Grey
d) 指定ID(#object name)
當(dāng)然其中如果有#指定了object name,他所設(shè)置的優(yōu)先級(jí)是最大的,
QPushButton#btnOneCh { color: red }QPushButton { color: blue }QAbstractButton { color: gray }雖然QAbstractButton在最后,但是之前有#btnOneCh指定了QPushButton“一”的color為red所以最后顯示也是“一”為red。
e) 優(yōu)先級(jí)計(jì)算方法
解決沖突的優(yōu)先級(jí)計(jì)算方法如下,這里不再給出中文:
count the number of ID attributes in the selector (= a)
count the number of other attributes and pseudo-classes in the selector (= b)
count the number of element names in the selector (= c)
ignore pseudo-elements [i.e., subcontrols].
Concatenating thethree numbers a-b-c (in a number system with a large base) gives thespecificity.
Some examples:
{} /* a=0 b=0 c=0 -> specificity = 0 / LI
{} / a=0 b=0 c=1 -> specificity = 1 / UL LI {} / a=0
b=0 c=2 -> specificity = 2 / UL OL+LI {} / a=0 b=0 c=3 ->
specificity = 3 */ H1 + [REL=up]{} / a=0 b=1 c=1 -> specificity
= 11 / UL OL LI.red {} / a=0 b=1 c=3 -> specificity = 13 / LI.red.level {} / a=0 b=2 c=1 -> specificity = 21 / #x34y
{} / a=1 b=0 c=0 -> specificity = 100 */
2.5級(jí)聯(lián)效應(yīng)
a) 子類父類級(jí)聯(lián)
子類可以繼承父類的StyleSheet,但是如果子類里面設(shè)置了StyleSheet與父類里在設(shè)置的有沖突,那么當(dāng)然會(huì)優(yōu)先考慮子類自己的,同樣,如果在qApp里面面設(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的。
b) 子類通用級(jí)聯(lián)
如果我們對(duì)一個(gè)控件設(shè)置StyleSheet為:
QPushButton* myPushButton;
myPushButton->setStyleSheet("*{ color: blue }");
其實(shí)他和設(shè)置為:myPushButton->setStyleSheet(“color:blue”);效果相同,只是后一種設(shè)置不會(huì)對(duì)QPushButton的子類產(chǎn)生作用,但第一種卻會(huì)影響到其子類。
2.6包含繼承性
與CSS不同的一點(diǎn),在CSS box模型中,如果一個(gè)元素在別一元素的里面,那么里面的元素會(huì)自動(dòng)繼承外面元素的屬性,但QSS里面不會(huì),如:一個(gè)QPushButton如果放在一個(gè)QGroupBox里面,其Qss語(yǔ)句如下:
qApp->setStyleSheet("QGroupBox{ color: red; } ");
并不代表在QGroupBox里面的QPushButton也會(huì)有color:red的屬性,如果要想有的話要顯示寫明,如:qApp->setStyleSheet(“QGroupBox,QGroupBox * { color: red; }”);
或者在應(yīng)用程序里面也可以用QWidget::setFont等來(lái)設(shè)置到子控件的屬性。
注意,這里的繼承性要和“2.5”中的級(jí)聯(lián)效應(yīng)區(qū)分開(kāi),例如圖3的例子:
圖3 級(jí)聯(lián)效應(yīng)和繼承性
如上圖,其QFrame的樣式表代碼如下:
QFrame{undefinedborder-color:red;border-width:2;border-style:solid;background-color:qlineargradient(spread:pad, x1:0.477273, y1:0, x2:0.489, y2:1, stop:0 rgba(255,255, 255, 255), stop:0.494318 rgba(164, 255, 242, 255),stop:1 rgba(255, 255, 255, 255));}而QFrame里面的QGroupBox和QLabel并沒(méi)有專用的style,從上圖中看出,其中QGroupBox的樣式為默認(rèn)樣式,而QLabel的樣式和QFrame的樣式相同,其原因是在Qt中,QLabel是繼承于QFrame的,也就是說(shuō)QLabel是QFrame的子類,所以QLabel的樣式和QFame保持一致,而若將QLabel置于QFame之外,QLabel的樣式一樣會(huì)和QFrame保持一致,因?yàn)槎呤歉割惡妥宇惖年P(guān)系,不僅僅是圖中的包含關(guān)系;
而QGroupBox的樣式保持默認(rèn)樣式,原因是QGroupBox不是QFrame的子類,并且Qss沒(méi)有自動(dòng)繼承的屬性。
2.7Namespace沖突
類型選擇器能夠使用到一個(gè)特定的類型,如:
class MyPushButton : publicQPushButton
{undefined
// ...}
qApp->setStyleSheet(“MyPushButton{ background: yellow; }”);
因?yàn)镼SS使用QObject::className來(lái)判斷要賦與style sheet的控件類型,如果一個(gè)用戶定義控件類型在一個(gè)namespace里面的話,QObject::className會(huì)返回::的名字,這和子控件選擇器的語(yǔ)法相沖突,為了解決此問(wèn)題,使用“–”來(lái)代替“::”,比如:
namespace ns
{undefined
classMyPushButton : public QPushButton{undefined// ...}}
qApp->setSytleSheet(“ns–MyPushButton{ background: yellow; }”);
2.8設(shè)置對(duì)象屬性
如果在程序里面使用Q_PROPERT(有關(guān)Q_PROPERT的具體應(yīng)用,參見(jiàn)附錄A)設(shè)置的屬性,可以在qss里面使用:qproperty-的形式來(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í),要引用其屬性名字要用定義的名稱而不是數(shù)字。————————————————
版權(quán)聲明:本文為CSDN博主「guoyanbo_81」的原創(chuàng)文章,遵循CC 4.0 BY-SA版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/guoyanbo_81/article/details/80461462
總結(jié)
- 上一篇: 机器学习极简入门课
- 下一篇: 一款方便好用的免费截图神器