QSS 盒子模型

QSS 盒子模型

简述

在使用样式表时,每个小部件都被视为一个有四个同心矩形的盒子:边距矩形、边框矩形、填充矩形和内容矩形。盒子模型对此进行了更详细的描述。

盒子模型

四个同心矩形的概念如下图所示:
在这里插入图片描述

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

margin、border-width和padding属性都默认为零。在这种情况下,所有四个矩形(边距、边框、填充和内容)完全重合。

可以使用background-image属性为小部件指定背景。默认情况下,background-image仅在边框内的区域绘制。可以使用background-clip属性进行更改。使用background-repeat和background-origin控制background-image的重复和起始点。

background-image不会随着小部件的大小缩放。要提供随小部件大小缩放的皮肤或背景必须使用border-image。由于border-image属性提供了一个备用背景,所以在指定border-image时不再需要指定background-image。在这种情况下,当他们都被指定时,border-image将会覆盖在background-image上。

此外,image属性可用于在border-image上绘制图像。指定的图像不会平铺或拉伸,当其大小与小部件大小不匹配时,将使用image-position属性指定其对齐方式。不同于background-image和border-image,可以为image属性指定SVG图像,在这种情况下,image将根据小部件的大小自动缩放。

渲染规则如下:

  • 为整个渲染操作设置剪切(border-radius)
  • 绘制背景(background-image)
  • 绘制边框(border-image, border)
  • 绘制叠加图像(image)

子控件

小部件被认为是一个层次化(树)的子控件。例如,QComboBox先绘制drop-down子控件随后绘制down-arrow子控件。QComboBox渲染步骤如下:

  • 渲染QComboBox{}
  • 渲染QComboBox::drop-down{}
  • 渲染QComboBox::down-arrow{}

子控件共享父子关系。在QComboBox中,down-arrow的父控件是drop-down而drop-down的父控件则是QComboBox本身。子控件在它们的父控件中的定位使用subcontrol-position和subcontrol-origin属性。

定位之后,子控件就可以使用box model进行样式化。注意:对于像QComboBox和QScrollBar这样的复杂控件,如果一个属性或子控件是定制的,那么所有其他属性或子控件也必须是定制的。

参考

参考Qt助手,如有错误,请指正,谢谢!

猜你喜欢

转载自blog.csdn.net/Staranywhere/article/details/106600384