Qt的皮膚設計（Style Sheet）

 

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

 

1、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);

 

2、qss語法

qss和css同樣有兩部分組成，選擇器和語句聲明（selector和declaration）

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

一、 通常選擇器（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的實例，不包含兒子的兒子的遞歸。

二、子控件選擇器

• 對於複雜的控件，可能會在其中包含其餘子控件，如一個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 {
        
  }
  表示鼠標通過時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