【Qt】qss语法详解

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 控件的所有视觉方面。