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-positionsubcontrol-origin
一旦定位成功,子控件就可以使用Box 模型设置样式。
Note:对于复杂控件如QComboBox 和 QScrollBar,如果一个属性或者子控件被自定义,其他所有属性和子控件也必须被自定义。

展开阅读全文

没有更多推荐了,返回首页