Qt的皮膚設計（Style Sheet）

Qt的皮膚設計，也可以說是對Qt應用程式的介面美化，Qt使用了一種類CSS的樣式規則QSS。

 

一、Style Sheet的應用

1.直接在程式程式碼中設定樣式，利用setStyleSheet()方法

widget->setStyleSheet("color:red");     //widget內字型顏色為紅色

widget->->setStyleSheet(QPushButton{color:red} QPushButton:hove{color:yellow}); 

 //widget內的QPushButton物件字型顏色為紅色，當滑鼠懸浮時為黃色

 

2.使用qss檔案

步驟：

建立qss文件，例：stylesheet.qss

根據qss語法，寫自定義的內容（詳見qss語法）

引入qss檔案，使介面效果生效

QFile file("skin/clean.qss");//路徑為應用程式所在目錄開始

file.open(QFile::ReadOnly);

QTextStream filetext(&file);

QString stylesheet= filetext.readAll();

this->setStyleSheet(stylesheet);

 

二、qss語法

qss和css一樣有兩部分組成，選擇器和語句宣告（selector和declaration）

選擇器分為一般選擇器、子控制元件選擇器(輔助控制器)和偽選擇器（偽狀態）（下面為轉載，出處http://www.cnblogs.com/davesla/archive/2011/01/30/1947928.html）

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再setqss。
• 類選擇器：.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

常用的語句宣告

基本用法

QPushButton { color: red }

多個共享屬性(  ,  )

 QPushButton, QLineEdit, QComboBox { color: red }

設定多個屬性（  ; ）

QPushButton { color: red; background-color: white }

 

常用的屬性

color:red //字型顏色為紅色

background:yellow //背景顏色為黃色

background-color:yellow //使用rgb(255,0,0)  rgba（255，0，0，50%）最後為透明度 #ffffff顏色RGB值

background-image:url(images/top.jpg);//背景不隨視窗伸縮

border:1px solid gray //邊框為1px並填充實心灰色 （groove凹槽）

border-top  boder-botom……

boder-color

border-radius:10px //邊框圓角半徑為10px

border-top-left-radius

border-top-rightt-radius

……

border-image:url(images/top.jpg);//背景圖片隨視窗變化

padding：2px 4px //設定內邊框屬性上內邊距2px，右內邊距為4px，下為0，左為0可不寫（上右下左）

##設定背景顏色漸變

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #C7F8FA); /*背景顏色：顏色漸變(x1右,y1下,x2左,y2上,stop漸變點(0-1):顏色) ，y2:1顏色從上向下漸變*/
詳細參考http://doc.qt.nokia.com/latest/stylesheet-reference.html的List of Properties

 

 

以上所有可檢視Qt的線上幫助手冊http://doc.qt.nokia.com/latest/stylesheet.html