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