1. 何為Qt樣式表
2. 樣式表語法基礎(chǔ)
3. 方箱模型
4. 前景與背景
5. 創(chuàng)建可縮放樣式
6. 控制大小
7. 處理偽狀態(tài)
8. 使用子部件定義微觀樣式
8.1. 相對定位
8.2. 絕對定位
摘要
由于Qt樣式表的引入，定制Qt部件的外觀樣式變得非常簡單。 無論你是想僅僅修改一個現(xiàn)有部件的外觀，還是想從零開始設(shè)計一套全新的界面風格， 現(xiàn)在都有了一種新的方法而不必再去繼承并實現(xiàn)一個QStyle的子類。
1. 何為Qt樣式表
Qt 樣式表的思想很大程度上是來自于HTML的層疊式樣式表(CSS)，通過調(diào)用QWidget::setStyleSheet()或 QApplication::setStyleSheet()，你可以為一個獨立的子部件、整個窗口，甚至是整個個應用程序指定一個樣式表。
樣式表是通過QStyle的一個叫做QStyleSheetStyle的特殊子類來實現(xiàn)的。 這個特殊的子類實際上是其他的系統(tǒng)特定風格類的包裹類， 它會把通過樣式表指定的自定義外觀風格應用在底層的系統(tǒng)特定風格之上。
Qt 4.2包含了一個叫做stylesheet的例子來幫助你學習樣式表， 這個例子自帶了兩個樣式：Coffee和Pagefold。
上面的Coffee風格自定義了push button、frames和tooltip，但使用了下層的風格 （例如這里是Windows XP風格）來繪制checkbox，combobox和radio button。
Pagefold風格完全重新定義了對話框中使用的所有控件的外觀，從而實現(xiàn)了一種獨特的，平臺無關(guān)的外觀。
2. 樣式表語法基礎(chǔ)
Qt樣式表與CSS的語法規(guī)則幾乎完全相同，如果你已經(jīng)了解了CSS，完全可以跳過本節(jié)。
一個樣式表由一系列的樣式規(guī)則構(gòu)成。每個樣式規(guī)則都有著下面的形式：
selector { attribute: value }
選擇器(selector)部分通常是一個類名(例如QComboBox)，當然也還有其他的語法形式。
屬性(attribute)部分是一個樣式表屬性的名字，值(value)部分是賦給該屬性的值。
為了使用方便，我們還可以使用一種簡化形式：
selector1, selector2, ..., selectorM {
attribute1: value1;
attribute2: value2;
...
attributeN: valueN;
}
這種簡化形式可以同時為與M個選擇器相匹配的部件設(shè)置N種屬性。例如：
QCheckBox, QComboBox, QSpinBox {
color: red;
background-color: white;
font: bold;
}
這個規(guī)則設(shè)置了所有的QCheckBox、QComboBox和QSpinBox的前景色、背景色和字體。
在線文檔列出了每種部件支持的所有屬性。在本文中，我們只使用最常見的幾種通用屬性。
3. 方箱模型
在樣式表中，每個部件都被看作是一個由四個同心相似的矩形組成的箱體：空白(margin)、邊框(border)、填充(padding)和內(nèi)容(content)。對于一個平面部件——例如一個空白、邊框和填充都是0像素的部件——而言，這四個矩形是完全重合的。
空白區(qū)域位于邊框外，并且總是透明的。邊框為部件提供了四周的框架，其border-style屬性可以設(shè)置為一些內(nèi)置的框架風格，如inset、outset、solid和ridge。填充在邊框和內(nèi)容區(qū)域之間提供了空白間隔。
4. 前景與背景
部件的前景色用于繪制上面的文本，可以通過color屬性指定。背景色用于繪制部件的填充矩形，可以通過background-color屬性指定。
背 景圖片使用background-image屬性定義，它用于繪制由background-origin指定的矩形區(qū)域（空白、邊框、填充或內(nèi)容）。背景 圖片在矩形區(qū)域內(nèi)的對齊和平鋪方式可以通過background-position和background-repeat屬性指定。
如果指定的背景圖片具有alpha通道（即有半透明效果），通過background-color指定的顏色將會透過透明區(qū)域。這一功能可以使背景圖片在多種環(huán)境下重復利用。
該例子中使用的樣式表如下所示：
QFrame {
margin: 10px;
border: 2px solid green;
padding: 20px;
background-color: gray;
background-image: url(qt.png);
background-position: top right;
background-origin: content;
background-repeat: none;
}
在這個例子中，QFrame四周的空白、邊框和填充值都是一樣的。實際上margin屬性可以在上下左右四個方向分別指定我們需要的不同值，例如：
QFrame {
margin: 14px 18px 20px 18px;
}
同時，我們也可以分別指定margin-top、margin-right、margin-bottom、margin-left四個屬性。
QFrame {
margin-top: 14px;
margin-right: 18px;
margin-bottom: 20px;
margin-left: 18px;
}
雖 然目前我們僅僅使用了QFrame作為例子，但是我們也可以同樣的將這些屬性應用于任何一個支持方箱模型的Qt部件，例如：QCheckBox、 QLabel、QLineEdit、QListView、QMenu、QPushButton、QTextEdit、和QToolTip。
5. 創(chuàng)建可縮放樣式
在默認情況下，通過background-image指定的背景圖片會自動重復平鋪，以覆蓋部件的整個填充矩形（即邊框里面的那個區(qū)域）。如果我們想創(chuàng)建能夠隨著部件大小自動縮放而不是平鋪的背景，我們需要設(shè)置一種稱之為“邊框圖片”的東東。
“邊框圖片”可以通過border-image屬性指定，它同時提供了部件的背景和邊框。一個“邊框圖片”被分為九個部分（九宮格），有點向tic-tac-toe游戲的棋盤。
當一個部件的邊框被填充時，四角的格子通常不會發(fā)生變化，而其余的五個格子則可能被拉伸或平鋪以填充可用空間。
當指定一個“邊框圖片”時，除了圖片本身，我們還必須指定用來分割九宮格的四條分割線。同時我們還必須指定非邊角的格子是應該平鋪還是拉伸，以及邊框的寬度（用來確定邊角格子的大小，防止邊角被縮放變形）。
例如，下面的樣式表定義了上圖中的button：
QPushButton {
border-width: 4px;
border-image: url(button.png) 4 4 4 4 stretch stretch;
}
另外，“邊框圖片”還應該含有alpha通道，以使背景能夠在邊角處露出來。
6. 控制大小
min-width和min-height兩個屬性可以用來指定一個部件的內(nèi)容區(qū)域的最小大小。這兩個值將影響部件的minimumSizeHint()，并在布局時被考慮。
例如：
QPushButton {
min-width: 68px;
min-height: 28px;
}
如果該屬性沒有被指定，最小大小將從部件的內(nèi)容區(qū)域和當前樣式中繼承。
7. 處理偽狀態(tài)
部件的外觀可以按照用戶界面元素狀態(tài)的不同來分別定義，這在樣式表中被稱為“偽狀態(tài)”。例如，如果我們想在一個push button在被按下的時候具有sunken的外觀，我們可以指定一個叫做 :pressed 的偽狀態(tài)。
QPushButton {
border: 2px outset green;
background: gray;
}
QPushButton:pressed {
border-style: inset;
}
下面是可用的偽狀態(tài)列表：
表 1. 偽狀態(tài)列表
偽狀態(tài) 描述
:checked button部件被選中
:disabled 部件被禁用
:enabled 部件被啟用
:focus 部件獲得焦點
:hover 鼠標位于部件上
:indeterminate checkbox或radiobutton被部分選中
:off 部件可以切換，且處于off狀態(tài)
:on 部件可以切換，且處于on狀態(tài)
:pressed 部件被鼠標按下
:unchecked button部件未被選中
8. 使用子部件定義微觀樣式
許多部件都包含有子元素，這些元素可以稱為“子部件”。Spin box的上下箭頭就是子部件最好的例子。
子 部件可以通過::來指定，例如QDateTimeEdit::up-button。定義子部件的樣式與定義部件非常相似，它們遵循前面提到的方箱模型（即 它們可以擁有自己的邊框、背景等），并且也可以和偽狀態(tài)聯(lián)合使用（例如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屬性，子部件可以被放置在部件箱體內(nèi)的任何位置。并且，子部件的位置 還可以使用相對或絕對的方式進一步的調(diào)整。具體選擇何種調(diào)整方式取決于子部件具有固定的大小，還是會隨著父部件而變化。
8.1. 相對定位
相 對定位適合于子部件具有固定大小的情形（通過width和height指定子部件大?。?。使用這種方式，子部件可以以相對于subcontrol- position和 subcontrol-origin屬性定義的原始位置進行移動調(diào)整。使用left屬性可以把子部件向右移，top屬性可以把子部件向左移。
例如：
QPushButton::menu-indicator {
image: url(menu_indicator.png);
width: 13px;
height: 13px;
subcontrol-origin: padding;
subcontrol-position: bottom right;
}
當按下按鈕時，我們可以把菜單指示器從原來的位置向右下方移動幾個像素來模擬按鈕按下的狀態(tài)。
QPushButton::menu-indicator:pressed {
position: relative;
top: 2px;
left: 2px;
}
8.2. 絕對定位
絕對定位適合于子部件的位置隨父部件的變化而變的情形。與前面的例子相同，subcontrol-origin定義了父部件箱體的參考矩形。子部件的矩形區(qū)域則可以隨后通過相對于這個參考矩形四邊的偏移量來定義。
QPushButton::menu-indicator {
border: 2px solid red;
subcontrol-origin: padding;
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
left: 40px;
本站僅提供存儲服務，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
