qt qss

QT皮膚(QSS)編程：

借用css 的靈感， Qt也支持Qt本身的css, 簡稱qss。同css 類似，qss的主要功能與最終目的都是能使界面的表現與界面的元素分離，即質與形的分離，就如同一我的能夠在不一樣的時候穿上不一樣的衣服同樣，css機制的引入，使得設計一種皮膚與界面控件分離的軟件成爲可能，應用程序也能像web界面那樣隨意地改變外觀。

1、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包含在一塊兒。

一、 通常選擇器（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。
• 我本身實現的一種方式(可行)：

pushButton_ok->setEnabled(true);

QString buttonStyleSheet = pushButton_ok->styleSheet();

pushButton_ok->setStyleSheet("");

pushButton_ok->setStyleSheet(buttonStyleSheet);

• 類選擇器：.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的實例，不包含兒子的兒子的遞歸。

二、子控件選擇器

• 對於複雜的控件，可能會在其中包含其餘子控件，如一個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
三、僞選擇器（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

2、 解決衝突

• 使用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。

3、級聯效應

• 子類能夠繼承父類的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的子類產生做用，但第一種卻會。

4、繼承性

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

5、Namespace衝突

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

由於QSS使用QObject::className來判斷要賦與style sheet的控件類型，若是一個用戶定義控件類型在一個namespace裏面的話，QObject::className會返回:: 的名字，這和子控件選擇器的語法相沖突，爲了解決此問題，使用「--」來代替「::」，好比：
namespace ns {
      class MyPushButton : public QPushButton {
          // ...
      }
}
qApp->setSytleSheet("ns--MyPushButton { background: yellow; }");

6、設置對像屬性

若是在程序裏面使用Q_PROPERTY設置的屬性，能夠在qss裏面使用：qproperty-的形式來訪問並設置值。如：
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