QT皮膚(QSS)程式設計

借用css 的靈感， Qt也支援Qt自己的css, 簡稱qss。同css 相似，qss的主要功能與最終目的都是能使介面的表現與介面的元素分離，即質與形的分離，就如同一個人可以在不同的時候穿上不同的衣服一樣，css機制的引入，使得設計一種皮膚與介面控制元件分離的軟體成為可能，應用程式也能像web介面那樣隨意地改變外觀。

一、QSS語法

同css一樣，他也有由一個selector與一個declaration組成，selector指定了是對哪一個控制元件產生效果，而declaration才是真正的產生作用的語句。如：
QPushButton { color: red }
QPushButton指定了是對所有的QPushButton或是其子類控制元件（如使用者定義的MyPushButton）產生影響，而color:red表明所有的受影響控制元件的前景色都為red。
除了“類名”，“物件名”，“Qt屬性名”這三樣東西是大小寫敏感的外其他的東西都是大小寫不敏感的，如color與Color代表同一屬性。
如果有幾個selector指定了相同的declaration, 可以使用逗號（,）將各個選擇器分開，如：
QPushButton, QLineEdit, QComboBox { color: red }
他相當於：
QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }
declaration部份是一系列的（屬性：值）對，使用分號（;）將各個不同的屬性值對分開，使用大括號（{}）將所有declaration包含在一起。

1、 一般選擇器（selector）

Qt支援所有的CSS2定義的選擇器，其祥細內容可以在w3c的網站上查詢http://www.w3.org/TR/CSS2/selector.html ， 其中比較常用的selector型別有：

• 通用型別選擇器：* 會對所有控制元件有效果。
• 型別選擇器：QPushButton匹配所有QPushButton的例項和其子類的例項。
• 屬性選擇器：QPushButton[flat=”false”]匹配所有QPushButton屬性flat為false的例項，屬性分為兩種，靜態的和動態的，靜態屬性可以通過Q_PROPERTY() 來指定，來動態屬性可以使用setProperty來指定，如：
  QLineEdit *nameEdit = new QLineEdit(this);
  nameEdit->setProperty("mandatoryField", true);
  如果在設定了qss後Qt屬性改變了，需要重新設定qss來使其生效，可以使用先unset再set qss。
• 類選擇器：.QPushButton匹配所有QPushButton的例項，但不包含其子類，這相當於：*[class~="QPushButton"]     ~=的意思是測試一個QStringList型別的屬性是否包含給定的QString
• ID選擇器：QPushButton#okButton對應Qt裡面的object name設定，使用這條CSS之前要先設定對應控制元件的object name為okButton，如：Ok->setObjectName(tr(“okButton”));
• 後裔選擇器：QDialog QPushButton匹配所有為QDialog後裔（包含兒子，與兒子的兒子的遞迴）為QPushButton的例項
• 子選擇器：QDialog > QPushButton匹配所有的QDialog直接子類QPushButton的例項，不包含兒子的兒子的遞迴。

2、子控制元件選擇器

• 對於複雜的控制元件，可能會在其中包含其他子控制元件，如一個QComboxBox中有一個drop-down的按鈕。那麼現在如果要設定QComboxBox的下拉按鈕的話，就可以這樣訪問：
  QComboBox::drop-down { image: url(dropdown.png) }其標誌是（::）
• 子控制元件選擇器是用位置的引用來代表一個元素，這個元素可以是一個單一控制元件或是另一個包含子控制元件的複合控制元件。使用subcontrol-origin屬性可以改變子控制元件的預設放置位置，如：
  QComboBox {
         margin-right: 20px;
  }
  QComboBox::drop-down {
         subcontrol-origin: margin;
  }
  
  如上語句可以用來改變drop-down的margin。
• 相對位置屬性可以用來改變子控制元件相對於最初位置的偏移量，如當一個QCombox的drop-down按鈕被按下時，我們可以用一個內部的小偏移量來表示被按下的效果，如下：
  QComboBox::down-arrow {
         image: url(down_arrow.png);
  }
  QComboBox::down-arrow:pressed {
         position: relative;
         top: 1px; left: 1px;
  }
• 絕對位置屬性允許子控制元件改變自己的位置和大小而不受引用元素的控制元件。一但位置被設定了，這些子控制元件就可以被當成一般的widget來對待，並且可以使用合模型。關於合模型可以參考下面。

如果你要檢視Qt支援哪些子控制元件選擇器，可以參考：http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls-syntax.html
3、偽選擇器（pseudo-states）

• 偽選擇器以冒號（:）表示，與css裡的偽選擇器相似，是基於控制元件的一些基本狀態來限定程式的規則，如hover規則表示滑鼠經過控制元件時的狀態，而press表示按下按鈕時的狀態。如：
  QPushButton:hover {
         Background-color:red;
  }
  表示滑鼠經過時QPushButton背景變紅。
• Pseudo還支援否定符號(!)，如：
  QRadioButton:!hover { color: red }
  表示沒有滑鼠移上QRadioButton時他顯示的顏色是red。
• Pseudo可以被串連在一起，比如：
  QPushButton:hover:!pressed { color: blue; }
  表示QPushButton在滑鼠移上卻沒有點選時顯示blue字，但如果點選的時候就不會顯示blue顏色了。
• 同樣可以和之前所講的子控制元件選擇器一起聯合使用，如：
  QSpinBox::down-button:hover { image: url(btn-combobox-press.bmp) }
• 與前面所講的一樣，偽選擇器，子控制元件選擇器等都是可以用逗號(,)分隔表示連續相同的設定的，如：
  QPushButton:hover,QSpinBox::down-button, QCheckBox:checked { color: white ;image: url(btn-combobox-press.bmp);} 表示如下
• 更多請參考：http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-pseudo-states

二、 解決衝突

• 使用object name
  
  • 在程式裡面要先設定控制元件的，如：
    btnOne = new QPushButton(centralWidget);
    btnOne->setObjectName(QString::fromUtf8("btnOneCh"));
  • 這樣，我們有了一個object name為btnOneCh的QPushButton，試驗一下，使用指定object name的方式，如：
    QPushButton#btnOneCh { color: red }
    QPushButton { color: white }
    可以看出，btnOncCh的color變成了red
• 使用偽選擇器，如hover，press，enabled等，如：按扭“1”是disable了的，QPushButton:!enabled {color: white}
• 所有的型別選擇器都有一個共同的特性，就是如果有兩個屬性衝突了的話就會以最後出現的一個為準,如：
  QPushButton { color: red }
  QAbstractButton { color: gray }
  由於QPushButton為QAbstractButton的子類，如果只設定QAbstractButton的可以想像結果是所有的QPushButton都為gray, 如果只設定QPushButton的所有QPushButton都會為red，當兩個都能設定起效的時候，以在文字上最後出現的為準，所以結果為Grey
• 當然其中如果有#指定了object name，他所設定的優先順序是最大的，具體規則可以參考：http://www.w3.org/TR/CSS2/cascade.html#specificity，或是http://pepper.troll.no/s60prereleases/doc/stylesheet-syntax.html#conflict-resolution
  QPushButton#btnOneCh { color: red }
  QPushButton { color: blue }
  QAbstractButton { color: gray }
  雖然QAbstractButton在最後，但是之前有#btnOneCh指定了QPushButton“一”的color為red所以最後顯示也是“一”為red。

三、級聯效應

• 子類可以繼承父類的StyleSheet，但是如果子類裡面設定了StyleSheet與父類裡在設定的有衝突，那麼當然會優先考慮子類自己的，
  同樣，如果在qApp時面設定了，但是在某一個特定控制元件裡面也設定，如果有衝突，也是優先控制元件自己的，例如，我在程式時面設定了：btnOneEn->setStyleSheet("QPushButton { color: red }");
  而，當我再設定qApp時，如果，將QPushButton的color設定成grey的，那麼結果是對於btnOneEn這個QPushButton來說他的顏色還是red。
  這就是為什麼這裡設定為grey了btnOneEn卻還是red的。
• 如果我們對一個控制元件設定StyleSheet為：
  QPushButton* myPushButton;
  myPushButton->setStyleSheet("* { color: blue }");
  其實他和設定為：myPushButton->setStyleSheet("color: blue");
  效果相同，只是後一種設定不會對QPushButton的子類產生作用，但第一種卻會。

四、繼承性

與CSS不同的一點，在CSS box模型中，如果一個元素在別一元素的裡面，那麼裡面的元素會自動繼承外面元素的屬性，但QSS裡面不會，如：
一個QPushButton如果放在一個QGroupBox裡面，如果：qApp->setStyleSheet("QGroupBox { color: red; } ");
並不代表在QGroupBox裡面的QPushButton也會有color:red的屬性，如果要想有的話要顯示寫明，如：qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");
或者在應用程式裡面也可以用QWidget::setFont等來設定到子控制元件的屬性。

五、Namespace衝突

型別選擇器能夠使用到一個特定的型別，如：
class MyPushButton : public QPushButton {
      // ...
}
qApp->setStyleSheet("MyPushButton { background: yellow; }");

因為QSS使用QObject::className來判斷要賦與style sheet的控制元件型別，如果一個使用者定義控制元件型別在一個namespace裡面的話，QObject::className會返回<namespace>::<classname> 的名字，這和子控制元件選擇器的語法相沖突，為了解決此問題，使用“--”來代替“::”，比如：
namespace ns {
      class MyPushButton : public QPushButton {
          // ...
      }
}
qApp->setSytleSheet("ns--MyPushButton { background: yellow; }");

六、設定對像屬性

如果在程式裡面使用Q_PROPERTY設定的屬性，可以在qss裡面使用：qproperty-<property name>的形式來訪問並設定值。如：
MyLabel { qproperty-pixmap: url(pixmap.png); }
MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }
QPushButton { qproperty-iconSize: 20px 20px; }
如果屬性引用到的是一個由Q_ENUMS申明的enum 時，要引用其屬性名字要用定義的名稱而不是數字。
引用：http://pepper.troll.no/s60prereleases/doc/stylesheet