Qt樣式表詳解

https://www.cnblogs.com/lsgxeva/p/7816938.html

一、QT樣式表簡介

1、QT樣式表簡介

    QSS的主要功能是使界面的表現與界面的元素分離，使得設計皮膚與界面控件分離的軟件成爲可能。

QT樣式表是允許用戶定製widgets組件外觀的強大機制，此外，子類化QStyle也可以定製widgets組件外觀。QT樣式表的概念、術語、語法很大程度上受到了CSS層疊樣式表的影響。

樣式表是使用QApplication::setStyleSheet()設置在應用程序或是使用QWidget::setStyleSheet()設置在具體組件及其子對象的文字說明。

例如，以下樣式表指明QLineEdit使用黃色作爲背景色，QCheckBox使用紅色作爲文本顏色。

    QLineEdit { background: yellow }

    QCheckBox { color: red }

    對於這種定製，樣式表比QPalette更強大。例如，要獲取一個紅色的按鈕，可以設置QPushButton的QPalette::Button角色爲紅色。然而，這並不保證對所有的樣式有效，因爲樣式的構造者會被不同平臺的原則和本地的主題引擎所限制。

    樣式表可以實現那些很難或是不可能使用QPalette實現的所有定製。

    如果想要某些強制字段爲黃色背景，按鈕爲紅色文字，或是絢麗的複選框，樣式表可以完成。

2、QT樣式表編程

A、在代碼中直接設置QSS

    QPushButton *button = new QPushButton(this);

    button->setText("hello");

    button->setStyleSheet("QPushButton{ color:blue}");

B、通過文件設置QSS

將QSS代碼寫入.qss文件

將.qss文件加入資源文件qrc.qrc中

在代碼中讀取QSS文件設置組件QSS

    QPushButton *button = new QPushButton(this);

    button->setText("hello");

    QFile file(":/qss/dev.qss");

    file.open(QIODevice::ReadOnly);

    QString stylesheet = QLatin1String(file.readAll());

    button->setStyleSheet(stylesheet);

    file.close();

 

二、QT樣式表語法

QT樣式表的術語和語法規則與HTML CSS很相似。

1、樣式規則

樣式表由樣式規則序列組成。樣式規則由選擇器和聲明組成。選擇器指定了那些組件受規則影響，聲明指定了組件設置了哪些屬性。例如：

    QPushButton { color: red }

以上樣式規則中，QPushButton是選擇器，{ color: red }是聲明。樣式規則指定了QPushButton及其子類應使用紅色作爲前景色。

QT樣式表大小寫不敏感，除了類名、對象名、QT屬性名是大小寫敏感的。

多個選擇器可以指定同一個聲明，使用逗號分隔選擇器。例如以下規則：

    QPushButton, QLineEdit, QComboBox { color: red }

等效於三個規則：

    QPushButton { color: red }

    QLineEdit { color: red }

    QComboBox { color: red }

樣式規則的聲明部分是一個“屬性：值”對的鏈表。聲明部分在{}內，不同的屬性：值”對使用分號分隔。例如：

    QPushButton { color: red; margin: 0px; color: rgb(85, 85, 85); font-family: 宋體, "Arial Narrow", arial, serif;">2、選擇器的類型

到目前爲止所有的例子使用的都是最簡單的選擇器類型。QT樣式表支持CSS2定義的所有選擇器。下表總結了最常用的選擇器類型。

選擇器	示例	說明
通用選擇器	*	匹配所有的組件
類型選擇器	QPushButton	匹配所有QPushButton機器子類的實例
屬性選擇器	QPushButton[flat="false"]	匹配所有QPushButton的屬性flat爲false的實例。屬性分爲靜態屬性和動態屬性，靜態屬性可以通過Q_PROPERTY()來指定，動態屬性可以使用setProperty來指定。
類選擇器	.QPushButton	匹配QPushButton的實例，子類除外
ID選擇器	QPushButton#okButton	匹配對象名爲okButton的所有QPushButton實例
後代選擇器	QDialog QPushButton	匹配QDialog後代的所有QPushButton實例
子選擇器	QDialog > QPushButton	匹配QDialog子類對象QPushButton的所有實例

3、子控件選擇器

對於樣式複雜的組件，需要訪問組件的子控件，如QComboBox的下拉按鈕或QSpinBox的上下箭頭。選擇器可以包含子控件來對組件的特定子控件應用規則。

    QComboBox::drop-down { image: url(dropdown.png) }

以上規則會對所有QComboBox的下拉框應用樣式規則。儘管雙冒號：：很像CSS3的僞元素，但QT子控件選擇器在概念上是不同的，有不同的級聯語義。

子控件選擇器通常根據另一個參考元素進行定位。參考元素可以是組件或是另一個子控件選擇器。例如，QComboBox的::drop-down默認放置在QComboBox襯底矩形的右上角。::drop-down默認放置在::drop-down子控件選擇器的內容矩形的中心。

可以使用subcontrol-origin屬性改變原點矩形。例如，如果想要將drop-down放置在邊界矩形而不是默認的襯底矩形，可以指定：

    QComboBox {

      margin-right: 20px;

  }

  QComboBox::drop-down {

      subcontrol-origin: margin;

  }

drop-down在邊界矩形內的對齊方式通過subcontrol-position屬性改變。寬屬性和高屬性用於控制子控件選擇器的大小。注意，設置一幅圖片會隱式地設置子控件選擇器的大小。

相對定位方法（position：relative）允許子控件選擇器的位置偏離它原來的位置。例如，當QComboBox的下拉按鈕按下，想要一種被按下的效果可以通過指定如下實現：

    QComboBox::down-arrow {

          image: url(down_arrow.png);

      }

      QComboBox::down-arrow:pressed {

          position: relative;

          top: 1px; left: 1px;

      }

絕對定位方法（position：absolute）允許子控件選擇器的位置和大小的改變與參考元素有關。

一旦定位，就可以像組件那樣使用盒子模型對其進行造型。

注意，像QComboBox和QScrollBar這樣複雜的組件，如果有一個屬性或是子控件選擇器被定製，所有其他的屬性或是子控件選擇器也要必須被定製。

常用輔助控制器：

::indicator              單選框、複選框、可選菜單項或可選羣組項的指示器  

::menu-indicator         按鈕的菜單指示器  

::item                   菜單、菜單欄或狀態欄項  

::up-button              微調框或滾動條的向下按鈕  

::down-button            微調框或滾動條的向上按鈕  

::up-arrow               微調框、滾動條或標題視圖的向上按鈕  

::down-arrow             微調框、滾動條或標題視圖的向下按鈕  

::drop-down              組合框的下拉箭頭  

::title                  羣組框的標題

4、僞選擇器

選擇器可能包含限制基於組件狀態的規則應用的僞狀態。僞狀態出現在選擇器的尾部，中間使用分號連接。例如，以下規則用於鼠標懸停在一個QPushButton上：

    QPushButton:hover { color: white }

僞狀態可以使用歎號取反，例如，以下規則用於鼠標不懸停在QRadioButton：

    QRadioButton:!hover { color: red }

僞狀態可以以邏輯與的方式連接使用，例如，以下規則應用於鼠標懸停在一個選中的QCheckBox上：

    QCheckBox:hover:checked { color: white }

取反僞狀態可以出現在僞狀態鏈中。例如，以下規則用於鼠標懸停在一個QPsuButton上，但沒有按下：

    QPushButton:hover:!pressed { color: blue; }

    如果需要，使用逗號可以將僞狀態以邏輯或連接。

    QCheckBox:hover, QCheckBox:checked { color: white }

    僞狀態可以結合子控件選擇器使用：

    QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

常用狀態：

:disabled                   禁用的窗口部件  

:enabled                    啓用的窗口部件  

:focus                      窗口部件有輸入焦點  

:hover                      鼠標在窗口部件上懸停  

:pressed                    鼠標按鍵點擊窗口部件  

:checked                    按鈕已被選中  

:unchecked                  按鈕未被選中  

:indeterminate              按鈕被部分選中  

:open                       窗口部件處於打開或擴展的狀態  

:closed                     窗口部件處於關閉或銷燬狀態  

:on                         窗口部件的狀態是on  

:off                        窗口部件的狀態是on  

5、衝突處理

當多個樣式規則使用多個值指定同一個屬性時會產生衝突。

    QPushButton#okButton { color: gray }

    QPushButton { color: red }

    以上兩條規則匹配名爲okButton的QPushButton實例，在color屬性上有衝突。爲了解決衝突，需要考慮選擇器的特徵。上例中，QPushButton#okButton比QPushButton要更具體，因爲QPushButton#okButton指向單個的對象，而不是類的所有實例。

類似，僞選擇器比未指定僞狀態的選擇器更具體。因而，以下樣式表指定，當鼠標懸停在QPushButton上時，QPushButton的文本爲白色，否則爲紅色。

    QPushButton:hover { color: white }

    QPushButton { color: red }

    嚴謹一點應該是：

    QPushButton:hover { color: white }

    QPushButton:enabled { color: red }

    如果鼠標懸停在按鈕上，兩個選擇器有相同的特性，則第二條規則優先。如果想要文本爲白色，需要重新排序規則：

    QPushButton:enabled { color: red }

    QPushButton:hover { color: white }

    或者，可以使第一條規則更加具體：

    QPushButton:hover:enabled { color: white }

    QPushButton:enabled { color: red }

    和類型選擇器一起使用時，類似的問題也會發生

    QPushButton { color: red }

    QAbstractButton { color: gray }

    以上兩條規則用於QPushButton實例（由於QPushButton繼承自QAbstractButton），並有color屬性的衝突。由於QPushButton繼承自QAbstractButton，所以會假設QPushButton比QAbstractButton更具體。然而，對於樣式表的計算，所有的類型選擇器有相同的特性，最後出現的規則優先。換句話說，所有的QAbstractButton的color屬性會被設置爲gray，包括QPushButton。如果真的想要QPushButton的文本爲red，通常會重新排序規則。

    爲了確定規則的特性，QT樣式表遵循CSS2規範：

    選擇器特性的計算方法如下：

    計算選擇器中ID屬性的數量（=a）

    計算選擇器中其他屬性和僞狀態類的數量（=b）

    計算選擇器中元素的數量（=c）

    忽略僞元素（如子控件選擇器）

    串聯的三個數字a-b-c給出了特性。

      *   {} /* a=0 b=0 c=0 -> specificity = 0 */

  LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */

  UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */

  UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */

  H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */

  UL OL LI.red  {}  /* a=0 b=1 c=3 -> specificity =  13 */

  LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */

  #x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */

6、級聯

QT樣式表可以設置在應用程序、父組件、子組件上。通過合併組件的祖先（父親、祖父等）可以獲取任意組件的有效樣式表，以及設置在應用程序上的任何樣式表。

衝突發生時，不論衝突規則的特性如何，組件自己的樣式表總是優先於任何繼承而來的樣式表。同樣，父組件的樣式表優先於祖父組件的樣式表。

這樣的結果是，在一個組件上設置樣式規則會自動獲得比祖先組件的樣式表或是應用程序的樣式表指定的其他規則更高的優先級。例如,首先在應用程序設置樣式表

    qApp->setStyleSheet("QPushButton { color: white }");

然後，在QPushButton對象設置一個樣式表

    myPushButton->setStyleSheet("* { color: blue }");

QPushButton的樣式表會強制QPushButton（及其任何子組件）顯示藍色文本，儘管應用程序範圍的樣式表提供了更具體的規則。

下列寫法也會得到相同的結果：

    myPushButton->setStyleSheet("color: blue");

但如果QPushButton有子組件，樣式表不會對子組件有效果。

樣式表級聯是一個複雜的主題，更詳細的內容請參考CSS2規範。QT目前沒有實現。

7、繼承

在經典的CSS中，當元素的字體和顏色沒有顯示設置時，會自動從父組件繼承。使用QT樣式表時，一個組件不會自動繼承父組件設置的字體和顏色。例如，一個QGroupBox包含一個QPushButton：

    qApp->setStyleSheet("QGroupBox { color: red; } ");

QPushButton並沒有顯示設置顏色，因此並不是繼承父組件QGroupBox的顏色，而是擁有系統的顏色。如果要設置QGroupBox及其子組件的顏色，如下：

    qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");

相比之下，使用QWidget::setFont() 和 QWidget::setPalette()爲子組件設置字體和畫板。

8、C++命名空間內部的組件

類型選擇器特殊類型的組件的樣式定製。例如：

class MyPushButton : public QPushButton {

      // ...

  }

  // ...

  qApp->setStyleSheet("MyPushButton { background: yellow; }");

    QT樣式表使用組件的QObject::className() 確定何時應選擇器。當自定義組件在命名空間內部時，QObject::className()會返回<namespace>::<classname>。這會與子控件選擇器的語法產生衝突。爲了解決這個問題，當在命名空間內使用組件的類型選擇器時，必須使用“--”代替“：：”。

namespace ns {

      class MyPushButton : public QPushButton {

          // ...

      }

  }

  // ...

  qApp->setStyleSheet("ns--MyPushButton { background: yellow; }");

9、設置QObject屬性

從QT4.3開始，任何可被設計的Q_PROPERTY都可以使用qproperty-<property name>語法設置。

MyLabel { qproperty-pixmap: url(pixmap.png); }

MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }

QPushButton { qproperty-iconSize: 20px 20px; }

如果屬性引用了Q_ENUMS聲明的枚舉，應該通過名字引用常量值，而不是數字。

三、QT設計器中的樣式表

    Qt Designer是一款預覽樣式表的優秀工具，右擊設計器中的任何組件，選擇Change styleSheet...可以設置樣式表。

    QT4.2開始，Qt Designer包含了一個樣式表語法高亮器和驗證器。如果語法合法或非法，驗證器可以在Edit Style Sheet對話框的左下角指示。

    當點擊Ok或Apply按鈕時，Qt Designer會自動使用新樣式表顯示組件。

四、使用樣式表定製QT組件

當使用樣式表時，每個組件會被當作有四個同心矩形：空白矩形、邊界矩形、襯底矩形、內容矩形的盒子。

1、盒子模型

四個同心矩形如下所示：

    margin, border-width,padding屬性默認都是0。此時四個矩形完全相同。

    可以使用background-image屬性指定組件的背景。默認，background-image只會在邊界矩形內被繪製，使用background-clip屬性可以修改。使用background-repeat屬性和background-origin屬性來控制背景圖片的重複和來源。

    background-image屬性不會縮放組件的大小。爲了提供隨着組件大小縮放的皮膚或背景，必須使用border-image屬性。由於border-image屬性提供了一個可選擇的背景，當指定border-image屬性時，不會要求指定background-image屬性。當background-image屬性和border-image屬性都被指定時，border-image屬性會被繪製在background-image屬性之上。

    此外，image屬性可以用於在border-image屬性上繪製一幅圖像。當組件的大小與image的大小不匹配時，指定的image不會伸縮，對齊方式可以使用image-position屬性設置。與background-image屬性和border-image屬性不同，image屬性可以指定SVG，使image根據組件的大小自動縮放。

    渲染規則的步驟如下：

    A、爲整個渲染操作設置clip（border-radius）

    B、繪製背景（background-image）

 C、繪製邊界（border-image，border）

 D、繪製覆蓋圖像（image）

2、子控件

一個組件可以看作一顆子控件樹。例如QComboBox繪製下拉按鈕子控件，下拉按鈕子控件繪製了向下箭頭子控件。

    子控件享有父子關係。QComboBox中，向下箭頭的父親是下拉按鈕，下拉按鈕的父親的QComboBox組件本身。子控件可以使用subcontrol-position熟悉和subcontrol-origin屬性定位在父組件內。

    一旦定位，子控件就可以使用盒子模型定製樣式。

注意，像QComboBox和QScrollBar這樣複雜的組件，如果有一個屬性或是子控件選擇器被定製，所有其他的屬性或是子控件選擇器也要必須被定製。

 

五、QT樣式表參考

QT樣式表支持多種的屬性、狀態和子控件，使得定製組件的外觀成爲可能。

1、組件

以下組件都可以使用樣式表定製樣式。

組件	如何設置樣式
QAbstractScrollArea	支持盒子模型。 QAbstractScrollArea的所有繼承類，包括QTextEdit和QAbstractItemView（所有的項視圖類），都支持可滾動的背景，使用background-attachment來設置是否滾動。將background-attachment設置成fixed的話，就會使得background-image不隨視口（viewport）而滾動。如果將background-attachment設置成scroll，移動滾動條時，background-image會滾動。 參考自定義QAbstractScrollArea的示例。
QCheckBox	支持盒子模型。選中狀態的指示器可使用::indicator子控件（subcontrol）來進行樣式設置。默認情況下，指示器放在組件的內容矩形的左上角。 spacing屬性指定選中狀態指示器與文字之間的空隙。 參考自定義QCheckBox示例。
QColumnView	可使用image屬性來對收縮狀態進行樣式設置。箭頭指示器（arrow indicators）可使用::left-arrow和::right-arrow子控件來進行樣式設置。
QComboBox	組合框的框架（frame）可使用盒子模型來進行樣式設置。下拉按鈕可使用::drop-down子控件來進行樣式設置。默認情況下，下拉按鈕放置在組件的襯底區域的右上角。下拉按鈕中的箭頭標誌可使用::down-arrow子控件來進行樣式設置。默認情況下，箭頭是放置在下拉按鈕子控件的內容區域的中心。 參考自定義QComboBox示例。
QDialog	只支持background、background-clip和background-origin屬性。 警告：確保在自定義的組件中定義了Q_OBJECT宏。
QDialogButtonBox	按鈕的佈局方式可使用button-layout屬性來改變。
QDockWidget	在停靠狀態（docked），支持對標題欄和標題欄的按鈕進行樣式設置。 停靠組件的邊框（border）可使用border屬性來進行樣式設置。::title子控件可用來對標題欄進行樣式設置。關閉按鈕和懸浮按鈕相對於::title子控件的位置可分別使用::close-button和::float-button來進行設置。如果標題欄是豎直的，會設置:vertical僞類。 此外，根據QDockWidget::DockWidgetFeature值，設置:closable、:floatable和:movable僞狀態。 注意：使用QMainWindow::separator對改變大小的句柄進行樣式設置。 警告：在QDockWidget不處於停靠狀態時，樣式表無效。 參考自定義QDockWidget示例。
QFrame	支持盒子模型。 從QT4.3 開始，對QLabel設置樣式表，會自動將QFrame::frameStyle屬性設置成QFrame::StyledPanel。 參考自定義QFrame示例。
QGroupBox	支持盒子模型。標題可使用::title子控件來進行樣式設置。默認情況下，標題根據QGroupBox::textAlignment 屬性進行定位。 對於選中的QGroupBox，標題包含選中狀態指示器。指示器可使用::indicator子控件來進行樣式設置。spacing屬性用來設置文字與指示器之間的間隔。 參考自定義QGroupBox示例。
QHeaderView	支持盒子模型。表頭視圖的各個區域使用::section子控件來進行樣式設置的。section子控件支持:middle、:first、:last、 only-one、 :next-selected、:previous-selected、:selected和:checked僞狀態。 排序指示器使用::up-arrow和::down-arrow子控件來進行樣式設置。 參考自定義QHeaderView示例。
QLabel	支持盒子模型。不支持:hover僞狀態。 從QT4.3 開始，對QLabel設置樣式表會自動將QFrame::frameStyle 屬性設置成QFrame::StyledPanel。 參考自定義QFrame示例（QLabel繼承自QFrame）。
QLineEdit	支持盒子模型。 選中的項的顏色和背景分別是使用selection-color和selection-background-color來進行樣式設置。 密碼字符可使用lineedit-password-character屬性來進行樣式設置。 密碼掩碼延遲可使用lineedit-password-mask-delay屬性修改。 參考自定義QLineEdit示例。
QListView/ QListWidget	支持盒子模型。如果交替改變行顏色功能打開，交替的顏色使用alternate-background-color屬性來進行樣式設置。 選中的項的顏色和背景分別是使用selection-color和selection-background-color來進行樣式設置。 選擇行爲由show-decoration-selected屬性來進行控制。 使用::item子控件來對QListView中的項進行更精細控制。 參考QAbsractScrollArea以瞭解對可滾動的背景的樣式設置。 參考自定義QListView示例。
QMainWindow	支持對分隔符進行樣式設置。 在QMainWindow中使用QDockWidget時產生的分隔符使用::separator子控件來進行樣式設置。 參考自定義QMainWindow示例。
QMenu	支持盒子模型。 單個的項使用::item子控件來進行樣式設置。除通常的僞狀態外，item子控件還支持:selected、:default、:exclusive和non-exclusive僞狀態。 複選選的菜單項指示器是通過::indicator子控件來進行樣式設置。 分隔符是使用::separator子控件進行樣式設置。 對於有子菜單的項，箭頭標記是使用right-arrow和left-arrow進行樣式設置。 滾動器使用::scroller進行樣式設置。 分離菜單使用::tearoff來進行樣式設置。 參考自定義QMenu示例。
QMenuBar	支持盒子模型。spacing屬性指定菜單項之間的空隙大小。 單個的項使用::item子控件進行樣式設置。 警告：在Qt/Mac平臺上，菜單欄通常嵌入到系統的全局菜單條中。在這種情況下，樣式單無效。 參考自定義QMenuBar示例。
QMessageBox	messagebox-text-interaction-flags屬性用來選擇消息框中文字的交互模式。
QProgressBar	支持盒子模型。進度條的進度塊使用::chunk子控件來進行樣式設置。進度塊顯示在組件的內容區域中。 如果進度條顯示文字，使用text-align屬性來設置文字的位置。 不確定的進度條使用:indeterminate僞狀態設置。 參考自定義QProgressBar示例。
QPushButton	支持盒子模型。支持:default、:flat、:checked僞狀態。 對於帶菜單的QPushButton，其菜單指示器是使用::menu-indicator子控件來進行樣式設置的。複選的按鈕的外觀可使用:pen和:closed僞狀態進行樣式設置。 警告：如果只爲QPushButton設置background-color，背景可能不會顯示出來，除非將邊框屬性設置成某個值。這是因爲，在默認情況下，QPushButton會繪製一個完全覆蓋了背景色的本地邊框。例如， QPushButton { border: none; } 參考自定義QPushButton示例。
QRadioButton	支持盒子模型。選中指示器使用::indicator子控件進行樣式設置。默認情況下，指示器放置在組件內容區域的左上角。 spacing屬性指定選中指示器與文字之間的空隙。 參考自定義QRadioButton示例。
QScrollBar	支持盒子模型。組件中的內容區域就是滑塊滑動的槽。QScrollBar的廣度是使用width或height屬性設置的。要確定方向，使用:horizontal和:vertical僞狀態。 滑塊使用::handle子控件進行樣式設置。設置min-width或min-height按照方向來對滑塊提供尺寸的限制。 ::add-line子控件用來對增加一行的按鈕進行樣式設置。默認情況下，add-line子控件放置在組件邊框區域的右下角。默認情況下，箭頭放置在::add-line子控件內容區域的中心。 ::sub-line子控件用來對減少一行的按鈕進行樣式設置。默認情況下，sub-line子控件被放置在組件邊框區域的左上角。默認情況下，箭頭放置在sub-line子控件內容區域的中心。 ::sub-page子控件用來對減一頁作用的滑塊區域進行樣式設置。::add-page子控件用來對起到加一頁作用的滑塊區域進行樣式設置。 參考自定義QScrollBar示例。
QSizeGrip	支持width、height和image屬性。 參考自定義QSizeGrip示例。
QSlider	支持盒子模型。對於水平滑動器，必須提供min-width和height屬性。對於豎直滑動器，必須提供min-height和width屬性。 滑動器的滑槽使用::groove進行樣式設置。默認情況下，滑槽被放置在組件的內容區域中。滑動器的滑塊使用::handle子控件進行樣式設置。子控件在滑槽的內容區域中移動。 參考自定義QSlider示例。
QSpinBox QDateEdit QDateTimeEdit QDoubleSpinBox QTimeEdit	旋轉框的框架使用盒子模型來進行樣式設置。 向上按鈕和箭頭可使用::up-button和::up-arrow子控件來進行樣式設置。默認情況下，向上按鈕被放置在組件填充區域的右上角。如果沒有顯式設置尺寸，會佔據參考區域的一半高度。向上箭頭被放置在向上按鈕的內容區域的中心。 向下按鈕和箭頭使用::down-button和::down-arrow子控件進行樣式設置。默認情況下，向下按鈕被放置在組件填充區域的右下角。如果沒有顯式設置尺寸，會佔據參考區域的一半高度。向下箭頭被放置在向下按鈕的內容區域的中心。 參考自定義QSpinBox示例。
QSplitter	支持盒子模型。分割器的句柄使用::handle子控件進行樣式設置。 參考自定義QSplitter示例。
QStatusBar	只支持background屬性。單個項的框架使用::item子控件進行樣式設置。 參考自定義QStatusBar示例。
QTabBar	單個標籤使用::tab子控件進行樣式設置。關閉按鈕使用::close-button子控件進行樣式設置。標籤支持 only-one、:first、:last、:middle、:previous–selected、:next-selected、:selected僞狀態。 標籤的方向決定是否有:top、:left、:right、:bottom僞狀態。 對於選中狀態的重疊標籤通過使用負數的邊距或絕對位置模式來創建。 QTabBar的分離指示器使用::tear子控件進行樣式設置。 QTabBar用兩個QToolButtons作爲滾動器，使用QTabBar QToolButton選擇器進行樣式設置。使用::scroller子控件指定滾動按鈕的寬度。 QTabBar中標籤的對齊方式使用alignment屬性進行設置。 警告：要改變QTabWidget中的QTabBar的位置，使用tab-bar子控件。 參考自定義QTabBar示例。
QTabWidget	標籤組件的框架使用::pane子控件進行樣式設置。左邊角和右邊角分別使用::left-corner和::right-corner進行樣式設置。標籤條的位置使用::tab-bar子控件控制。 默認情況下，QTabWidget的子控件的位置按照QWindowsStyle風格來確定。要將QTabBar放置在中央的位置，設置tab-bar子控件的subcontrol-position屬性。 標籤組方向決定是否有:top、:left、:right、:bottom僞狀態。 參考自定義QTabWidget示例。
QTableView	支持盒子模型。如果交替改變行顏色功能開啓，交替的顏色使用alternate-background-color屬性進行樣式設置。 選中的項的顏色和背景分別是使用selection-color和selection-background-color進行樣式設置。 QTableView中的邊角組件由QAbstractButton實現，使用QTableViewQTableCornerButton::section選擇器進行樣式設置。 警告：如果只在QTableCornerButton上設置背景色，背景可能不會顯示出來，除非將邊框屬性設置成某個值。這是因爲，默認情況下，QTableCornerButton會繪製一個完全覆蓋背景色的本地邊框。 網格的顏色使用gridline-color屬性進行設置。 參考QAbsractScrollArea以瞭解如何設置可滾動的背景。 參考自定義QTableView示例。
QTextEdit	支持盒子模型。 選中文字的顏色和背景分別使用selection-color和selection-background-color進行樣式設置。 參考QAbsractScrollArea以瞭解如何設置可滾動的背景。
QToolBar	支持盒子模型。 工具欄所在的區域（停靠方向）決定是否會有:top、:left、:right、:bottom僞狀態。 :first、:last、:middle、:only-one僞狀態指示工具欄的位置是一個線性組（參考QStyleOptionToolBar::positionWithinLine） QToolBar的分隔符使用::separator子控件進行樣式設置。 用來移動工具欄的句柄使用::handle子控件進行樣式設置。 參考自定義QToolBar示例。
QToolButton	支持盒子模型。 如果QToolButton有菜單，::menu-indicator子控件用來對菜單指示器進行樣式設置。默認情況下，菜單指示器放置在組件填充區域的右下角。 如果QToolButton是QToolButton::MenuButtonPopup模式，::menu-button子控件用來繪製菜單按鈕。::menu-arrow子控件用來在菜單按鈕裏面繪製菜單箭頭。默認情況下，菜單按鈕子控件位於內容區域的中心。 當QToolButton顯示箭頭時，會使用::up-arrow、::down-arrow、::left-arrow和::right-arrow子控件。 警告：如果只在QToolButton 設置背景色，背景可能不會顯示出來，除非將邊框屬性設置成某個值。這是因爲，默認情況下，QToolButton會繪製一個完全覆蓋背景色的本地邊框。例如， QToolButton { border: none; } 參考自定義QToolButton示例。
QToolBox	支持盒子模型。 單個標籤使用::tab子控件進行樣式設置。標籤支持 :only-one、:first、:last、:middle、:previous-selected、:next-selected、:selected僞狀態。
QToolTip	支持盒子模型。opacity屬性控制工具提示的透明度。 參考自定義QFrame示例（QToolTip是QFrame）。
QTreeView QTreeWidget QTableWidget	支持盒子模型。如果交替改變行顏色功能開啓，交替的顏色使用alternate-background-color屬性進行樣式設置。 選中項的顏色和背景分別是使用selection-color和selection-background-color進行樣式設置。 選擇行爲由show-decoration-selected屬性進行控制。 樹型視圖的分支使用::branch子控件進行樣式設置。::branch子控件支持:open、:closed、:has-sibling和:has-children僞狀態。 使用::item子控件對QTreeView中的項進行更精細控制。 參考QAbsractScrollArea以瞭解如何設置可滾動的背景。 參考自定義QTreeView示例以瞭解如何對分支進行樣式設置。
QWidget	只支持background、background-clip和background-origin屬性。 如果從QWidget派生子類，需要爲自定義組件提供繪製事件處理函數（paintEvent）： void CustomWidget::paintEvent(QPaintEvent *) { QStyleOption opt; opt.init(this); QPainter p(this); style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this); } 如果沒有設置樣式單，以上的代碼不起任何作用。 警告：確保在自定義組件中定義了Q_OBJECT宏。

 

 

六、QT樣式表實例

1、樣式表的使用

A、定製前景色和背景色

    設置應用程序中的所有QLineEdit組件的背景色爲黃色

    qApp->setStyleSheet("QLineEdit {

    如果只想要屬性用於具體某個對話框的QLineEdit及子類組件。

    myDialog->setStyleSheet("QLineEdit {

    如果只想將屬性用於某個具體的QLineEdit組件，可以使用QObject::setObjectName() 和ID選擇器。

    myDialog->setStyleSheet("QLineEdit#nameEdit {

    可以直接設置QLieEdit組件的background-color屬性，忽略選擇器

    nameEdit->setStyleSheet("

    爲了確保對比效果，應該指定文本合適的顏色

    nameEdit->setStyleSheet("color: blue;

    修改選中文本的顏色如下：

    nameEdit->setStyleSheet("color: blue;"

                          ""

                          "selection-color: yellow;"

                          "selection-");

B、使用動態屬性定製樣式

爲了提示用戶字段是必填的，對這些字段使用黃色作爲背景色。要使用QT樣式表是現實很容易的。首先，應該使用應用程序的樣式表：

*[mandatoryField="true"] { margin: 0px; clear: both; height: auto; overflow: hidden; color: rgb(85, 85, 85); font-family: 宋體, "Arial Narrow", arial, serif; text-indent: 28px; text-align: justify;">這意味着mandatoryField字段設置爲true的組件的背景色爲黃色。

對於每個必備字段組件，我們匆忙中簡單創建了一個mandatoryField屬性並設置爲true。

    QLineEdit *nameEdit = new QLineEdit(this);

    nameEdit->setProperty("mandatoryField", true);

 

    QLineEdit *emailEdit = new QLineEdit(this);

    emailEdit->setProperty("mandatoryField", true);

 

   QSpinBox *ageSpinBox = new QSpinBox(this);

   ageSpinBox->setProperty("mandatoryField", true);

C、使用盒子模型定製QPushButton

本節我們展示如何創建一個紅色的按鈕。

QPushButton#evilButton

{

      

      border-style: outset;

      border-width: 2px;

      border-radius: 10px;

      border-color: beige;

      font: bold 14px;

      min-width: 10em;

      padding: 6px;

  }

  QPushButton#evilButton:pressed

{

      

      border-style: inset;

  }

D、定製按鈕菜單指示器子控件

    子控件可以訪問組件的子元素。例如，按鈕會使用QPushButton::setMenu()關聯菜單與菜單指示器。定製紅色按鈕的菜單指示器如下：

QPushButton#evilButton::menu-indicator

{

      image: url(myindicator.png);

 }

    默認，菜單指示器定位在襯底區域的右下角。通過改變subcontrol-position、subcontrol-origin屬性可以定位指示器。

QPushButton::menu-indicator

{

      image: url(myindicator.png);

      subcontrol-position: right center;

      subcontrol-origin: padding;

      left: -2px;

  }

    Myindicator.png的位置在按鈕襯底區域的右中心。

E、複雜選擇器示例

    設置應用程序樣式表中QLineEdit文本爲紅色。

    QLineEdit { color: red }

    然而，想要設置一個只讀QLineEdit的文本顏色爲灰色如下：

    QLineEdit { color: red }

    QLineEdit[readOnly="true"] { color: gray }

    某些情況下，如果要求註冊表單中的所有QLineEdit爲棕色。

    QLineEdit { color: red }

     QLineEdit[readOnly="true"] { color: gray }

     #registrationDialog QLineEdit { color: brown }

    如果要求所有對話框中的QLineEdit爲棕色。

    QLineEdit { color: red }

    QLineEdit[readOnly="true"] { color: gray }

    QDialog QLineEdit { color: brown }

 

2、定製特殊組件

本節提供使用樣式表定製特定組件的實例。

（1）、定製QAbstractScrollArea

任何QAbstractScrollArea組件(項視圖、QTextEdit、QTextBrowser)的背景都可以使用bakcground屬性設置。例如，設置帶有滾動條滾動的背景圖屬性如下：

QTextEdit, QListView 

{

      

      background-image: url(draft.png);

      background-attachment: scroll;

  }

如果設置background-image屬性在視口中固定。

QTextEdit, QListView 

{

      

      background-image: url(draft.png);

      background-attachment: fixed;

  }

（2）、定製QCheckBox

進行QCheckBox樣式設置與QRadioButton樣式設置相同。主要區別在於三態的QCheckBox有一個模糊態。

QCheckBox 

{

      spacing: 5px;

  }

 

  QCheckBox::indicator

{

      width: 13px;

      height: 13px;

  }

 

  QCheckBox::indicator:unchecked

{

      image: url(:/images/checkbox_unchecked.png);

  }

 

  QCheckBox::indicator:unchecked:hover

{

      image: url(:/images/checkbox_unchecked_hover.png);

  }

 

  QCheckBox::indicator:unchecked:pressed

{

      image: url(:/images/checkbox_unchecked_pressed.png);

  }

 

  QCheckBox::indicator:checked

{

      image: url(:/images/checkbox_checked.png);

  }

 

  QCheckBox::indicator:checked:hover

{

      image: url(:/images/checkbox_checked_hover.png);

  }

 

  QCheckBox::indicator:checked:pressed

{

      image: url(:/images/checkbox_checked_pressed.png);

  }

 

  QCheckBox::indicator:indeterminate:hover

{

      image: url(:/images/checkbox_indeterminate_hover.png);

  }

 

  QCheckBox::indicator:indeterminate:pressed {

      image: url(:/images/checkbox_indeterminate_pressed.png);

  }

（3）、定製組合框QComboBox

QComboBox {

      border: 1px solid gray;

      border-radius: 3px;

      padding: 1px 18px 1px 3px;

      min-width: 6em;

  }

 

  QComboBox:editable {

      background: white;

  }

 

  QComboBox:!editable, QComboBox::drop-down:editable {

       background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                   stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,

                                   stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);

  }

 

  /* QComboBox gets the "on" state when the popup is open */

  QComboBox:!editable:on, QComboBox::drop-down:editable:on {

      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                  stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,

                                  stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);

  }

 

  QComboBox:on { /* shift the text when the popup opens */

      padding-top: 3px;

      padding-left: 4px;

  }

 

  QComboBox::drop-down {

      subcontrol-origin: padding;

      subcontrol-position: top right;

      width: 15px;

 

      border-left-width: 1px;

      border-left-color: darkgray;

      border-left-style: solid; /* just a single line */

      border-top-right-radius: 3px; /* same radius as the QComboBox */

      border-bottom-right-radius: 3px;

  }

 

  QComboBox::down-arrow {

      image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);

  }

 

  QComboBox::down-arrow:on { /* shift the arrow when popup is open */

      top: 1px;

      left: 1px;

  }

    組合框的彈出菜單是QAbstractItemView，使用後代選擇器進行樣式設置。

  QComboBox QAbstractItemView {

      border: 2px solid darkgray;

      selection-

  }

（4）、定製QDockWidget

QDockWidget的標題欄和按鈕可以按如下進行樣式設置。

QDockWidget

{

    border: 1px solid lightgray;

    titlebar-close-icon: url(close.png);

    titlebar-normal-icon: url(undock.png);

}

 

QDockWidget::title

{

    text-align: left; /* align the text to the left */

    background: lightgray;

    padding-left: 5px;

}

 

QDockWidget::close-button, QDockWidget::float-button

{

    border: 1px solid transparent;

    background: darkgray;

    padding: 0px;

}

 

QDockWidget::close-button:hover, QDockWidget::float-button:hover

{

    background: gray;

}

 

QDockWidget::close-button:pressed, QDockWidget::float-button:pressed

{

    padding: 1px -1px -1px 1px;

}

如果要移動停靠組件按鈕到左側，可以使用如下樣式表設置：

QDockWidget 

{

      border: 1px solid lightgray;

      titlebar-close-icon: url(close.png);

      titlebar-normal-icon: url(float.png);

 }

 

  QDockWidget::title 

  {

      text-align: left;

      background: lightgray;

      padding-left: 35px;

  }

 

  QDockWidget::close-button, QDockWidget::float-button 

  {

      background: darkgray;

      padding: 0px;

      icon-size: 14px; /* maximum icon size */

  }

 

  QDockWidget::close-button:hover, QDockWidget::float-button:hover 

  {

      background: gray;

  }

 

  QDockWidget::close-button:pressed, QDockWidget::float-button:pressed 

  {

      padding: 1px -1px -1px 1px;

  }

 

  QDockWidget::close-button 

  {

      subcontrol-position: top left;

      subcontrol-origin: margin;

      position: absolute;

      top: 0px; left: 0px; bottom: 0px;

      width: 14px;

  }

 

  QDockWidget::float-button 

  {

      subcontrol-position: top left;

      subcontrol-origin: margin;

      position: absolute;

      top: 0px; left: 16px; bottom: 0px;

      width: 14px;

  }

（5）、定製QFrame

QFrame, QLabel, QToolTip 

{

      border: 2px solid green;

      border-radius: 4px;

      padding: 2px;

      background-image: url(images/welcome.png);

}

（6）、定製QGroupBox

QGroupBox

{

    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                      stop: 0 #E0E0E0, stop: 1 #FFFFFF);

    border: 2px solid gray;

    border-radius: 5px;

    margin-top: 1ex; /* leave space at the top for the title */

}

QGroupBox::title

{

    subcontrol-origin: margin;

    subcontrol-position: top center; /* position at the top center */

    padding: 0 3px;

    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                      stop: 0 #FF0ECE, stop: 1 #FFFFFF);

}

QGroupBox::indicator

{

    width: 13px;

    height: 13px;

}

 

QGroupBox::indicator:unchecked

{

    image: url(:/images/checkbox_unchecked.png);

}

（7）、定製QHeaderView

QHeaderView::section 

{

    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,

                                      stop:0 #616161, stop: 0.5 #505050,

                                      stop: 0.6 #434343, stop:1 #656565);

color: white;

    padding-left: 4px;

border: 1px solid #6c6c6c;

}

 

QHeaderView::section:checked

{

    background-color: red;

}

 

QHeaderView::down-arrow 

{

    image: url(down_arrow.png);

}

 

QHeaderView::up-arrow 

{

    image: url(up_arrow.png);

}

（8）、定製QLineEdit

QLineEdit的框架使用盒子模型進行樣式設置。

QLineEdit 

{

    border: 2px solid gray;

    border-radius: 10px;

    padding: 0 8px;

    background: yellow;

    selection-background-color: darkgray;

}

QLineEdit的密碼字符使用QLineEdit::Password顯示模式設置。

QLineEdit[echoMode="2"] 

{

    lineedit-password-character: 9679;

}

只讀QLineEdit的背景可以如下修改：

QLineEdit:read-only 

{

    background: lightblue;

}

 

可以參考的文章鏈接：

http://9291927.blog.51cto.com/9281927/1888380/

http://9291927.blog.51cto.com/9281927/1888395

http://9291927.blog.51cto.com/9281927/1888400

http://blog.csdn.net/goforwardtostep/article/details/60884870

http://blog.csdn.net/GoForwardToStep/article/details/64169734

http://blog.csdn.net/GoForwardToStep/article/details/65451416