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 | 单冒号:,表示状态 |
优先级规则
- 设置方式优先级:控件直接设置 > QApplication全局设置
- 选择器优先级:ID > 类 > 类型 > 通配符 > 继承 > 默认
- 权重计算: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的主要区别
| 特性 | CSS | QSS |
|---|---|---|
| 选择器 | 实现了CSS2+部分CSS3 | 仅CSS2 |
| 子控件 | 无 | 通过::子控件选择器 |
| 继承 | 自动继承字体颜色 | Qt5.7+需显式启用 |
| 布局 | display属性控制 | 通过布局管理器实现 |
性能与最佳实践
- 避免使用通用选择器
*(性能差) - 尽量将样式写在QApplication级别而非每个控件单独设置
- objectName中避免使用空格(ID选择器解析会截断)
- 自定义控件在命名空间时,
::需替换为--
重要结论
- QSS是Qt界面定制的轻量级方案,无需子类化QStyle
- 选择器优先级:ID > 类 > 类型 > 通配符
- 后代选择器自右向左匹配(与CSS相同)
- border-image在Qt中支持不完整,建议使用单独边框属性
- 全局样式优于分散设置(性能和维护性)
与其他知识的关联
- 《Clean Code》-代码整洁之道 - 类似的分层思想
- 《设计模式》-可复用面向对象软件的基础 - 样式与逻辑分离
- Head-First-设计模式 - Qt中的观察者模式应用
笔记说明
本书为文本型PDF(62页),使用pdf-inspector文本提取成功。内容以语法参考和实用示例为主,适合快速查阅QSS相关属性。