QT開發（六十四）——QT樣式表（一）

QT開發（六十四）——QT樣式表

    本文主要翻譯自QT官方文檔Qt Style Sheets 。

一、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{background-color:red; 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; background-color: white }

2、選擇器的類型

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

3、子控件選擇器

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

    QComboBox::drop-down { p_w_picpath: 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 {

          p_w_picpath: 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 { p_w_picpath: 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-p_w_picpath屬性指定組件的背景。默認，background-p_w_picpath只會在邊界矩形內被繪制，使用background-clip屬性可以修改。使用background-repeat屬性和background-origin屬性來控制背景圖片的重復和來源。

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

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

    渲染規則的步驟如下：

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

    B、繪制背景（background-p_w_picpath）

 C、繪制邊界（border-p_w_picpath，border）

 D、繪制覆蓋圖像（p_w_picpath）

2、子控件

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

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

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

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