Qt的皮膚設計（Style Sheet）

標籤：

原地址：http://blog.csdn.net/lastsoup/article/details/7043124

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 {
        
  }
  表示滑鼠經過時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;  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 21.6px;"> 

 

常用的屬性

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

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

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

http://www.cnblogs.com/lanye/p/3533735.html

Qt的皮膚設計（Style Sheet）