【Qt】样式属性

样式属性

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()打印其大小是没有变化的，是因为当前按钮的边框被外边距挤的缩⼩了。