自定义Qt部件——盒状模型

原文:盒状模型
使用Style Sheets时,所有的部件都被视为有四个同心矩形的盒子(box)：边缘矩形(margin rectangle)，边框矩形(border rectangle)，填充矩形(padding rectangle)和内容矩形(content rectangle)。盒状模型对四个矩形有详细的描述。

• 边缘(margin)位于边框(border)之外。
• 边框(border)位于边缘(margin)和填充(padding)之间。
• 填充(padding)位于边框(border)之内，在边框(border)与实际内容(actual contents)之间。
• 内容(content)是在将部件边框(margin),边框(border), 填充(padding)移除之后，原始部件或子控件剩下的部分。

边缘，边框宽度和填充属性默认为0。这样四个矩形(margin, border, padding和content)重合。
使用background-image属性，你可以为部件指定背景图片。默认地，背景图片只画在边框以内，但是可以使用background-clip属性改变默认行为。你可以使用background-repeat和background-origin属性来分别控制图片的重复行为和图片原点。
背景图片不随部件大小改变而改变。提供一个随部件大小改变而改变的背景或皮肤，必须使用border-image。因为border-image属性提供了一个备选背景，所以并不需要再为部件指定一个背景图片。在两者都指定的情况下，border-image将画于background-image之上。
此外，image属性可能会用来将border-image覆盖。当图片大小与部件大小不匹配时，图片不会拉伸或压缩。图片对齐使用image-position属性指定。与background-image和border-image不同，你可能会SVG使图片大小随着部件大小自动改变。
以下为render a rule(驾驭不住render的意思)的步骤：
- 为整个渲染操作(border-radius)设置裁剪。
- 画背景(background-image)。
- 画边框(border-image, border)。
- 画覆盖(overlay)图片(image)。

子控件

一个部件被视为子控件顺序渲染的树形结构。例如，QComboBox先画drop-down子控件，再画down-arrow子控件。因此QComboBox的渲染顺序如下:

• 提交QComboBox{}规则
• 提交QComboBox::drop-down{}规则
• 提交QComboBox::dowp-arrow{}规则

子控件间有一个父子关系。以QComboBox为例，down-arrow父为drop-down，drop-down的父为部件本身。子控件放置在它们各自的父控件内，使用subcontrol-position和subcontrol-origin属性。
一旦各就各位，子控件就可以使用盒状模型来风格化了。

注意: 复杂的控件如QComboBox和QScrollBar,一旦一个属性或子控件被自定义，所有其它的属性或子控件都必须也被自定义化。