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個影響佈局的矩形,從而繪製一個自定義的視窗。
- contents rectangle是最裡面的矩形。它是繪製視窗部件內容(例如文字或圖片)的地方。
- padding 包圍contents rectangle。它負責由padding屬性指定填充操作。
- border rectangle 包圍 padding rectangle。它為邊界預留空間。
- 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;