Qt样式表(QSS)开发总结 - 葵花宝典

书籍概要

《Qt样式表葵花宝典》是由张涛撰写的Qt样式表(QSS)实用参考手册,系统讲解了QSS的语法、选择器、属性及与CSS的差异对比,是Qt界面开发中快速掌握样式定制的有效工具书。

核心知识点

QSS基本概念

  • QSS(Qt Style Sheets)概念来源于HTML/CSS,但适用于Qt控件
  • 无需子类化QStyle即可自定义控件外观
  • 主要优势:跨平台一致、代码与样式分离、快速换肤

选择器系统

选择器类型格式说明
通用选择器* { ... }匹配所有控件,慎用(性能差)
类型选择器QPushButton { ... }匹配该类及其派生类
类选择器.QPushButton { ... }只匹配该类,不匹配派生类
ID选择器#button_1 { ... }匹配objectName,需唯一
后代选择器QDialog QPushButton空格分隔,匹配所有后代
子元素选择器QDialog > QPushButton>连接,只匹配直接子元素
属性选择器[attribute=value]匹配特定属性值
并集选择器QLineEdit, QComboBox逗号分隔多个选择器
子控件选择器QComboBox::drop-down双冒号::,配合subcontrol
伪类选择器QPushButton:hover单冒号:,表示状态

优先级规则

  1. 设置方式优先级:控件直接设置 > QApplication全局设置
  2. 选择器优先级:ID > 类 > 类型 > 通配符 > 继承 > 默认
  3. 权重计算:ID数量[=a]-类/属性数量[=b]-类型数量[=c],如1-0-0表示高优先级

层叠与继承

  • 层叠性:多个选择器匹配同一控件时,后面的覆盖前面的
  • 继承性:Qt5.7+支持通过Qt::AA_UseStyleSheetPropagationInWidgetStyles启用

盒模型

所有widget被视为”盒子”,包含:

  • Margin(外边距):与其他控件的距离
  • Border(边框):外边距与内边距之间的区域
  • Padding(内边距):内容与边框之间的区域
  • Content(内容):实际显示区域

完整宽度 = 左边距 + 左边框 + 左边内边距 + 内容宽 + 右边内边距 + 右边框 + 右边距

常用属性

属性组常用属性
背景background-color, background-image, background-repeat, background-position
边框border, border-width, border-style, border-color, border-radius, border-image
字体font-style, font-weight, font-size, font-family
文本text-align, text-decoration
间距padding, margin
尺寸width, height, min-width, max-width等
轮廓outline, outline-color, outline-style

背景渐变色

  • qlineargradient:线性渐变
  • qradialgradient:径向渐变
  • qconicalgradient:锥形渐变

示例:

background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #454648, stop:1 #7A7A7A);

与CSS的主要区别

特性CSSQSS
选择器实现了CSS2+部分CSS3仅CSS2
子控件无通过::子控件选择器
继承自动继承字体颜色Qt5.7+需显式启用
布局display属性控制通过布局管理器实现

性能与最佳实践

  • 避免使用通用选择器*(性能差)
  • 尽量将样式写在QApplication级别而非每个控件单独设置
  • objectName中避免使用空格(ID选择器解析会截断)
  • 自定义控件在命名空间时,::需替换为--

重要结论

  1. QSS是Qt界面定制的轻量级方案,无需子类化QStyle
  2. 选择器优先级:ID > 类 > 类型 > 通配符
  3. 后代选择器自右向左匹配(与CSS相同)
  4. border-image在Qt中支持不完整,建议使用单独边框属性
  5. 全局样式优于分散设置(性能和维护性)

与其他知识的关联

笔记说明

本书为文本型PDF(62页),使用pdf-inspector文本提取成功。内容以语法参考和实用示例为主,适合快速查阅QSS相关属性。