容器类控件
之前学过的多元素控件,它里面包含的内容是一个一个自定义好的 “Item”对象。
而容器类控件,里面包含的就是之前学过的各种控件了,比如QPushButton,QLineEdit等等。
QGroup Box
使⽤ QGroupBox 实现⼀个带有标题的分组框. 可以把其他的控件放到⾥⾯作为⼀组. 这样看起来能更好看⼀点
注意, 不要把 QGroupBox 和 QButtonGroup 混淆. (之前在介绍 QRadionButton 的时候提
到了 QButtonGroup ).
核心属性

分组框只是⼀个⽤来 "美化界⾯" 这样的组件, 并不涉及到⽤⼾交互和业务逻辑. 属于 "锦上添
花
给许愿井加上分组框

QTabWidget
使⽤ QTabWidget 实现⼀个带有标签⻚的控件, 可以往⾥⾯添加⼀些 widget. 进⼀步的就可以通过标签⻚来切换
核心属性:

核心信号:

使⽤标签⻚管理多组控件
给标签⻚中放个简单的 label
•
注意新创建的 label 的⽗元素, 是 ui->tab 和 ui->tab_2 . Qt 中使⽤⽗⼦关系决定该控件 "在
哪⾥"
槽函数的设计:
演示:
布局管理器
之前我们把控件放到界面上,都是靠手动的方式来布局的。
之前使⽤ Qt 在界⾯上创建的控件, 都是通过 "绝对定位" 的⽅式来设定的.
也就是每个控件所在的位置, 都需要计算坐标, 最终通过 setGeometry 或者 move ⽅式摆放过去
这种手动布局的方式是不科学的:
1.手动布局的方式复杂,且不精确。
2.无法对窗口进行自动适应调整。
因此 Qt 引⼊ "布局管理器" (Layout) 机制, 来解决上述问题
当然, 布局管理器并⾮ Qt 独有. 其他的 GUI 开发框架, 像 Android, 前端等也有类似的机制
Qt中提供了很多种布局管理器:
1.垂直布局
2.水平布局
3.网络布局
4.表单布局
另外,在Qt种,每个widget中只能有一个布局管理器。
我们通过代码的方式创建layout,就只是创建了一个layout。
但是通过Qt Designer的方式创建layout的话,它其实是先创建了一个widget,然后再在这个新的widget中添加了一个layout。
垂直布局
使⽤ QVBoxLayout 表⽰垂直的布局管理器. V 是 vertical 的缩写
核心属性
Layout 只是⽤于界⾯布局, 并没有提供信号
使⽤ QVBoxLayout 管理多个控件
这些按钮就存在于布局管理器中,并且会随着窗口的大小而自动调整自身大小。
创建两个 QVBoxLayout
我们可以在界面上直接创建两个 QVBoxLayout 。

我们也可以先把控件创建出来,然后用ctrl左键的方式把它们都选中,选中好后点击垂直布局的快捷键
它就会把我们刚刚选中的控件都放到一个垂直布局管理器中了。
⽔平布局
使⽤ QHBoxLayout 表⽰垂直的布局管理器. H 是 horizontal 的缩写
水平布局的核心属性跟垂直布局的是一致的。
使⽤ QHBoxLayout 管理控件
嵌套的 layout
Layout ⾥⾯可以再嵌套上其他的 layout, 从⽽达到更复杂的布局效果.
使⽤ addLayout 给 layout 中添加⼦ layout
演示:
可见下面的水平布局管理器就是子layout。
⽹格布局
Qt 中还提供了 QGridLayout ⽤来实现⽹格布局的效果. 可以达到 M * N 的这种⽹格的效果
核⼼属性
整体和 QVBoxLayout 以及 QHBoxLayout 相似. 但是设置 spacing 的时候是按照垂直⽔平两个
⽅向来设置的
使⽤ QGridLayout 管理元素
调整一下代码:
发现这样就变得跟水平布局一样了。
再这样调整:

再调整:
此处也要注意, 设置⾏和列的时候, 如果设置的是⼀个很⼤的值, 但是这个值和上⼀个值之间并
没有其他的元素, 那么并不会在中间腾出额外的空间
设置 QGridLayout 中元素的⼤⼩⽐例
使⽤ setColumnStretch 设置每⼀列的拉伸系数
拉伸比为0,则表示不参与拉伸,当我们拉动窗口时,尺寸不会随着窗口大小而改变。
另外, QGridLayout 也提供了 setRowStretch 设置⾏之间的拉伸系数.
上述案例中, 直接设置 setRowStretch 效果不明显, 因为每个按钮的⾼度是固定的. 需要
把按钮的垂直⽅向的 sizePolicy 属性设置为 QSizePolicy::Expanding 尽可能填
充满布局管理器, 才能看到效果
设置垂直⽅向的拉伸系数
QSizePolicy::Ignored : 忽略控件的尺⼨,不对布局产⽣影响。
•
QSizePolicy::Minimum : 控件的最⼩尺⼨为固定值,布局时不会超过该值。
•
QSizePolicy::Maximum : 控件的最⼤尺⼨为固定值,布局时不会⼩于该值。
•
QSizePolicy::Preferred : 控件的理想尺⼨为固定值,布局时会尽量接近该值。
•
QSizePolicy::Expanding : 控件的尺⼨可以根据空间调整,尽可能占据更多空间。
•
QSizePolicy::Shrinking : 控件的尺⼨可以根据空间调整,尽可能缩⼩以适应空间。
演示:

总的来说, 使⽤ QGridLayout 能够代替很多 QHBoxLayout 和 QVBoxLayout 嵌套的场景. 毕
竟嵌套的代码写起来是⽐较⿇烦的.
另外不要忘了, QGridLayout ⾥⾯也能嵌套 QHBoxLayout 和 QVBoxLayout ,
QHBoxLayout 和 QVBoxLayout ⾥⾯也能嵌套 QGridLayout .
灵活使⽤上述布局管理器, 就可以实现出任意的复杂界⾯
表单布局
除了上述的布局管理器之外, Qt 还提供了 QFormLayout , 属于是 QGridLayout 的特殊情况, 专
⻔⽤于实现两列表单的布局.
这种表单布局多⽤于让⽤⼾填写信息的场景. 左侧列为提⽰, 右侧列为输⼊框
使⽤ QFormLayout 创建表单
使⽤ addRow ⽅法来添加⼀⾏. 每⾏包含两个控件. 第⼀个控件固定是 QLabel / ⽂本, 第⼆个控件
则可以是任意控件.
•
如果把第⼀个参数填写为 NULL, 则什么都不显⽰
Spacer
使⽤布局管理器的时候, 可能需要在控件之间, 添加⼀段空⽩. 就可以使⽤ QSpacerItem 来表⽰
核心属性
创建⼀组左右排列的按钮
可以看到,两个按钮之间已经存在间隔了。
调整 QSpacerItem 不同的尺⼨, 即可看到不同的间距
在 Qt Designer 中, 也可以直接给界⾯上添加 spacer.