Qt样式表 学习总结

Qt样式表： Qt Style Sheets （QSS）

将QSS相关内容，整理总结，以便查阅。内容主要来自Qt 帮助文档

1. 简介

QSS：用来自定义Qt Widgets外观的机制。QSS的概念，术语和语法的灵感来源于HTML Cascading Style Sheets(CSS)。
当QSS激活时， QWidget::style()返回的QStyle是一个wrapper “style sheet” style，不是一个平台指定的style。这个wrapper style 保证了绘图操作采用激活的样式表而不是平台指定的style。

2.语法

3.用法

当使用QSS时，每个widgets被看做一个具有四个同中心矩形的box： margin 矩形, border 矩形, padding 矩形, 和 content 矩形。

Box 模型

margin, border-width, and padding 均默认为0. 所以四个同心矩形(margin, border, padding, and content)默认是重合的。
使用 background-image设置 widget 的background。默认地，background-image 只在border区域内部绘制。可以使用background-clip 改变这个状况. 可以使用background-repeat 金额 background-origin来控制背景图片的repetition（重复绘制） and origin（起始位置）。
background-image并不会随着控件尺寸拉伸。想要一个可以随不同尺寸拉伸的背景需要使用border-image。 当border-image被指定时便不需要再使用 background-image。 若二者均被设置，border-image被绘制在上层。
另外，image属性被用来在border-image之上绘制图像。在它的尺寸与控件的尺寸不匹配时， image 不会平铺或者拉伸。它通过 image-position 属性来对齐布局。不像background-image 和 border-image, 可以在image 属性指定 SVG ，从而实现随控件尺寸拉伸。.

渲染的顺序如下：
- 为整个渲染操作设置裁剪 (border-radius)
- 绘制 background (background-image)
- 绘制 the border (border-image, border)
- 绘制 上层image (image)

Sub-controls

Widgets 被看做是一个子控件的树（自上往下绘制）。比如QComboBox 绘制draw-down子控件，然后绘制dowm-arrow子控件。渲染顺序如下：

• QComboBox { } rule
• QComboBox::drop-down { } rule
• QComboBox::down-arrow { } rule

子控件具有父-子关系。比如QComboBox，down-arrow的父控件是drop-down，drop-down的父控件是QComboBox本身。子控件的定位使用：subcontrol-position 和subcontrol-origin 。
一旦定位成功，子控件就可以使用Box 模型设置样式。
Note：对于复杂控件如QComboBox 和 QScrollBar，如果一个属性或者子控件被自定义，其他所有属性和子控件也必须被自定义。