使用样式表自定义widget

Customizing Qt Widgets Using Style Sheets
使用样式表自定义Qt Widgets


当使用样式表的时候,每一个widget都被当作一个带有四个同中心的矩形Box来对待：
margin矩形,border矩形,padding矩形和content矩形。进一步详细地描述这个盒子模型。


The Box Model
四个同中心矩形从概念上将如下


   1)margin在border外面
   2)border在margin和padding之间
   3)padding出现在border里面,在border和真实的content之间
   4)content将离开初始的widget或者subcontrol一旦我们移除了margin,border，padding
margin,border-width和padding属性默认是0。在这种情况下,四个矩形是高度一致的。


你可以为widget指定一个背景使用background-image属性。默认地,background-image只被绘制在border区域内。这可以使用background-clip属性来改变。你可以使用backgroud-repeat和background-origin来控制背景图的重复和起点。


一个背景图不会依据widget的大小来变化比例。为了提供一个"skin"或者背景可以依widget的大小变化,必须使用border-image。因为border-image属性提供可替代的背景,它不是必须指定一个background-iamge当border-image被指定的时候。当两者都指定的时候,border-image会覆盖background-image。


另外,image属性通常绘制图片在border-image上面。被指定的image不会平铺或者拉伸并且当它的大小不匹配widget的大小时,它的对其方式使用image-position属性来指定。不想background-image和border-image,image也可以指定一个SVG,SVG市一中可以根据widget的大小自动伸缩的图像。


呈现一个规则的步骤如下
设置clip为整个渲染操作(border-radius)
绘制背景(background-image)
绘制边界(border-image,border)
绘制覆盖图片(image)


Sub-controls子控制器
一个widget应该将sub-controls的绘制层次树考虑在内。例如QComboBox绘制drop-down子控制器跟着是down-arrow子控制器。一个QComboBox根据下面的顺序被渲染
渲染QComboBox规则
渲染QComboBox::drop-down{}规则
渲染QComboBox::down-arrow{}规则
子控制器共享一个父子关系,对于QComboBox来说down-arrow的父亲是drop-down,drop-down的父亲是widget自己。子控制器使用subcontrol-position和subcontrol-origin属性放置在它们的父亲里。
一旦被放置,sub-control将使用box model来设计
注意:对于复杂的widgets比如QComboBox和QScrollBar，如果一个属性或者子控制器被自定义,所有的其他属性或者子控制器也应该被自定义。