自學QT之qss教程

2022-06-28 23:00:14 字數 4161 閱讀 8191

在此之前說乙個幫助文件的特別用法,絕不僅僅是搜單詞,qt的文件非常強大的,比如你要搜尋怎麼使用qss,可以這樣搜尋:how to use stylesheet

三 通過qt4.2樣式表定製程式外觀

目錄1. 何為qt樣式表

2. 樣式表語法基礎

3. 方箱模型

4. 前景與背景

5. 建立可縮放樣式

6. 控制大小

7. 處理偽狀態

8. 使用子部件定義微觀樣式

8.1. 相對定位

8.2. 絕對定位

摘要

由於qt樣式表的引入,定製qt部件的外觀樣式變得非常簡單。 無論你是想僅僅修改乙個現有部件的外觀,還是想從零開始設計一套全新的介面風格, 現在都有了一種新的方法而不必再去繼承並實現乙個qstyle的子類。

1. 何為qt樣式表

在樣式表中,每個部件都被看作是乙個由四個同心相似的矩形組成的箱體:空白(margin)、邊框(border)、填充(padding)和內容(content)。對於乙個平面部件——例如乙個空白、邊框和填充都是0畫素的部件——而言,這四個矩形是完全重合的。

空白區域位於邊框外,並且總是透明的。邊框為部件提供了四周的框架,其border-style屬性可以設定為一些內建的框架風格,如inset、outset、solid和ridge。填充在邊框和內容區域之間提供了空白間隔。

4. 前景與背景

部件的前景色用於繪製上面的文字,可以通過color屬性指定。背景色用於繪製部件的填充矩形,可以通過background-color屬性指定。

背景使用background-image屬性定義,它用於繪製由background-origin指定的矩形區域(空白、邊框、填充或內容)。背景在矩形區域內的對齊和平鋪方式可以通過background-position和background-repeat屬性指定。

如果指定的背景具有alpha通道(即有半透明效果),通過background-color指定的顏色將會透過透明區域。這一功能可以使背景在多種環境下重複利用。

該例子中使用的樣式表如下所示:

qframe

在這個例子中,qframe四周的空白、邊框和填充值都是一樣的。實際上margin屬性可以在上下左右四個方向分別指定我們需要的不同值,例如:

qframe

同時,我們也可以分別指定margin-top、margin-right、margin-bottom、margin-left四個屬性。

qframe

雖然目前我們僅僅使用了qframe作為例子,但是我們也可以同樣的將這些屬性應用於任何乙個支援方箱模型的qt部件,例如:qcheckbox、 qlabel、qlineedit、qlistview、qmenu、qpushbutton、qtextedit、和qtooltip。

5. 建立可縮放樣式

在預設情況下,通過background-image指定的背景會自動重複平鋪,以覆蓋部件的整個填充矩形(即邊框裡面的那個區域)。如果我們想建立能夠隨著部件大小自動縮放而不是平鋪的背景,我們需要設定一種稱之為「邊框」的東東。

「邊框」可以通過border-image屬性指定,它同時提供了部件的背景和邊框。乙個「邊框」被分為九個部分(九宮格),有點向tic-tac-toe遊戲的棋盤。

當乙個部件的邊框被填充時,四角的格仔通常不會發生變化,而其餘的五個格仔則可能被拉伸或平鋪以填充可用空間。

當指定乙個「邊框」時,除了本身,我們還必須指定用來分割九宮格的四條分割線。同時我們還必須指定非邊角的格仔是應該平鋪還是拉伸,以及邊框的寬度(用來確定邊角格仔的大小,防止邊角被縮放變形)。

例如,下面的樣式表定義了上圖中的button:

qpushbutton

另外,「邊框」還應該含有alpha通道,以使背景能夠在邊角處露出來。

6. 控制大小

min-width和min-height兩個屬性可以用來指定乙個部件的內容區域的最小大小。這兩個值將影響部件的minimumsizehint(),並在布局時被考慮。

例如:qpushbutton

如果該屬性沒有被指定,最小大小將從部件的內容區域和當前樣式中繼承。

7. 處理偽狀態

部件的外觀可以按照使用者介面元素狀態的不同來分別定義,這在樣式表中被稱為「偽狀態」。例如,如果我們想在乙個push button在被按下的時候具有sunken的外觀,我們可以指定乙個叫做 :pressed 的偽狀態。

qpushbutton

qpushbutton:pressed

下面是可用的偽狀態列表:

表 1. 偽狀態列表

偽狀態    描述

:checked    button部件被選中

:disabled    部件被禁用

:enabled    部件被啟用

:focus    部件獲得焦點

:hover    滑鼠位於部件上

:indeterminate    checkbox或radiobutton被部分選中

:off    部件可以切換,且處於off狀態

:on    部件可以切換,且處於on狀態

:pressed    部件被滑鼠按下

:unchecked    button部件未被選中

8. 使用子部件定義微觀樣式

許多部件都包含有子元素,這些元素可以稱為「子部件」。spin box的上下箭頭就是子部件最好的例子。

子部件可以通過::來指定,例如qdatetimeedit::up-button。定義子部件的樣式與定義部件非常相似,它們遵循前面提到的方箱模型(即它們可以擁有自己的邊框、背景等),並且也可以和偽狀態聯合使用(例如qspinbox::up-button:hover)。

下表列出了可用的子部件型別:

表 2. 子部件列表

子部件    描述

::down-arrow    combo box或spin box的下拉箭頭

::down-button    spin box的向下按鈕

::drop-down    combo box的下拉箭頭

::indicator    checkbox、radio button或可選擇group box的指示器

::item    menu、menu bar或status bar的子專案

::menu-indicator    push button的選單指示器

::title    group box的標題

::up-arrow    spin box的向上箭頭

::up-button    spin box的向上按鈕

通過指定subcontrol-position和subcontrol-origin屬性,子部件可以被放置在部件箱體內的任何位置。並且,子部件的位置還可以使用相對或絕對的方式進一步的調整。具體選擇何種調整方式取決於子部件具有固定的大小,還是會隨著父部件而變化。

8.1. 相對定位

相對定位適合於子部件具有固定大小的情形(通過width和height指定子部件大小)。使用這種方式,子部件可以以相對於subcontrol-position和 subcontrol-origin屬性定義的原始位置進行移動調整。使用left屬性可以把子部件向右移,top屬性可以把子部件向左移。

例如:qpushbutton::menu-indicator

當按下按鈕時,我們可以把選單指示器從原來的位置向右下方移動幾個畫素來模擬按鈕按下的狀態。

qpushbutton::menu-indicator:pressed

8.2. 絕對定位

絕對定位適合於子部件的位置隨父部件的變化而變的情形。與前面的例子相同,subcontrol-origin定義了父部件箱體的參考矩形。子部件的矩形區域則可以隨後通過相對於這個參考矩形四邊的偏移量來定義。

qpushbutton::menu-indicator

對於寬度或高度固定的子部件,subcontrol-position被用來說明其在subcontrol-origin指定矩形內的對其方式:

qpushbutton::menu-indicator

四 五 樣式表使用

**:

Qt之QSS(動態屬性)

qss可以定製應用程式的外觀,無需關注qt樣式背後的魔力。從非常輕微到極其複雜的調整,樣式表都可以做到。對於乙個完全定製和獨特的使用者體驗,qtquick和qgraphicsview是更好的選擇。更多參考 為了使用者介面外觀的動態變化,屬性選擇器可以與動態屬性組合使用。動態屬性在qt4.2中引入,允...

QT開發之QSS控制項

1 多選按鈕 ui checkbox setstylesheet qcheckbox qcheckbox indicator 未選中時正常狀態 qcheckbox indicator unchecked 未選中時,滑鼠懸停時的狀態 qcheckbox indicator unchecked hove...

Qt之QSS漸變效果

qss目前支援三種漸變填充 效果如下 qpushbutton整個線性漸變軸長度為1。漸變位置 在這個例子中,x1,y1 是起點,在左上角,x2,y2 是終點在右下角。漸變點設定 在0處設白色,在0.4處設灰色,在1處設綠色。漸變位置 cx,cy 是圓錐的中心,angle是漸變的起始角度 漸變點設定 ...