刚开始用 Qt 做界面的时候，很多人第一反应就是把控件的坐标一个个算清楚：这个按钮放 (20, 30)，那个输入框放 (60, 30)。等到窗口一拉大、分辨率一换，所有控件就像钉死在画布上一样纹丝不动，只能一边骂一边回去改数字。真正把布局界面用明白的人，早就把这些事交给了 Qt 的布局系统。这篇是 Qt 入门系列的第五篇，专门聊布局界面。学完之后，你应该能理解 Qt 四种基础布局、嵌套布局和伸缩因子的关系，也能够在 Qt Designer 和纯代码两种方式之间自由切换，窗口自适应这件事不再靠猜。
1. 为什么先放弃 setGeometry，再谈布局
1.1 坐标固定的界面，换一次环境就要返工
很多新手喜欢直接用setGeometry(10, 30, 200, 30)这样的方式把控件钉在窗口上。理由是简单、直观、所见即所得。但只要你把窗口拉大一点，或者换一台分辨率不同的电脑，甚至只是把系统的字体缩放比例从 100% 调到 125%，界面就会立刻暴露问题：按钮错位、输入框被裁剪、文字和边框重叠在一起。
坐标布局真正的缺陷，是它把“控件的绝对位置”写死了。你在 1920×1080 下调试好的坐标，到了 1366×768 的笔记本上，窗口标题栏高度、边框宽度、DPI 缩放全都不一样。你在一台机器上多花了两个小时调的像素，换台机器全部作废。开发时最怕听到的就是“在我机器上是好的”，坐标布局几乎必然导致这句话。
所以我建议，学习 Qt 布局界面，第一步就是戒掉setGeometry依赖。不是说你永远不能用它，而是在绝大多数场景下，布局管理器都能做得更好。
1.2 布局管理器的本质：描述关系，而不是描述像素
Qt 的QLayout是一个抽象基类，它本身不负责绘制任何控件。它的工作是：根据控件的sizeHint、sizePolicy、minimumSize等属性，结合当前可用空间，自动计算每个控件最终的位置和大小。
你可以把布局管理器理解成一个“自动排座位的人”。你只需要告诉他：A 和 B 横向排列，C 在它们下面，D 占据剩余空间。至于每个座位具体离桌子边多远、窗口变大以后每个人分到多少地方，由布局管理器统一调度。
这样做的好处非常明显。窗口尺寸变化时，布局会自动重建；控件文字变长时，控件会按sizeHint自动扩展；系统字体或 DPI 改变时，界面不会乱。你维护的不再是一堆魔法数字，而是一套稳定的结构关系。
注意：一旦控件被加进布局，就不需要再手动调用
setGeometry。手动坐标和布局系统同时存在会互相干扰，最终表现一般以布局计算结果为准。
2. 四种常用布局：什么时候用哪个
2.1 QHBoxLayout 和 QVBoxLayout：最基础的排队方式
QHBoxLayout是水平排列，QVBoxLayout是垂直排列。它们的行为逻辑和你排队一样简单：先加入的放左边（或上边），后加入的依次往后排。
QHBoxLayout *hlay = new QHBoxLayout; hlay->addWidget(new QPushButton("确定", this)); hlay->addWidget(new QPushButton("取消", this)); setLayout(hlay);这段代码会让“确定”和“取消”两个按钮并排显示。如果你希望它们上下排列，改成QVBoxLayout即可。
这两个布局是 Qt 界面里最常用的积木。几乎所有界面都可以拆成若干组水平排列和垂直排列的控件。但注意，当你的界面不是“一行”或“一列”这么简单时，就要考虑组合和嵌套了，这个后面专门讲。
2.2 QGridLayout：适合表格型界面
QGridLayout把界面当做一个表格来管理，通过行号和列号定位控件。它比手工嵌套多个QHBoxLayout要清晰得多。
QGridLayout *grid = new QGridLayout; grid->addWidget(createButton("1"), 0, 0); grid->addWidget(createButton("2"), 0, 1); grid->addWidget(createButton("3"), 0, 2); grid->addWidget(createButton("4"), 1, 0); // ...addWidget(widget, row, column)的第二个参数是行，第三个参数是列，从 0 开始。更进阶的用法是让某个控件跨多行多列：
grid->addWidget(saveButton, 3, 0, 1, 3);这表示saveButton放在第 3 行第 0 列，占据 1 行、3 列。这种跨度控制在做计算器键盘、表格型表单或者一些仪表盘界面时非常有用。
如果你要做的界面天然就是“几行几列”的结构，优先考虑QGridLayout，而不是用一堆水平布局硬拼。
2.3 QFormLayout：做表单时不用自己对齐标签
QFormLayout是专门为“标签 + 输入控件”这种表单场景设计的。你只需要写一行代码，就能解决标签宽度对齐的问题。
QFormLayout *form = new QFormLayout; form->addRow("用户名", new QLineEdit(this)); form->addRow("密码", new QLineEdit(this)); form->addRow("备注", new QTextEdit(this));addRow的前一个参数是标签文本，后一个参数是输入控件。QFormLayout会自动让所有标签保持统一的列宽，输入控件在另一列。它还能处理好标签文字过长时的换行问题，这点比手动摆两个QLabel要省心太多。
当你发现界面里到处都是“标签 + 输入框”的组合时，别犹豫，直接上QFormLayout。写起来舒服，后期维护也更方便。
2.4 选型小结
| 布局 | 适用场景 | 一句话要点 |
|---|---|---|
| QHBoxLayout | 水平排列 | 按钮组、工具条、单行控件组合 |
| QVBoxLayout | 垂直排列 | 页面骨架、上下分区 |
| QGridLayout | 表格型布局 | 行列定位准确，支持跨行列 |
| QFormLayout | 表单界面 | 标签和输入控件自动对齐 |
3. 嵌套布局和伸展因子：决定窗口拉伸后长什么样
3.1 布局树：先定整体骨架，再细分局部
实际项目里，绝大多数界面都不是单一布局能搞定的。你需要把整体结构拆成“一棵树”：根布局负责把窗口分成几个大区域，每个大区域再用自己的子布局去安排内部控件。
举个实际例子。假设一个窗口要分成三部分：
- 顶部：返回按钮 + 搜索框 + 设置按钮
- 中间：内容列表
- 底部：状态文本 + 进度条
对应到代码结构，就是先创建一个QVBoxLayout作为根布局，然后在里面放三个子布局：
QVBoxLayout *mainLayout = new QVBoxLayout; QHBoxLayout *headerLayout = new QHBoxLayout; headerLayout->addWidget(backBtn); headerLayout->addWidget(searchEdit); headerLayout->addWidget(settingsBtn); QHBoxLayout *footerLayout = new QHBoxLayout; footerLayout->addWidget(statusLabel); footerLayout->addWidget(progressBar); mainLayout->addLayout(headerLayout); mainLayout->addWidget(listWidget, 1); mainLayout->addLayout(footerLayout); setLayout(mainLayout);这里最关键的一行是mainLayout->addWidget(listWidget, 1)。第二个参数1表示 listWidget 的伸展因子是 1，也就是说，窗口在垂直方向上有额外空间时，这个空间会优先分配给中间的列表区域，顶部和底部保持自己的理想高度。
初学者最容易犯的错误，是试图用一个布局把界面上所有控件排完。一旦控件多了，调整起来非常痛苦。正确思路是先画布局树，再一层层堆代码。
3.2 setStretch 是比例，不是像素
伸展因子（stretch）经常被误解成“固定宽度或固定高度占比”，其实不是。Qt 的布局算法会先满足每个控件的sizeHint，也就是控件自己最“舒服”的大小，然后才会把多余的可用空间按照伸展因子比例分给各个控件。
用公式理解就是：
- 先给每个控件分配它的 sizeHint 空间；
- 剩余空间按控件的 stretch 因子占总因子数量的比例分配。
举个例子，一个水平布局里有一个输入框和一个按钮，你希望输入框比按钮更“能拉长”：
QHBoxLayout *hlay = new QHBoxLayout; hlay->addWidget(edit, 3); // 伸展因子 3 hlay->addWidget(button, 1); // 伸展因子 1当窗口横向变宽时，输入框会分到额外的 3/4 可用空间，按钮只分到 1/4。如果窗口固定不动，两个控件会维持各自的 sizeHint，所以按钮并不会一直占 1/4 宽度。
理解了这一点，你就不会再问“为什么我设置了 stretch 但是宽度不是 3:1”这类问题了。stretch 管的是增量分配，不是总数按比例拆分。
3.3 弹簧 addStretch：让元素靠左靠右，而不是花式填空
QVBoxLayout和QHBoxLayout里有一个很实用的方法addStretch()。它相当于往布局里塞了一根“弹性弹簧”，会吞掉布局中的额外空间。
如果你想让一排按钮靠右对齐，直接在按钮之前加一个addStretch()就行：
QHBoxLayout *btnLayout = new QHBoxLayout; btnLayout->addStretch(); // 把按钮推到右边 btnLayout->addWidget(okBtn); btnLayout->addWidget(cancelBtn);如果想居中，就在按钮两侧都放弹簧：
btnLayout->addStretch(); btnLayout->addWidget(okBtn); btnLayout->addStretch();对比一下：addSpacing(20)是固定 20 像素的空白，而addStretch()是动态空间。窗口变大时，弹簧会跟着变长；窗口变小时，弹簧会优先被压缩。
实际做界面时，我很少用“空 widget 占位”这种办法来推动位置，直接一个addStretch()干净利落。
4. Qt Designer 拖拽与纯代码：两条路线怎么配合
4.1 Designer 里的“先选中容器，再点布局工具”
用 Qt Designer 做界面，最常遇到的疑问是：明明拖了好几个控件，为什么右键菜单里的“布局”选项是灰的？
原因通常是：你没有选中正确的容器对象。在 Designer 中，布局按钮的作用对象是“当前选中的容器”。如果你只选中了一个按钮，或者不小心选中的是整个QMainWindow，那布局工具自然没办法工作。
正确的做法是：
- 在右侧的“对象”窗口中点击选中
centralWidget（或者你想放控件的那个 QWidget/QGroupBox）； - 确认选中的是容器，而不是某个控件；
- 点击顶部工具栏的“垂直布局”“水平布局”“栅格布局”按钮，或者右键选择“布局”子菜单。
如果你想先手动调整一阵子，再统一加上布局，也没问题。控件位置可以随便摆，最后选中容器、再点一次布局按钮，Qt 会自动把已有控件放进布局里。
经验之谈：在 Designer 里拖控件之前，先放一个容器（比如QWidget或QGroupBox），把这个容器当作“画板”，再往里面拖子控件。这样结构清晰，后面套布局也得心应手。
4.2 用代码搭一个登录界面
纯代码搭界面的好处是逻辑和结构在一起，稍微复杂一点的界面更可控。下面是一个典型登录框的实现，用到了前面说的 QFormLayout、QHBoxLayout 和 QVBoxLayout。
#include <QtWidgets> class LoginWidget : public QWidget { public: LoginWidget(QWidget *parent = nullptr); }; LoginWidget::LoginWidget(QWidget *parent) : QWidget(parent) { QLabel *userLabel = new QLabel(tr("用户名:")); QLabel *passLabel = new QLabel(tr("密码:")); QLineEdit *userEdit = new QLineEdit; QLineEdit *passEdit = new QLineEdit; passEdit->setEchoMode(QLineEdit::Password); QPushButton *loginBtn = new QPushButton(tr("登录")); QPushButton *cancelBtn = new QPushButton(tr("取消")); QFormLayout *formLayout = new QFormLayout; formLayout->addRow(userLabel, userEdit); formLayout->addRow(passLabel, passEdit); QHBoxLayout *btnLayout = new QHBoxLayout; btnLayout->addStretch(); btnLayout->addWidget(loginBtn); btnLayout->addWidget(cancelBtn); QVBoxLayout *mainLayout = new QVBoxLayout; mainLayout->addLayout(formLayout); mainLayout->addLayout(btnLayout); setLayout(mainLayout); resize(360, 160); }这段代码的逻辑很直白：先做表单区，再做按钮区，最后用一个垂直布局把两者串起来。注意我创建控件时没有传 parent，而是依赖addWidget/addRow把这些控件转交给布局系统管辖，布局最终会负责它们的父对象和销毁问题。
如果你用的窗口继承自QMainWindow，则不建议直接把setLayout用在主窗口对象上，而是先创建一个中间的 QWidget 作为中心组件：
QWidget *central = new QWidget(this); setCentralWidget(central); central->setLayout(mainLayout);4.3 为什么后期我倾向代码布局
Qt Designer 对做原型、做固定表单非常高效，但项目一旦变复杂，我个人的习惯是往代码布局靠。原因是：
- 代码布局的“结构”是可读的，你可以 review，可以在函数间传递布局对象；
- .ui 文件在多人合作时经常产生合并冲突，而且冲突结果很难看懂；
- 动态生成的界面，比如根据配置增加一行输入框、一组选项按钮，用 Designer 基本没法维护，而代码可以循环生成；
- 代码布局也更容易和自定义控件、样式表、动画逻辑放在一起。
当然，这不意味着 Designer 没用。我的建议是：新手先用 Designer 把布局概念摸熟，等你能预见到布局树长什么样之后，再尝试用代码写一个完整的界面。两条路都走通了，才谈得上真正入门。
5. 布局里高发的几个坑，以及我的排查思路
5.1 在 QMainWindow 上直接 setLayout 会报错
这个报错在 Qt 社区里很常见：
QLayout: Attempting to add QLayout "" to QMainWindow "MainWindow" which already has a layout看到这句话的第一反应，不要想着怎么去强行换掉主窗口的布局。QMainWindow本身自带一套特殊布局结构，它内部要安放菜单栏、工具栏、状态栏和中心组件。你要放业务内容，只能放到centralWidget里。
排查步骤很简单：
- 确认你的窗口类是不是继承了
QMainWindow； - 如果是，检查有没有设置
centralWidget； - 正确写法是先
setCentralWidget(container)，再container->setLayout(layout)。
这个坑我几乎每次带新人都会碰到一次，解决办法其实就一行代码的事，但如果不明白原理，很容易在错误的地方反复折腾。
5.2 控件间距突然变大、边距不对
有时候你明明只加了两个按钮，但它们之间或者窗口边缘的空白大得离谱。这时候要分清两个概念：
setContentsMargins()：布局外边界与内部元素之间的边距；setSpacing()：布局内各个条目之间的距离。
窗口四周的空白，改setContentsMargins。控件之间的空隙，改setSpacing。两者不是一回事。
layout->setContentsMargins(0, 0, 0, 0); // 去掉四周默认边距 layout->setSpacing(8); // 控件间距 8 像素另外，一些控件内部自带边距，比如 QGroupBox 的标题区域、QTextEdit 的内边距。你看到的“多出来的一块空白”不一定来自布局，也可能来自控件自身。调试方法是临时给控件加一个背景色，看它的实际边界在哪里。
5.3 控件隐藏后，布局没有做到“让出空间”
默认情况下，QWidget::setVisible(false)会让控件在布局中“消失”，并腾出它占用的空间。这是一个非常实用且常被忽略的特性。比如界面上有一组“高级选项”，你用一个复选框控制它的显隐：
advancedGroup->setVisible(checked);因为布局会自动重排，下面的按钮会顺势往上顶，完全不需要你手动计算和移动。如果你发现隐藏后控件仍然占着位置，那很可能是因为你设置了QSizePolicy::RetainSizeWhenHidden，或者控件根本没有被加进布局系统。
如果你确实希望某个控件隐藏以后仍然保留占位，再考虑RetainSizeWhenHidden。默认行为下，隐藏即让位，这才是多数场景想要的。
5.4 控件被拉伸得比例失衡
一个水平布局里，如果输入框和按钮并排，窗口拉宽后按钮往往也会跟着变宽，看起来不大协调。按钮被拉宽的原因很可能是它的 sizePolicy 允许水平方向扩展。
解决方案是限制按钮不要跟随拉伸，给按钮固定宽度即可：
button->setFixedWidth(100);或者用 sizePolicy 更精细控制：
button->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);反过来，如果你希望输入框始终跟随拉伸，就把它在布局中的伸展因子调大，或者保持默认的 sizePolicy。
记住一句话：sizeHint是控件“想要”的大小，sizePolicy是控件“可以如何被拉伸和压缩”的规则，stretch是额外空间的分配权重。三者配合才能做到理想的比例。
5.5 调试布局的一个笨但有效的办法
有时候布局嵌套层级一多，你根本看不出哪个容器多占了空间。我的做法是：临时给每个容器和控件加上醒目的样式表背景色。
layout->setContentsMargins(20, 20, 20, 20); // 临时放大边界观察 widget->setStyleSheet("background: #f0a0a0;");通过这块“红色区域”，你能直观看到每个控件的实际边界，定位是哪一层布局产生了多余的空白。排查完记得把调试代码删掉。这个方法听起来原始，实际比盯着代码猜高效得多。
5.6 滚动区域和布局的配合
如果你要做一个内容很多的表单，正确姿势是：把布局放到一个QWidget上，再把QWidget放进QScrollArea。
QScrollArea *scrollArea = new QScrollArea; QWidget *content = new QWidget; QVBoxLayout *layout = new QVBoxLayout(content); // 往 layout 里加各种表单行 scrollArea->setWidget(content); scrollArea->setWidgetResizable(true);很多人直接往 QScrollArea 里填控件，结果控件根本不会变多，也没法滚动。关键就是要有一个中间 QWidget 作为“内容页”，并且在布局里加内容。setWidgetResizable(true)这个开关也要注意，它可以保证缩放时内容页跟随滚动区域的大小变化。
布局系统一旦理解成“容器里排队 + 按比例分配空间”，后面所有界面问题都只是这个模型的应用。我自己的习惯是，新建界面类时先在纸上画一遍布局树，再动手写代码，很少直接去抠像素。如果你想在布局上少走弯路，建议从今天开始，把setGeometry作为例外而不是常规手段，你的 Qt 界面才能在不同环境下保持稳定。
