QT之樣式表(樣式表規則以及使用大全)


 

1、QT樣式表可以讓你自定義任何一個QT控件的樣式包括顏色、邊框、背景等等(你想的到樣式都可以),Qt樣式表的概念、術語和語法與HTML的CSS樣式表類似。

 

2、樣式表是文本規范,

(1) QApplication::setStyleSheet()在整個應用程序上設置,一般在main()函數中:

QFile file(":/qss/abc.qss"); //工程控件樣式表需要在qss/abc.qss里面

file.open(QFile::ReadOnly);

styleSheet = QLatin1String(file.readAll());

qApp->setStyleSheet(styleSheet);

file.close();

(2)一般形式也可以使用QWidget::setStyleSheet()在特定小部件(及其子部件)上設置。

例如:

QPushButton *btn = new QPushButton();

Btn-> setStyleSheet(“color : red”);//表示字體顏色為紅色

如果在不同級別上設置了多個樣式表,Qt將從所有設置的樣式表派生有效樣式表。這稱為級聯。

(3)在QT Designer 中設置

例如:在要修改樣式的控件右擊->改變樣式表

針對單個控件按鈕

 

也可也在頂級窗口右擊控件->改變樣式表

針對該窗口中所有的QLineEdit

 

 

 

二、樣式表語法

 

樣式的規則1:樣式規則由選擇器和聲明組成。選擇器指定哪些小部件受規則影響;聲明指定應該在小部件上設置哪些屬性。

 

如:QPushButton { color : red }。

 

其中QPushButton就是選擇器,'{ color : red }'是聲明部分。 color就是屬性,red就是指定給該屬性的值。

 

該語句的意思是QPushButton及其子類的前景色是紅色。

 

注意:Qt樣式表通常不區分大小寫,除了類名、對象名和Qt屬性名。

 

樣式的規則2:可以為同一個聲明指定多個選擇器,使用逗號(,)分隔選擇器。

 

QPushButton, QLineEdit, QComboBox {color: red}

 

樣式的規則3:聲明多個屬性。在{}里面,用 ; 分割

 

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

 

樣式的規則4:選擇器

(1)通用選擇器

格式

* { 屬性: 值; }

通用選擇器用( * )來表示, 它表示匹配程序中所有的 widget.

例如:*{font: normal 20px “微軟雅黑”;}

這條語句表示將程序中所有 widget 的字體大小都設置為 20px 大小, 字體采用微軟雅黑.

 

(2)類型選擇器

格式

類名 { 屬性: 值; }

類名即 Widget 類名, 由 QObject :: metaObject() :: className()獲取, 類型選擇器匹

配所有該類以及該類的派生類的對象.例如:

QPushButton{ color: blue; }

這條語句表示, 程序中所有的 QPushButton 類和它的派生類的對象, 它們的前景色(文字

顏色)被設置為藍色.

 

(3)類選擇器

格式

.類名 { 屬性: 值; }

這里的類名與類型選擇器中的類名一樣, 不同的是, 類選擇器的類名前面有一個( . ), 這種

選擇器只會匹配該類的所有對象, 而不會匹配其派生類的對象.例如:

.QPushButton{ color: blue; }

 

(4)ID 選擇器

格式

#id{ 屬性: 值; }

這里的 id 指的是 objectName, 每個 QObject 類及其派生類都有的一個屬性, “#” + objectName

構成了我們的 ID 選擇器, 它匹配所有 objectName 為 ID 選擇器所指定的名稱的對象, 為其設

置樣式. 例如:

#button_1{ color: red; }

 

(5)后代選擇器

格式

選擇器 1 選擇器 2{ 屬性: 值; }

這個選擇器表示: 在選擇器 1 匹配的所有對象中, 找到選擇器 2 所匹配的所有后代對象, 並 給它們設置樣式.

注意點:

1. 后代選擇器必須用空格隔開每個選擇器

2. 后代選擇器可以通過空格一直延續下去, 例如:

選擇器 1 選擇器 2 選擇器 3 … 選擇器 N{ 屬性: 值; }

3. 顧名思義, 后代選擇器不僅包含”兒子”, 還包含”孫子”, “重孫子”等, 一般來說, 只要 B 控

件顯示在 A 控件上, 那么 B 控件就是 A 控件的后代.

4. 后代選擇器不僅可以使用類型選擇器, 還可以使用類選擇器, id 選擇器等.

5. Qt 中, 各控件的父子關系:

通過簡單的驗證, 各控件的父子關系並非我們在創建對象時所指定的那樣, 實際父子關

系取決於如何布局.

例如:

BaseDialog QPushButton{

min-width: 120px;

min-height: 40px;

max-width: 120px;

max-height: 40px;

font-size: 20px;

padding: 0px;

}

 

(6)子元素選擇器

格式

選擇器 1 >選擇器 2 { 屬性: 值; }

子元素選擇器表示找到指定選擇器所匹配的對象中的所有特定直接子元素然后設置屬性,

即找到選擇器 1 匹配到的對象中的被選擇器 2 匹配盜的直接子元素然后設置屬性

注意點

1. 子元素選擇器必須用”>”連接, “>”兩邊有沒有空格都可以, 但是不建議寫空格, 因為會與

后代選擇器的連接符混淆.

2. 子元素選擇器只會查找”兒子”, 不會查找其他后代.

3. 子元素選擇器不僅可以使用類型選擇器, 還可以使用類選擇器,id 等選擇器

4. 子元素選擇器不能通過”>”一直延續下去, 只能有一個”>”

5. 由於 Qt 中有繼承關系的 Widgets 較多, 在使用子元素選擇器時, 請特別注意繼承關系,

比如我只想選中 QGroupBox 中的 QPushButton, 那么我即可以寫成

 

QWidget >QPushButton{color: red;} ○1

也可以寫成

QGroupBox>QPushButton{color: red;} ○2

 

這是因為 QGroupBox 是 QWidget 的派生類, 類型選擇器 QWidget 會選中所有它的派生

類對象,這些對象中包括 QGroupBox, 因此寫法○1 會將所有的 QPushButton 的前景

色設置為紅色.

鑒於此種情況, 我推薦在使用子元素選擇器時, 使用類選擇器替代類型選擇

一般用法

子元素選擇器一般用於一些特定布局條件中的控件, 例如我想給直接布局在 QGroupBox 的

QCheckBox 設置一些特定屬性, 那么可以這樣做:

.QGroupBox > .QCheckBox{

color: blue;

}      

 

(7)屬性選擇器

格式

[attribute=value]{ 屬性: 值; }

[attribute|=value]{ 屬性:值; }

[attribute~=value]{ 屬性:值; }

attribute=value 表示匹配有特定屬性 attribute, 並且值為 value 的所有控件, 然后設置樣式;

attribute|=value 表示匹配有特定屬性 attribute, 並且值以 value 開頭的所有控件, 然后設置樣式;

attribute~=value 表示匹配有特定屬性 attribute, 並且值包含 value 的所有控件, 然后設置樣 式;

注意點

1. attribute|=value 表示 attribute 屬性的值以 value 開頭, 無論 value 后面還有沒有值, 或者 value 后面是什么, 均能匹配到, 例如:

[objectName|="button"]{ color: red; }

這表示將 objectName 屬性以 button 開頭的所有控件的前景色設置為紅色.

attribute~=value 表示 attribute 屬性的值中包含 value, 這里要注意的是:value 必須是獨

立的單詞, 也就是包含 value 並且 value 是被空格隔開的, 例如:

[objectName~="button"]{ color: red; }

 

(9)並集選擇器

格式

選擇器 1,選擇器 2,選擇器 3{ 屬性: 值; }

並集選擇器表示, 將每個單獨選擇器匹配到的控件放在同一個結果集中, 並給結果集中的每

個控件都設置聲明語句中的樣式.

注意點

1. 並集選擇器必須使用”,”來連接不同的選擇器

2. 並集選擇器可以使用類選擇器, 類型選擇器, id 選擇器, 屬性選擇器等.

一般用法

主要用於給具有相同屬性並且外觀相似的的控件設置樣式, 例如:

.QLineEdit, .QComboBox{

border: 1px solid gray;

background-color:white;}

 

(10)偽類選擇器

格式

類型選擇器:狀態{ 屬性: 值; }

類選擇器:狀態{ 屬性: 值; }

表示對類型選擇器或類選擇器指定的所有控件設置它在指定狀態時的樣式.

選擇器也許會包含基於 widget 的 state 的程序限制規則的偽狀態。偽狀態以冒號(:)作為分隔 緊跟着選擇器。舉個例子,下面的規則在鼠標懸浮在 QPushButton 的上方時生效:

QPushButton:hover { color: white }

偽狀態可以使用感嘆號進行取反,下面一條規則在鼠標沒有懸浮在 QRadioButton 上方時生

效:

QRadioButton:!hover { color: red }

偽狀態可以鏈接,在這樣的情況下,隱式地包含了邏輯與。

舉個例子,下面一條規則在鼠標

懸浮到一個已 check 的 QCheckBox 上時生效:

QCheckBox:hover:checked { color: white }

偽狀態的取反也可以出現在偽狀態鏈中,舉個例子,下面的規則在鼠標懸浮到一個沒有被

press 的 QPushButton 上時生效:

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

如果有需要,可以使用逗號來表示邏輯或, 即並集選擇器

QCheckBox:hover, QCheckBox:checked { color: white }

偽狀態可以與 subcontrol 組合使用,舉個例子:

QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

 

                  樣式的規則5:控件中的子控件的樣式設置。

對於一個復雜的控件,很有必要去控制這個控件的子控件。比如QComboBox的下拉按鈕和QSpinBox的上下調整大小的箭頭按鈕。選擇器可以包含子控件,這些子控件可以將規則的應用程序限制為特定的小部件子控件。如:

 

QComboBox::drop-down { image: url(dropdown.png) }。指定了下拉按鈕的填充圖片

 

樣式的規則6:偽狀態。選擇器可能包含偽狀態,這些偽狀態表示根據小部件的狀態限制規則的應用。偽狀態出現在選擇器的末尾,中間有一個冒號(:)。如:

 

QPushButton:hover { color: white } 表示當鼠標懸停時顏色為白色

偽狀態可以使用感嘆號!操作符進行否定。如:

QRadioButton:!hover { color: red } 表示當鼠標不是懸停時顏色為紅色

 

還可以有多個偽狀態一起使用:

QCheckBox:hover:checked { color: white } 表示 當鼠標懸停 並且 該復選框被選中的時候顏色為白色

QCheckBox:hover, QCheckBox:checked { color: white } 表示當鼠標懸停或着被選中的時候 顏色為白色

 

樣式的規則7:優先順序的確定。

為什么要有優先級?

當一個控件被多個選擇器選中並且設置了相同的屬性(值不同)時, 不能僅僅根據設置樣

式語句出現的先后順序進行層疊, 那么控件的樣式如何確定,於是引出了選擇器的優先級問

題。

一般通過下面兩步進行選擇器優先級的判定.

第一步: 設置方式所產生的優先級問題

在 CSS 中, 有如下層疊優先級規則:

內聯樣式 > 內部樣式 > 外部樣式 > 瀏覽器缺省

而在 Qss 中, 這個規則表現為:

給控件直接設置的樣式 > QApplication 設置的樣式

就是說, 調用控件的 setStylesheet 設置的樣式的優先級永遠高於給 QApplication 設置的樣

式, 即使 QApplication 中的選擇器優先級更高

第二步:樣式表本身的優先級問題

當設置方式相同,且幾個樣式規則為同一個控件的同一個屬性指定不同的值時,就產生了沖

突.此時, 如何層疊就由選擇器的優先級來確定.

一般而言,選擇器越特殊,它的優先級越高。也就是選擇器指向的越准確,它的優先級就越

高。

優先級判斷的三種方式

1. 間接選中

間接選中就是指繼承, 也就是在 Qt5.7 及以上版本, 程序中給 QApplication 對象設置了

Qt::AA_UseStyleSheetPropagationInWidgetStyles 屬性時, 才會有間接選中.

如果是間接選中,那么最終的樣式就是離目標最近的那個, 這里的近指的是兩個控件的

父子關系. 例如一個 QPushButton 對象被布局在 QGroupBox 中, 而 QGroupBox 又被布局

18 / 62在 QWidget 中, 此時如果給 QGroupBox 和 QWidget 都設置了 color 屬性的顏色, 那么無

論設置順序如何, QPushButton 的前景色總是表現為 QGroupBox 設置的顏色, 因為

QGroupBox 顯然是離 QPushButton 最近的那一個.

2. 相同選擇器(直接選中)

如果都是直接選中, 並且都是同類型的選擇器, 那么寫在后面的樣式會覆蓋掉前面的樣

式, 例如

pBtn1->setStyleSheet("QPushButton{color: green;}");

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

顯而易見, pBtn1 的前景色是藍色.

3. 不同選擇器(直接選中)

如果都是直接選中, 並且不是相同類型的選擇器, 那么就會按照選擇器的優先級來層疊.

具體的優先級如下:

Id > 類 > 類型 > 通配符 > 繼承 > 默認

優先級權重

為什么會有優先級權重?

當多個選擇器混合在一起使用時, 我們可以通過計算權重來判斷誰的優先級最高,從而確定

控件的樣式.

注意點: 只有選擇器是直接選中控件時才需要計算權重, 否則直接選擇器高於一切間接選

中的選擇器

優先級權重的計算方式:

1. 計算選擇器中的 id 選擇器數量[=a]

2. 計算選擇器中類選擇器的數量+屬性選擇器的數量[=b]

3. 計算選擇器中類型選擇器的數量[=c]

4. 忽略子控件選擇器

串聯這三個數字 a-b-c 就得到優先級權重, 數字越大優先級越高.

 

以上為語法部分。

 

多個控件

#widget_1,#widget_2,#widget_3,#widget_4,#widget_7,#widget_8,#widget_9,#widget_10,#widget_11,#widget_12

{

border: 1px solid #DCDFE6;

border-left:none;

border-bottom:none;

min-height:54px;

max-height:54px;

}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM