**:
目錄:
1. 何為qt樣式表
2. 樣式表語法基礎
3. 方箱模型
4. 前景與背景
5. 建立可縮放樣式
6. 控制大小
7. 處理偽狀態
8. 使用子部件定義微觀樣式
8.1. 相對定位
8.2. 絕對定位
1.何為qt樣式表
樣式表是通過qstyle的乙個叫qstylesheet的特殊子類來實現的。這個特殊的子類實際上是其他的系統特定風格類的包裹類,它會通過樣式表指定的自定義外觀風格應用在底層的系統特定風格之上。
qt 4.2包含了乙個叫做stylesheet的例子來幫助你來學習樣式表,這個例子自帶了二個樣式:coffee和pagefold。
coffee風格自定義了push button.frames.tooltip,但使用了下層的風格來繪製的。pagefold風格完全重新定義了對話方塊使用的所有控制項的外觀,從而實現了一種獨特的,平台無關的外觀。
2.樣式表語法基礎
qt樣式表與css的語法規則機會完全相同,如果你已經了解了css,完全可以跳過本節。
乙個樣式表有一系列的樣式規則構成。每個樣式表規則如下面的形式:
selector
選擇器(selector)部分通常是乙個類名(如qpushbutton),當然也還有其他的語法形式。
屬性(attribute)部分是乙個樣式表屬性的名字,值(value)部分是賦給該屬性的值。
為了簡化方便,我們還可以使用一種簡化形式:
selector1,selector2...selectorm{
attribute1:value1;
attribute2:value2;
...attributem:valuem;
}這種簡化形式可以同時為與m個選擇器匹配的部件設定n中屬性。例如:
qcheckbox, qcombobox,qspinbox
3.方箱模型
在樣式表中,每個部件都被看作是乙個由四個相似的矩形組成的箱體;空白(margin),邊框(border),填充(padding)和內容(context)。對於乙個平面部件---例如乙個空白,邊框和填充都是0畫素的部件而言,這四個矩形完全重合的。
空白區域位於邊框外,並且總是透明的。邊框為部件提供了四周的框架,其border-style屬性可以設定為一些內建的框架風格,如inset,outset,solid和ridge。填充在邊框和內容區域之間提供了空白間隔。
4.前景和背景
部件的前景色用於繪製上面的文字,可以通過color屬性指定。背景色用於繪製部件的填充矩形,可以通過background-color和background-repeat屬性指定。
如果指定的背景色具有alpha通道(即半透明效果),通過background-color指定的顏色將會透過透明區域。這一功能可以使背景在多種環境下重複利用。
該例子中使用的樣式表如下所示:
qframe{
margin:10px;
border:2px solid green;
pading:20px;
background-color:gray;
background-image:url(qt.png);
background-position:top right;
background-origin:context;
background-repeat:none;
}在這個例子中,qframe四周的空白,邊框和填充值都是一樣的。實際上margin屬性可以在上下左右四個方向分別指定我們需要的不同值,例如:
qframe
同時,我們也可以分別指定margin-top,margin-right,margin-buttom,margin-left四個屬性。
qframe
雖然目前我們僅僅使用了qframe作為例子,但是我們也可以同樣的將這些屬性應用到任何乙個支援方箱模型的qt部件,例如:qcheckbox,qlabel,qlineedit,qlistview,qmenu,qpushbutton,qtextedit和qtooltip.
5.建立可縮放樣式
在預設情況下,通過background-image指定的背景會自動重複平鋪,已覆蓋部件的整個填充矩形(即邊框裡面的那個區域)。如果我們想建立能夠隨著部件大小自動縮放"而不是平鋪的背景,我們需要設定一種稱之為"邊框"的東東。"邊框"可以通過border-image屬性指定,它同時提供了部件的背景和邊框。乙個"邊框"被分為九個部分(九宮格),有點向tic-tac-toe遊戲的棋盤。
當;乙個部件的邊框被填充時,四角的格仔通常不會發生變化,而其餘的五個格仔則可能被拉伸或平鋪以填充可用空間。
6.控制大小
min-width和min-height兩個屬性可以用來指定乙個部件的內容區域的最小大小。這兩個值將影響部件的minimumsizehint(),並在布局時被考慮。例如:
qpushbutton
如果該屬性沒有被指定,最小大小將從部件的內容區域和當前樣式表中繼承。
7.處理偽狀態
部件的外觀可以按照使用者介面元素狀態的不同來分別定義,這在樣式表中被稱為「偽狀態」。例如,如果我們想在乙個pushbutton在被按下的時候具有sunken的外觀,我們可以指定乙個叫做:pressed的偽狀態。
qpushbutton {
border:2px outset green;
background:gray;
}qpushbutton:pressed
偽狀態列表:
偽狀態 描述
:checked 部件被選中
:disabled 部件被禁用
:enabled 部件被啟用
:focus 部件獲得焦點
:hover 滑鼠位於部件上
:indeterminate checkbox或radiobutton被部分選中
:off 部件可以切換且處於off狀態
:on 部件可以切換且處於on狀態
:pressed 部件被滑鼠按下
:unchecked 部件未被選中
8.使用子部件定義微觀樣式
許多部件都包含有子元素,這些元素可以稱為'子部件"。spinbox的上下箭頭就是子部件最好的例子。
子部件可以通過::來指定,例如qdatetimeedit::up-button。定義子部件的樣式表與定義部件非常相似,他們遵循前面提到的方箱模型(即它們可以擁有自己的邊框,背景等),並且也可以和偽狀態聯合使用(例如qspinbox::up-button:hover)。
子部件列表
子部件 描述
::down-arrow combobox或spinbox的下拉箭頭
::down-button spinbox的向下箭頭
::drop-down combobox的下拉箭頭
::indicator chenkbox,radio button或可選擇group box的指示器
::item menu,menu bar或status bar的子專案
::menu-indicator pushbutton的選單指示器
::title groupbox的標題
::up-arrow spinbox的向上箭頭
::up-button spinbox的向上按鈕
通過指定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樣式表入門
qt樣式表 qss 是使用與級聯樣式表 css 類似的語言編寫的文字描述。它可以用來自定義窗體的外觀,其方式大致類似於使用 css 描述來自定義 html 使用 www 瀏覽器來提交 的方式。通過stylesheet 屬性 可從qwidget 及其子類中獲得 可以訪問每個窗體的樣式表,使用這一方式,...
QT 樣式表基礎
setstylesheet string 主視窗設定樣式的函式 或是哪個控制項需要設定直接呼叫 setstylesheet qpushbutton background 背景色 color 前景色 border 邊界 setwindowopacity 浮點型 設定視窗的透明度 範圍是0 1整個都透明...
Qt開發 學習筆記 Qt樣式表載入
在此感謝廣大無私愛好者的分享,讓我能夠不去看英文文件就能學習到相關技術,文章都是採用學習csdn及相關部落格,會在文章開頭註明,感謝廣大朋友無私奉獻。參考部落格 這是乙個非常重要的部落格,我的學習基本上從這裡來,非常感謝這裡,囊括作者心血,可以仔細閱讀。qss簡稱樣式表,首先我們先學會如何用qt載入...