QSS 从零入门

QSS（Qt Style Sheets）是用于自定义 Qt 应用程序界面样式的语言，语法类似 CSS。

一、基本语法

选择器 {
    属性: 值;
    属性: 值;
}

• 示例：

  QPushButton {
      background-color: red;
      border: 2px solid black;
  }
  

二、选择器类型

1. 类型选择器：匹配控件类型

   QPushButton { ... }
   

2. 类选择器：匹配控件类名（需用 . 前缀）

   .QPushButton { ... } /* 仅匹配 QPushButton 类 */
   

3. ID 选择器：匹配对象名称（objectName）

   QPushButton#okButton { ... }
   

4. 子选择器 (>)：直接子控件

   QDialog > QPushButton { ... }
   

5. 后代选择器 (空格)：所有后代控件

   QDialog QPushButton { ... }
   

6. 多选择器：逗号分隔

   QPushButton, QLabel { ... }
   

---

三、常用属性

1. 背景与颜色

• background-color: 背景色（支持十六进制、RGB、颜色名称）

• color: 文字颜色

• background-image: 背景图片

• border: 边框（width style color）

  QPushButton {
      background-color: #FF0000;
      color: white;
      border: 2px solid black;
  }
  

2. 字体与文本

• font-family: 字体类型
• font-size: 字体大小（px、pt）
• font-style: 为设置字体斜体样式，italic 为斜体，normal 为不斜体
• font-weight: 粗细（bold、normal）
• text-align: 对齐方式（left、center、right）
• color ：设置字体颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置。

QLabel {
    font-family: "Arial";
    font-size: 14px;
    text-align: center;
}

3. 布局与尺寸

• padding: 内边距

• margin: 外边距

• min-width/min-height: 最小尺寸

• max-width/max-height: 最大尺寸

  QPushButton {
      padding: 5px 10px;
      margin: 3px;
      min-width: 80px;
  }
  

4. 边框与圆角

• border-radius: 圆角半径
• border-image: 图片边框
• border-width: 边框宽度
• border-color: 边框颜色
• border-style边框样式
  • border-style: none; 表示没有边框。
  • border-style: solid; 表示边框是实线。
  • border-style: dashed; 表示边框是虚线。
  • border-style: dotted; 表示边框是点线。
  • border-style: double; 表示边框是双线。
  • border-style: groove; 表示边框看起来像是凹进去的。
  • border-style: ridge; 表示边框看起来像是有脊的。
  • border-style: inset; 表示边框看起来像是内嵌的。
  • border-style: outset; 表示边框样式为外凸

QPushButton {
    border-radius: 10px;
    border-image: url(border.png);
}

同时边框可以上下左右分别设置，使用属性：border-top,border-right,border-bottom, border-left等。

5. 渐变与阴影

• qlineargradient/qradialgradient: 渐变背景

• box-shadow: 阴影

  QPushButton {
      background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 white, stop:1 gray);
      box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
  }
  

---

四、伪状态（Pseudo-States）

• 动态状态控制（用 : 分隔）：

  QPushButton:hover { ... }       /* 鼠标悬停 */
  QPushButton:pressed { ... }     /* 按下状态 */
  QCheckBox:checked { ... }      /* 选中状态 */
  QLineEdit:disabled { ... }     /* 禁用状态 */
  QComboBox::drop-down:open { ... } /* 下拉框展开时 */
  

• 组合伪状态：

  QPushButton:hover:!pressed { ... }
  

---

五、子控件与伪元素

• 子控件（用 :: 分隔）：

  QComboBox::drop-down {
      image: url(down_arrow.png);
  }
  

• 伪元素（如 ::item、::indicator）：

  QListWidget::item:hover { ... }
  QCheckBox::indicator:checked { ... }
  

---

六、高级用法

1. 变量与继承

• 使用 qproperty-* 修改控件属性：

  QLabel {
      qproperty-alignment: AlignCenter;
  }
  

2. 自定义控件样式

• 针对复杂控件（如 QScrollBar）：

  QScrollBar:vertical {
      width: 12px;
      background: lightgray;
  }
  

3. 动态加载 QSS

• 从文件加载样式：

  QFile file("style.qss");
  file.open(QFile::ReadOnly);
  QString styleSheet = QLatin1String(file.readAll());
  qApp->setStyleSheet(styleSheet);
  

---

七、调试与注意事项

1. 调试技巧：
   • 使用 Qt Designer 实时预览样式。
   • 打印未识别的属性：qDebug() << widget->styleSheet();
2. 常见问题：
   • 样式不生效：检查选择器优先级或控件是否支持该属性。
   • 强制刷新样式：调用 widget->style()->polish(widget);
   • 平台差异：某些样式在 Windows/macOS/Linux 下表现不同。

---

示例：完整 QSS 文件

/* style.qss */
QMainWindow {
    background-color: #F0F0F0;
}

QPushButton {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
}

QPushButton:hover {
    background-color: #45a049;
}

QLineEdit {
    border: 1px solid #ccc;
    padding: 4px;
    border-radius: 3px;
}

QCheckBox::indicator:checked {
    image: url(checked.png);
}