样式属性
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）设置外边距
【注意】这里的按钮看起来变小了，但是实际上使用qDebug()打印其大小是没有变化的，是因为当前按钮的边框被外边距挤的缩⼩了。
