QSS (Qt Style Sheets) 語法格式詳解

QSS 是 Qt 的樣式表語言，類似于 CSS，用于自定義 Qt 應用程序的外觀。以下是 QSS 的完整語法格式說明：

基本語法結構

selector {property: value;property: value;...
}

1. 選擇器 (Selectors)

基本選擇器

• 類型選擇器：匹配指定類型的所有控件

  QPushButton { color: red; }
  

• 類選擇器：匹配指定類名的控件

  .QPushButton { background: blue; }
  

• ID 選擇器：匹配指定 objectName 的控件

  QPushButton#okButton { font-weight: bold; }
  

• 通配選擇器：匹配所有控件

  * { font-family: "Arial"; }
  

組合選擇器

• 后代選擇器：匹配包含在另一個控件中的控件

  QDialog QPushButton { color: green; }
  

• 子選擇器：匹配直接子控件

  QDialog > QPushButton { padding: 5px; }
  

狀態選擇器

• 偽狀態：匹配控件的特定狀態

  QPushButton:hover { background: yellow; }
  QCheckBox:checked { color: white; }
  QLineEdit:disabled { opacity: 0.5; }
  

• 狀態組合：多個狀態同時滿足

  QPushButton:hover:checked { background: orange; }
  

2. 屬性和值

常用屬性

• 尺寸和邊距：

  min-width: 100px;
  max-height: 50px;
  margin: 5px;
  padding: 10px;
  

• 背景：

  background: red;
  background-color: #ff0000;
  background-image: url(:/images/bg.png);
  

• 邊框：

  border: 1px solid black;
  border-radius: 5px;
  border-top: 2px dashed blue;
  

• 字體：

  font: bold 14px "Arial";
  font-family: "Microsoft YaHei";
  font-size: 12pt;
  color: #333333;
  

• 其他：

  opacity: 0.8;
  spacing: 5px;
  qproperty-alignment: AlignCenter;
  

特殊屬性

• 子控件：樣式化復雜控件的部分

  QComboBox::drop-down { image: url(dropdown.png); }
  QSpinBox::up-button { width: 20px; }
  

• 狀態圖像：

  QPushButton:checked {image: url(checked.png);
  }
  

3. 盒模型

QSS 使用標準的 CSS 盒模型：

+---------------------------+
|          margin           |
|  +---------------------+  |
|  |       border        |  |
|  |  +---------------+  |  |
|  |  |    padding    |  |  |
|  |  |  +--------+   |  |  |
|  |  |  | content|   |  |  |
|  |  |  +--------+   |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

4. 漸變和顏色

/* 線性漸變 */
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,stop:0 white, stop:1 black);/* 徑向漸變 */
background: qradialgradient(cx:0.5, cy:0.5, radius: 0.5,fx:0.5, fy:0.5, stop:0 white, stop:1 black);/* 顏色 */
color: rgba(255, 0, 0, 128);  /* 帶透明度 */

5. 常用偽狀態

偽狀態	描述
:hover	鼠標懸停
:pressed	鼠標按下
:checked	選中狀態
:disabled	禁用狀態
:enabled	啟用狀態
:focus	獲得焦點
:unchecked	未選中狀態
:indeterminate	不確定狀態(如三態復選框)
:open	打開狀態(如QComboBox)
:closed	關閉狀態
:on	開關控件處于"on"狀態
:off	開關控件處于"off"狀態

6. 示例代碼

/* 主窗口背景 */
QMainWindow {background: qlineargradient(x1:0, y1:0, x2:1, y2:1,stop:0 #a6a6a6, stop:1 #666666);
}/* 按鈕樣式 */
QPushButton {background-color: #3498db;color: white;border: 2px solid #2980b9;border-radius: 5px;padding: 5px 10px;
}QPushButton:hover {background-color: #2980b9;
}QPushButton:pressed {background-color: #1f618d;
}/* 禁用按鈕 */
QPushButton:disabled {background-color: #bdc3c7;border-color: #95a5a6;
}/* 文本框樣式 */
QLineEdit {border: 1px solid #bdc3c7;border-radius: 3px;padding: 3px;background: white;
}QLineEdit:focus {border: 1px solid #3498db;
}/* 復選框樣式 */
QCheckBox {spacing: 5px;
}QCheckBox::indicator {width: 15px;height: 15px;
}QCheckBox::indicator:checked {image: url(:/images/checked.png);
}/* 組合框下拉箭頭 */
QComboBox::drop-down {subcontrol-origin: padding;subcontrol-position: top right;width: 15px;border-left-width: 1px;border-left-color: darkgray;border-left-style: solid;
}

7. 使用 QSS 的注意事項

1. 優先級：更具體的選擇器會覆蓋更一般的樣式
2. 繼承：某些屬性會從父控件繼承
3. 動態屬性：可以使用 [property="value"] 選擇器

   QPushButton[highlight="true"] { color: red; }
   

4. 應用樣式表：

   // 單個控件
   widget->setStyleSheet("QPushButton { color: red; }");// 整個應用程序
   QApplication::setStyleSheet("...");
   

QSS 提供了強大的樣式定制能力，幾乎可以修改 Qt 控件的所有視覺方面。