1. 程式人生 > >Qt之樣式表QSS

Qt之樣式表QSS

使用Qt樣式表

   Qt的樣式表主要是受到了CSS的啟發。因為樣式表是一種在執行時解釋的普通文字檔案,使用它們不需要具備任何程式設計知識。樣式表作用於上層的當前啟用的QStyle上(例如QWindowsVistaStyle)。因為建立樣式表不引入任何子類,所以它們適合對現有視窗部件做微小的定製。

與調色盤相比

  使用樣式表比修改視窗部件的調色盤更可靠性。這是因為QPalette中的實體(Base、Button、Highlight,等等)在不同樣式中的用法不一樣的。例如,QWindowsStyle用Base調色盤實體填充只讀組合框的背景,然而,QPlastqueStyle使用Button實體完成這一功能。此外,有些樣式使用硬編碼的影象呈現某個元素,從而跳過了調色盤。相反,樣式表則保證了無論啟用的是哪種樣式,都可以使用指定的顏色。

基本語法

1、樣式表單由一系列樣式規則組成。如下圖所示:

這裡寫圖片描述 
QLineEdit稱為選擇器(selector),background-color是屬性,yellow是屬性值。
注意:Qt的樣式表語法不區分大小寫,所以color,Color,coLor,coloR都表示同樣的顏色屬性。但是指代類的類名的時候,是區分大小寫的。

2、多個選擇器可以並列使用,之間用逗號隔開。如下圖所示:

這裡寫圖片描述

3、前面的選擇器都是類的名字,還有其他的一些可以使用的選擇器。樣式表選擇器如下圖所示:

這裡寫圖片描述
例如,為了選擇所有稱作“okButton”的QPushButton,它們的x和y屬性為0,名為“frame”的QFrame直接物件,可以這樣寫:
這裡寫圖片描述

4、可以通過輔助控制器(subcontrol)控制外觀,最常見的自定義輔助控制器如下圖所示:

這裡寫圖片描述
例如:複選框和單選按鈕的狀態指示器的大小為20*20畫素:
這裡寫圖片描述

5、除了輔助控制器,樣式表還可以用來指定視窗部件的各個狀態。視窗部件中一些可以訪問樣式表的狀態如下圖所示:

這裡寫圖片描述
例如:當滑鼠在複選框的文字上懸停時,用白色指定它的:hover狀態:
這裡寫圖片描述

6、大多數的Qt視窗部件都可以支援如下圖所示的盒子模型。此模型可以指定4個影響佈局的矩形,從而繪製一個自定義的視窗。

這裡寫圖片描述

  1. contents rectangle是最裡面的矩形。它是繪製視窗部件內容(例如文字或圖片)的地方。
  2. padding 包圍contents rectangle。它負責由padding屬性指定填充操作。
  3. border rectangle 包圍 padding rectangle。它為邊界預留空間。
  4. margin rectangle是最外邊的矩形。它包圍border rectangle,負責任何指定的邊緣空白區域。
    對於沒有padding、border和margin的普通視窗部件,這四個矩形重合在一起。
    例如:padding屬性允許我們指定視窗部件的上邊、右邊、下邊和左邊的填充空間。
    這裡寫圖片描述

7、如果想視窗部件可以縮放,背景使用CSS的邊界圖(border image)機制定義。

  與使用background-image定義的背景影象不同,邊界圖被分隔成3*3的小格,如下圖所示。當填充視窗部件背景時,四個角(圖中的格子A、C、G和I)保持不變,其他五個格子被拉伸或平鋪,填充可用空間。
這裡寫圖片描述

使用border-image屬性可以指定各個邊介面,它要求指定一個影象檔名和定義九個格子的四條“切線”。切線用其到上、右、下和左邊緣的距離定義。border.png作為邊界圖,距離上、右、下和左邊緣的切線為4、8、12和16,應該這樣定義:
border-image: url(border.png) 4 8 12 16;
當使用邊介面時,必須顯式地設定border-width屬性。一般情況下,border-width應該與切線的位置一致;否則,為了與border-width相符合,角上的格子將被拉伸或縮短。對於border.png的例子,應該這樣指定邊框寬度:
border-width: 4px 8px 12px 16px;