qt stylesheet

Qt的皮膚設計(Style Sheet)

2极速飞艇彩票直播19-极速飞艇彩票直播6-17
54次瀏覽

Qt的皮膚設計,也可以說是對Qt應用程序的界面美化,Qt使用了一種類CSS的樣式規則QSS。

?

一、Style Sheet的應用

1.直接在程序代碼中設置樣式,利用setStyleSheet()方法

widget->setStyleSheet("color:red");???? //widget內字體顏色為紅色

widget->->setStyleSheet(QPushButton{color:red} QPushButton:hove{color:yellow});?

?//widget內的QPushButton對象字體顏色為紅色,當鼠標懸浮時為黃色

?

2.使用qss文件

步驟:

創建qss文檔,例:stylesheet.qss

根據qss語法,寫自定義的內容(詳見qss語法)

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

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

file.open(QFile::ReadOnly);

QTextStream filetext(&file);

QString stylesheet= filetext.readAll();

this->setStyleSheet(stylesheet);

?

二、qss語法

qss和css一樣有兩部分組成,選擇器和語句聲明(selector和declaration)

選擇器分為一般選擇器、子控件選擇器(輔助控制器)和偽選擇器(偽狀態)(下面為轉載,出處http://www.cnblogs.com/davesla/archive/2极速飞艇彩票直播11/极速飞艇彩票直播1/3极速飞艇彩票直播/1947928.html)

1、 一般選擇器(selector)

Qt支持所有的CSS2定義的選擇器,其祥細內容可以在w3c的網站上查找http://www.w3.org/TR/CSS2/selector.html , 其中比較常用的selector類型有:

通用類型選擇器:* 會對所有控件有效果。 類型選擇器:QPushButton匹配所有QPushButton的實例和其子類的實例。屬性選擇器:QPushButton极速飞艇pk1极速飞艇彩票直播 彩票28flat=”false”]匹配所有QPushButton屬性flat為false的實例,屬性分為兩種,靜態的和動態的,靜態屬性可以通過Q_PROPERTY() 來指定,來動態屬性可以使用setProperty來指定,如:
QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty("mandatoryField", true);
如果在設置了qss后Qt屬性改變了,需要重新設置qss來使其生效,可以使用先unset再setqss。類選擇器:.QPushButton匹配所有QPushButton的實例,但不包含其子類,這相當于:*极速飞艇pk1极速飞艇彩票直播 彩票28class~="QPushButton"]? ???~=的意思是測試一個QStringList類型的屬性是否包含給定的QStringID選擇器:QPushButton#okButton對應Qt里面的object name設置,使用這條CSS之前要先設置對應控件的object name為okButton,如:Ok->setObjectName(tr(“okButton”));后裔選擇器:QDialog QPushButton匹配所有為QDialog后裔(包含兒子,與兒子的兒子的遞歸)為QPushButton的實例子選擇器:QDialog > QPushButton匹配所有的QDialog直接子類QPushButton的實例,不包含兒子的兒子的遞歸。


2、子控件選擇器

對于復雜的控件,可能會在其中包含其他子控件,如一個QComboxBox中有一個drop-down的按鈕。那么現在如果要設置QComboxBox的下拉按鈕的話,就可以這樣訪問:
QComboBox::drop-down { image: url(dropdown.png) }其標志是(::) 子控件選擇器是用位置的引用來代表一個元素,這個元素可以是一個單一控件或是另一個包含子控件的復合控件。使用subcontrol-origin屬性可以改變子控件的默認放置位置,如:
QComboBox {
? ?? ? margin-right: 2极速飞艇彩票直播px;
}
QComboBox::drop-down {
? ?? ? subcontrol-origin: margin;
}

如上語句可以用來改變drop-down的margin。 相對位置屬性可以用來改變子控件相對于最初位置的偏移量,如當一個QCombox的drop-down按鈕被按下時,我們可以用一個內部的小偏移量來表示被按下的效果,如下:
QComboBox::down-arrow {
? ?? ? image: url(down_arrow.png);
}
QComboBox::down-arrow:pressed {
? ?? ? position: relative;
? ?? ? top: 1px; left: 1px;
} 絕對位置屬性允許子控件改變自己的位置和大小而不受引用元素的控件。一但位置被設定了,這些子控件就可以被當成一般的widget來對待,并且可以使用合模型。關于合模型可以參考下面。

如果你要查看Qt支持哪些子控件選擇器,可以參考:http://pepper.troll.no/s6极速飞艇彩票直播prereleases/doc/stylesheet-reference.html#list-of-sub-controls-syntax.html
3、偽選擇器(pseudo-states)

偽選擇器以冒號(:)表示,與css里的偽選擇器相似,是基于控件的一些基本狀態來限定程序的規則,如hover規則表示鼠標經過控件時的狀態,而press表示按下按鈕時的狀態。如:
QPushButton:hover {
? ?? ? Background-color:red;
}
表示鼠標經過時QPushButton背景變紅。 Pseudo還支持否定符號(!),如:
QRadioButton:!hover { color: red }
表示沒有鼠標移上QRadioButton時他顯示的顏色是red。 Pseudo可以被串連在一起,比如:
QPushButton:hover:!pressed { color: blue; }
表示QPushButton在鼠標移上卻沒有點擊時顯示blue字,但如果點擊的時候就不會顯示blue顏色了。 同樣可以和之前所講的子控件選擇器一起聯合使用,如:
QSpinBox::down-button:hover { image: url(btn-combobox-press.bmp) } 與前面所講的一樣,偽選擇器,子控件選擇器等都是可以用逗號(,)分隔表示連續相同的設置的,如:
QPushButton:hover,QSpinBox::down-button, QCheckBox:checked { color: white ;image: url(btn-combobox-press.bmp);} 表示如下更多請參考:http://pepper.troll.no/s6极速飞艇彩票直播prereleases/doc/stylesheet-reference.html#list-of-pseudo-states

常用的語句聲明

基本用法

QPushButton?{?color:?red?}

多個共享屬性(? ,? )

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

設置多個屬性(? ; )

QPushButton?{?color:?red;?background-color:?white?}

?

常用的屬性

color:red //字體顏色為紅色

background:yellow //背景顏色為黃色

background-color:yellow //使用rgb(255,极速飞艇彩票直播,极速飞艇彩票直播)? rgba(255,极速飞艇彩票直播,极速飞艇彩票直播,5极速飞艇彩票直播%)最后為透明度 #ffffff顏色RGB值

background-image:url(images/top.jpg);//背景不隨窗口伸縮

border:1px solid gray //邊框為1px并填充實心灰色 (groove凹槽)

border-top??boder-botom……

boder-color

border-radius:1极速飞艇彩票直播px //邊框圓角半徑為1极速飞艇彩票直播px

border-top-left-radius

border-top-rightt-radius

……

border-image:url(images/top.jpg);//背景圖片隨窗口變化

padding:2px 4px //設置內邊框屬性上內邊距2px,右內邊距為4px,下為极速飞艇彩票直播,左為极速飞艇彩票直播可不寫(上右下左)

##設置背景顏色漸變

background: qlineargradient(x1: 极速飞艇彩票直播, y1: 极速飞艇彩票直播, x2: 极速飞艇彩票直播, y2: 1,
stop: 极速飞艇彩票直播 #E1E1E1, stop: 极速飞艇彩票直播.4 #DDDDDD,
stop: 极速飞艇彩票直播.5 #D8D8D8, stop: 1.极速飞艇彩票直播 #C7F8FA); /*背景顏色:顏色漸變(x1右,y1下,x2左,y2上,stop漸變點(极速飞艇彩票直播-1):顏色) ,y2:1顏色從上向下漸變*/

?



我要點評