样式属性
QSS 中的样式属性⾮常多, 不需要都记住. 核⼼原则还是⽤到了就去查.
⽂档的 Qt Style Sheets Reference 章节详细介绍了哪些控件可以设置属性, 每个控 件都能设置哪些属性等.
在样式属性中有一个“盒子模型需要重点介绍”
盒子模型
在⽂档的 Customizing Qt Widgets Using Style Sheets 的 The Box Model 章节介绍了盒模型.
⼀个遵守盒模型的控件, 由上述⼏个部分构成.
- Content 矩形区域: 存放控件内容. ⽐如包含的⽂本/图标等.
- Border 矩形区域: 控件的边框.
- Padding 矩形区域: 内边距. 边框和内容之间的距离.
- Margin 矩形区域: 外边距. 边框到控件 geometry 返回的矩形边界的距离
默认情况下, 外边距, 内边距, 边框宽度都是 0。
可以通过⼀些 QSS 属性来设置上述的边距和边框的样式.
QSS属性 | 说明 |
---|---|
margin | 设置四个⽅向的外边距. 复合属性. |
padding | 设置四个⽅向的内边距. 复合属性. |
border-style | 设置边框样式 |
border-width | 边框的粗细 |
border-color | 边框的颜⾊ |
border | 复合属性, 相当于 border-style + border-width + border-color |
复合属性:
margin 可以拆成四个属性:
- margin-left
- margin-right
- margin-top
- margin-bottom
假设:margin: 10px; 表示四个方向都是10px的外边距。
margin: 10px 20px; 表示上下 10px; 左右 20px;
margin: 10px 20px 30px 40px; 表示上右下左(顺时针)
同理padding 也是可以拆成四个属性的。
例子:设置内边距
(1)在界面上设置一个label
(2)在main.cpp文件中设置全局样式
- border: 5px solid red 相当于 border-style: solid; border-width: 5px; border-color: red; 三个属性的简写形式.
- padding-left: 10px; 是给左侧设置内边距
例子:设置外边距
(1)在widget.cpp文件中设置一个按钮
(2)设置外边距
标签:Qt,样式,margin,边框,设置,10px,border,属性 From: https://blog.csdn.net/dab112/article/details/142001932【注意】这里的按钮看起来变小了,但是实际上使用qDebug()打印其大小是没有变化的,是因为当前按钮的边框被外边距挤的缩⼩了。