常用控件(六)

布局管理器

之前使⽤ Qt 在界⾯上创建的控件, 都是通过 “绝对定位” 的⽅式来设定的.
也就是每个控件所在的位置, 都需要计算坐标, 最终通过 setGeometry 或者 move ⽅式摆放过去.这种设定⽅式其实并不⽅便. 尤其是界⾯如果内容⽐较多, 不好计算. ⽽且⼀个窗⼝⼤⼩往往是可以调整的, 按照绝对定位的⽅式, 也⽆法⾃适应窗⼝⼤⼩.因此 Qt 引⼊ “布局管理器” (Layout) 机制, 来解决上述问题.

垂直布局

使用QVBoxLayout表示垂直的布局管理器;

核心属性:

属性	说明
layoutLeftMargin	左侧边距
layoutRightMargin	右侧边距
layoutTopMargin	上⽅边距
layoutBottomMargin	下⽅边距
layoutBottomMargin	下⽅边距
layoutSpacing	相邻元素之间的间距

Layout只用于页面布局，没有提供信号;

eg1: 使用QVBoxLayout管理多个控件,创建一个布局管理器，然后再创建三个按钮，将这三个按钮添加进布局管理器;

运行结果:

通过上述代码的方式创建一个布局管理器，只能给Widget设定一个布局管理器，并且布局管理器里面的控件大小会随着窗口大小的变化而变化，但是使用Qt Design在窗口中就可以创建多个布局管理器，并且布局管理器里面的控件大小也不随着窗口大小的变化而变化;

QHBoxLayout

使⽤ QHBoxLayout 表⽰垂直的布局管理器.

核心属性

属性	说明
layoutLeftMargin	左侧边距
layoutRightMargin	右侧边距
layoutTopMargin	上⽅边距
layoutBottomMargin	下⽅边距
layoutBottomMargin	下⽅边距
layoutSpacing	相邻元素之间的间距

QHBoxLayout和QVBoxLayout使用是一样的，下面我们来演示QHBoxLayout里面嵌入QVBoxLayout的情况:
eg1: QHBoxLayout里面嵌入QVBoxLayout:
核心代码:

运行结果:

QGridLayout

Qt 中还提供了 QGridLayout ⽤来实现⽹格布局的效果. 可以达到 M * N 的这种⽹格的效果.

核心属性:

整体和 QVBoxLayout 以及 QHBoxLayout 相似. 但是设置 spacing 的时候是按照垂直⽔平两个
⽅向来设置的.

属性	说明
layoutLeftMargin	左侧边距
layoutRightMargin	右侧边距
layoutTopMargin	上⽅边距
layoutBottomMargin	下⽅边距
layoutBottomMargin	下⽅边距
layoutHorizontalSpacing	相邻元素之间⽔平⽅向的间距
layoutVerticalSpacing	相邻元素之间垂直⽅向的间距
layoutRowStretch	⾏⽅向的拉伸系数
layoutColumnStretch	列⽅向的拉伸系数

eg1: 使用QGridLayout管理元素
核心代码:

运行结果:

此处也要注意, 设置⾏和列的时候, 如果设置的是⼀个很⼤的值, 但是这个值和上⼀个值之间并
没有其他的元素, 那么并不会在中间腾出额外的空间.

QFormLayout

Qt 还提供了 QFormLayout , 属于是 QGridLayout 的特殊情况, 专⻔⽤于实现两列表单的布局.
这种表单布局多⽤于让⽤⼾填写信息的场景. 左侧列为提⽰, 右侧列为输⼊框.

eg1: 使用 QFormLayout 创建表单.

运行结果:

QSpacerItem

使⽤布局管理器的时候, 可能需要在控件之间, 添加⼀段空⽩. 就可以使⽤ QSpacerItem 来表⽰.
核心属性:

属性	说明
width	宽度
height	⾼度
hData	⽔平⽅向的 sizePolicy;QSizePolicy::Ignored : 忽略控件的尺⼨，不对布局产⽣影响。QSizePolicy::Minimum : 控件的最⼩尺⼨为固定值，布局时不会超过该值。QSizePolicy::Maximum : 控件的最⼤尺⼨为固定值，布局时不会⼩于该值。QSizePolicy::Preferred : 控件的理想尺⼨为固定值，布局时会尽量接近该值。 QSizePolicy::Expanding : 控件的尺⼨可以根据空间调整，尽可能占据更多空间。QSizePolicy::Shrinking : 控件的尺⼨可以根据空间调整，尽可能缩⼩以适应空间。
vData	垂直⽅向的 sizePolicy选项同上.

上述属性在构造函数设置即可.

eg1: 创建一个水平布局的两个按钮

我们可以通过在两个按钮直接添加一个QSpacerItem来增加空白: