Qt拿來(lái)畫控件還是很方便的，其中除了重寫paint() 函數(shù)外，最常用的就是控件的樣式表qss了裆操。本文簡(jiǎn)單介紹下QSS官地，同時(shí)記錄下各種QSS日常騷操作酿傍。

QSS介紹

QSS簡(jiǎn)介

QSS稱為Qt Style Sheets也就是Qt樣式表，它是Qt提供的一種用來(lái)自定義控件外觀的機(jī)制驱入。QSS大量參考了CSS的內(nèi)容赤炒，只不過(guò)QSS的功能比CSS要弱很多，體現(xiàn)在選擇器要少亏较，可以使用的QSS屬性也要少很多莺褒，并且并不是所有的屬性都可以用在Qt的所有控件上。

QSS的語(yǔ)法規(guī)則

基本和CSS相同雪情，只是有的屬性QSS中沒(méi)有遵岩，相當(dāng)于CSS的子集。

QSS的選擇器類型

另外上面所有的這些選擇器可以聯(lián)合使用，并且支持一次設(shè)置多個(gè)選擇器類型丧靡，用逗號(hào)隔開(kāi)，同CSS一樣窘行。

QSS子控件

QSS為很多復(fù)雜的復(fù)合控件提供了子控件的定義饥追，以方便對(duì)這些復(fù)合控件的各個(gè)部分進(jìn)行樣式設(shè)置，具體使用下面說(shuō)明罐盔。

QSS偽狀態(tài)

QSS的偽狀態(tài)選擇器實(shí)際上與CSS中的類似但绕，是以冒號(hào)開(kāi)頭的一個(gè)選擇表達(dá)式，他限制了當(dāng)控件在某一種狀態(tài)下的時(shí)候才能應(yīng)用QSS規(guī)則惶看，偽狀態(tài)只能描述一個(gè)控件的狀態(tài)捏顺，或者是一個(gè)復(fù)合控件中的子控件的狀態(tài)。下面列出常用的偽狀態(tài)：

QSS代碼片段

單個(gè)控件

QPushButton{        /*按鈕上圖標(biāo)下文字*/
    text-align:bottom ;
    image-position:top;
    color: #666666;
    border:none;
    image: url(:xxxxx.png);
}

QPushButton{         /*按鈕自適應(yīng)拉伸背景*/
border-width: 2px 15px 2px 15px;
border-image: url(:/resource/icon/button_nomal.png) 2 15 2 15 repeat stretch;
color:#3288E8;
}

QPushButton{        /*按鈕選中帶下劃線*/
border:none;
border-width:5;
border-bottom-style:solid;
border-color:transparent;
color:#666666;
}
QPushButton:checked{
color:#3288E8;
border-color: #3288E8;
}

QPushButton{      /*按鈕左文字右圖標(biāo)*/
    background-image:url(:/resource/btn.png);
    background-repeat:norepeat;
    background-position:right;
    text-align:right;
    border:none;
    color:white;    
    padding-right:35px;
}

QPushButton {  //按鈕漸變背景
    font-size:12px;
    border-radius:2px;
    color:rgba(51,51,51,1);
    background:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgba(242,242,242,1), stop:1 rgba(255,255,255,1));
    border:1px solid rgba(221,221,221,1);
}

QWidget#line{ //在Widget某一邊畫分割線
    background-color:white;
    border-left:none;
    border-top:none;
    border-right:none;
    border-bottom:1px solid rgba(216,216,216,1);
}

含子控件

/**************************************CheckBox*********************************************/
QCheckBox::indicator:unchecked{
image: url(:/resource/chebox_off.png)
}

QCheckBox::indicator:checked{
image: url(:/resourcechebox_on.png)
}
/**************************************CheckBox*********************************************/


/**************************************QTabBar*********************************************/
QTabBar::tab {
    color: #666666; 
    height:40px; 
    width:100px;
} 
QTabBar::tab:selected {
    color: #333333; 
    font-weight:bold
}
 QTabBar::tab:hover {
    color: #666666;
}
/**************************************QTabBar*********************************************/


/**************************************滑動(dòng)條*********************************************/
QSlider {
    background: rgb(170, 170, 170);
    padding: 2px;
    height: 40px;
}
QSlider::groove:horizontal {
    subcontrol-origin: content;
    background: rgb(76, 76, 76);
    
    /* the groove expands to the size of the slider by default. 
    by giving it a height, it has a fixed size */
    height: 20px;
}
QSlider::handle:horizontal {
    background-color: rgb(50, 50, 50);
    width: 40px;
    border-radius: 20px;
    
    /* handle is placed by default on the contents rect of the groove. 
    Expand outside the groove */
    margin: -10px 0;
}
QSlider::sub-page:horizontal {
    background: #999;
    margin: 5px;
    border-radius: 5px;
}
QSlider::add-page:horizontal {
    background: #666;
    margin: 5px;
    border-radius: 5px;
}
/**************************************滑動(dòng)條*********************************************/


/**************************************下拉框*********************************************/
QComboBox{
border:0px; 
background-color:transparent;
color:#333333; 
}
QComboBox::down-arrow{
image:none;
}
QComboBox::drop-down{
width:0px; 
border:0px;
}
QComboBox QAbstractItemView {
color:#333333;
border: 1px solid #DDDDDD;
background-color:white;
selection-color:white;
selection-background-color: rgb(0, 102, 96);
}
/**************************************下拉框*********************************************/


/**************************************滾動(dòng)條*********************************************/
QScrollBar:horizontal {
    height: 16px;
    border-width: 0px 10px 0px 10px;
    border-image: url(:/img/horizontal-track.png) 0 10 0 10 repeat stretch;
    margin-left: 6px;
    margin-right: 16px;
    padding-right: 4px;
}
QScrollBar::handle:horizontal {
    min-width: 40px;
    border-width: 0 17px 0 17px;
    border-image: url(:/img/horizontal-handle.png) 0 17 0 17 repeat repeat;
}
QScrollBar::sub-line:horizontal {
    width: 20px;
    height: 17px;
    subcontrol-position: left;
    subcontrol-origin: margin;
    background-image: url(:/img/horizontal-sub-line.png)
}
QScrollBar::add-line:horizontal {
    width: 20px;
    height: 17px;
    subcontrol-position: right;
    subcontrol-origin: border;
    background-image: url(:/img/horizontal-add-line.png)
}
QScrollBar:vertical {
    width: 16px;
    border-width: 10px 0px 10px 0px;
    border-image: url(:/img/vertical-track.png) 10 0 10 0 repeat repeat;
    margin-top: 6px;
    margin-bottom: 16px;
    padding-bottom: 6px;
}
QScrollBar::handle:vertical {
    min-height: 40px;
    border-width: 17px 0px 17px 0px;
    border-image: url(:/img/vertical-handle.png) 17 0 17 0 repeat repeat;
}
QScrollBar::sub-line:vertical {
    width: 17px;
    height: 22px;
    subcontrol-position: top left;
    subcontrol-origin: margin;
    background-image: url(:/img/vertical-sub-line.png)
}
QScrollBar::add-line:vertical {
    width: 17px;
    height: 22px;
    subcontrol-position: bottom;
    subcontrol-origin: border;
    background-image: url(:/img/vertical-add-line.png)
}
/**************************************滾動(dòng)條*********************************************/

/**************************************滑塊*********************************************/
QSlider {
    height: 20px;
}

QSlider::groove:horizontal {
    subcontrol-origin: content;
    background: transparent;
    height: 20px;
}

QSlider::handle:horizontal {
    background-color: rgb(50, 50, 50);
    width: 20px;
    border-radius: 10px;
}

QSlider::sub-page:horizontal {
    background: #0078FF;
    margin: 7px;
    border-radius: 3px;
}

QSlider::add-page:horizontal {
    background: #999999;
    margin: 7px;
    border-radius: 3px;
}
/**************************************滑塊*********************************************/

持續(xù)更新ing...

參考資料

• QSS總結(jié)以及最近做的Qt項(xiàng)目
• Qss
• Qt之QSS（樣式表語(yǔ)法）