Qt樣式表

QT樣式表參考CSS層疊樣式表設計，不同之處在於QT樣式表應用於Widget世界。

可以使用QApplication::setStyleSheet()函數設置到整個應用程序上，也可以使用QWidget::setStyleSheet()設置到某一個部件以及子部件上。如果在不同的級別都設置了樣式表，QT會使用所有有效的樣式表，稱為樣式表的層疊。

this->setStyleSheet("QpushButton{background:yellow}QSlider{background:blue}");

QPushButton{
	border-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 rgba(0, 0, 0, 255), stop:0.19397 rgba(0, 0, 0, 255), stop:0.202312 rgba(122, 97, 0, 255), stop:0.495514 rgba(76, 58, 0, 255), stop:0.504819 rgba(255, 255, 255, 255), stop:0.79 rgba(255, 255, 255, 255), stop:1 rgba(255, 158, 158, 255));
	background-color: rgb(65, 48, 255);
}

樣式表語法

樣式規則

QPushButton{color:red}

QPushButton是選擇符，{color:red}是聲明，color是屬性，red 是值

選擇符

選擇符	示例	說明
通用選擇符	*	匹配所有部件
類型選擇符	QPushButton	匹配所有QPushButton實例和它的所有子類
屬性選擇符	QPushButton[flat = "false"]	匹配QPushButton的屬性flat為false實例
類選擇符	.QPushButton	匹配所有QPushButton實例但不包含它的子類
ID選擇符	QPushButton#okButton	匹配所有QPushButton中以okButton為對象名的實例
后代選擇符	QDialog QPushButton	匹配所有QPushButton實例，必須是QDialog的子孫部件
孩子選擇符	QDialog>QPushButton	匹配所有QPushButton實例，必須是QDialog的直接子部件

子控件

QComboBox的下拉按鈕子控件

QSpinBox的向上向下箭頭子控件

選擇符可以包含子控件對部件的特定子控件應用規則

QComboBox::drop-down{image:url(dropdown.jpg)}此規則改變所有QComboBox部件的下拉按鈕樣式

偽狀態

QCheckBox:hover:checked{color:red} 當鼠標懸停在一個被選中的QCheckBox上時才應用規則。

沖突解決

特殊的優先

層疊

樣式表可以設置在QApplication或者父部件上。部件有效的樣式表通過部件祖先的樣式表和QApplication上的樣式表合並得到，當發生沖突時，部件自己的樣式表優先於任何繼承的樣式表，父部件優先於祖先的樣式表。

自定義部件外觀與換膚

盒子模型

內容（content）、填襯（padding）、邊框（border）、邊距（margin）

使用background-image來指定背景圖片，如果希望背景圖片隨着部件的大小變化，就必須使用border-image。

image屬性可以用來在border-image之上繪制一個圖片、圖片對齊參考image-position屬性。

自定義部件外觀

/****************主界面背景*******************/
QMainWindow{
        background-image: url(:/image/beijing01.png);/*背景圖片*/
}

/****************按鈕部件*******************/
QPushButton{
     background-color: rgba(100, 225, 100, 30);/*背景色*/
     border-style: outset; /*邊框樣式*/
     border-width: 4px;  /*邊框寬度為4像素*/
     border-radius: 10px; /*邊框圓角半徑*/
     border-color: rgba(255, 225, 255, 30);/*邊框顏色*/
     font: bold 14px;/*字體*/
     color:rgba(0, 0, 0, 100);/*字體顏色*/
     padding: 6px; /*填襯*/
}

QPushButton:hover{ /*鼠標懸停在按鈕上時*/
        background-color:rgba(100,255,100, 100);
        border-color: rgba(255, 225, 255, 200);
        color:rgba(0, 0, 0, 200);
}

QPushButton:pressed { /*按鈕被按下時*/
     background-color:rgba(100,255,100, 200);
     border-color: rgba(255, 225, 255, 30);
     border-style: inset;
     color:rgba(0, 0, 0, 100);
}

/****************滑塊部件*******************/


QSlider::handle:horizontal { /*水平滑塊的手柄*/
        image: url(:/image/sliderHandle.png);
 }

QSlider::sub-page:horizontal { /*水平滑塊手柄以前的部分*/
        border-image: url(:/image/slider.png);/*邊框圖片*/
 }

實現換膚功能

Qt樣式表可以存放在一個以.qss為后綴的文件中，可以在程序中調用不同的.qss文件實現換皮膚功能。

    QFile file(":/qss/my.qss");
    // 只讀方式打開該文件
    file.open(QFile::ReadOnly); 
    // 讀取文件全部內容，使用tr()函數將其轉換為QString類型
    QString styleSheet = tr(file.readAll());
    // 為QApplication設置樣式表
    qApp->setStyleSheet(styleSheet); 

特殊效果窗體

不規則窗體和透明窗體

用到的時候再研究