本章重要 API 函数#

💡 Tips：布局的 stretch 是比例不是像素。例如 setStretch(0,1); setStretch(1,2); setStretch(2,1) 表示三项按 1:2:1 瓜分剩余空间，窗口缩放时等比例变化。还有：把布局设给 this（窗口）时，布局成为窗口的顶层布局，自动管理所有子控件几何尺寸——你不应再手动 setGeometry 定位子控件。

本章目录#

点击条目可跳转到对应小节。

学习前后依赖#

💡 Tips：布局管理器强依赖对象树（qt08）——布局本身也是 QObject，控件作为子对象交给父窗口。如果你没理解”父参数 = 内存归属”，就会困惑为什么布局里的控件不用手动 delete。先 qt08，再 qt11，顺序固定。

1. 概述#

早期 GUI 程序常用”绝对坐标”摆放控件：用 setGeometry(x, y, w, h) 写死每个按钮的位置和大小。这有两个致命问题：① 窗口缩放时控件不会跟着变，留白或溢出难看；② 多语言/高分屏下文字长度变化，布局直接错位。Qt 给出的解法是布局管理器（Layout）：你只声明”控件之间的相对关系”（水平排、垂直排、网格排、表单排），Qt 在窗口大小变化、字体变化时自动计算并刷新每个控件的位置与尺寸。

qt11 用 Widget::show1()~show4() 四个函数演示了全部主流布局：水平/垂直嵌套（show1）、网格 QGridLayout（show2）、表单 QFormLayout 配 buddy 快捷键（show3）、以及可拖拽的 QSplitter 嵌套（show4）。构造函数里调用 show4()，运行即见一个可拖动三区划分的窗口。此外 widget.ui 还用 Designer 拖出了一个 QFormLayout 内嵌 QVBoxLayout 的示例，展示”可视化布局”与”代码布局”两种等价路径。

💡 Tips：概述里最该记住的一句话——“布局管的是’关系’不是’坐标’；把控件交给布局后，就别再手动 setGeometry 它们了。” 布局和绝对坐标二选一，混用会导致布局被覆盖或控件重叠。

2. 核心概念 / 原理#

3. 布局层级与嵌套结构#

下面用 classDiagram 展示 show1 的嵌套层级（窗口 → 水平布局 → 按钮面板(垂直布局) + 文本编辑），以及 show4 的 QSplitter 嵌套：

图中 *— 表示"拥有/包含"的布局归属关系。show1 是"水平布局里嵌套一个带垂直布局的面板 + 一个编辑框"；show4是"水平QSplitter里再嵌套一个垂直QSplitter`“，形成可拖拽的田字/三区结构。

💡 Tips：图里最关键的是 Widget *-- MainHLayout（窗口拥有顶层布局）与 ButtonPanel *-- VLayout（容器控件拥有自己的子布局）——布局必须挂在一个具体控件上才有意义。常见错误是把布局 new 出来却没设给任何 this/容器，结果控件全堆在 (0,0)。另外 QSplitter 既是布局容器也是可见分隔条，与纯 QLayout 不同，它自身是一个 QWidget。

4. 核心代码解析#

qt11_tst_LayOut/widget.cpp 的 show1()（构造函数实际调用 show4()，但 show1~3 是同等重要的教学代码）：

1
void Widget::show1() {
2
    resize(360, 480);
3
    auto *mainLayout = new QHBoxLayout(this);          // 顶层水平布局挂在窗口
4
    auto *buttonPanel = new QWidget(this);             // 容器控件（父=窗口）
5
    auto *buttonLayout = new QVBoxLayout(buttonPanel); // 面板内垂直布局
6
    auto *edit = new QTextEdit(this);
7
    QSizePolicy sizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
8
    const QString buttonNames[] = {"按钮1","按钮2","按钮3"};
9
    for (const auto &name : buttonNames) {
10
        auto *button = new QPushButton(name, buttonPanel); // 父=面板！
11
        button->setSizePolicy(sizePolicy);
12
        buttonLayout->addWidget(button);
13
    }
14
    buttonLayout->setStretch(0, 1);
15
    buttonLayout->setStretch(1, 2);
16
    buttonLayout->setStretch(2, 1);   // 三按钮高度比 1:2:1
17
    mainLayout->addWidget(buttonPanel, 1);
18
    mainLayout->addWidget(edit, 2);   // 面板:编辑框 宽度比 1:2
19
}

• new QPushButton(name, buttonPanel)：父对象是 buttonPanel 而非窗口，所以按钮随面板销毁，且被 buttonLayout 管理几何。删掉这个父参数，按钮虽被布局 add 但仍然要自己管内存——典型漏写。
• setStretch 在 buttonLayout 上设 1:2:1，在 mainLayout 上 addWidget(panel,1)、addWidget(edit,2) 设 1:2，形成双层比例。

1
void Widget::show2() {
2
    auto *main_layout = new QHBoxLayout(this);
3
    auto *grp = new QGroupBox(this);
4
    auto *grp_layout = new QGridLayout(grp);
5
    auto *btn1 = new QPushButton("按钮1", grp);
6
    auto *btn2 = new QPushButton("按钮2", grp);
7
    auto *cmbbox = new QComboBox(grp);
8
    auto *edit = new QTextEdit(grp);
9
    grp_layout->addWidget(btn1, 0, 0, 1, 1);
10
    grp_layout->addWidget(btn2, 0, 1, 1, 1);
11
    grp_layout->addWidget(cmbbox, 1, 0, 1, 2);   // 第1行跨2列
12
    grp_layout->addWidget(edit, 2, 0, 1, 2);     // 第2行跨2列
13
    main_layout->addWidget(grp);
14
}

• QGridLayout::addWidget(w, row, col, rowSpan, colSpan)：后两参是跨行/跨列数。cmbbox 在 row=1,col=0 跨 2 列，占满整行。QGroupBox 是带标题边框的容器，常作网格布局的外框。

1
void Widget::show3() {
2
    auto *grp_layout = new QFormLayout(grp);
3
    auto *userlabel = new QLabel("用户名(&n):", grp);  // &n 定义快捷键 Alt+N
4
    auto *useredit = new QLineEdit(grp);
5
    auto *typelabel = new QLabel("密码(&p):", grp);
6
    auto *typeedit = new QLineEdit(grp);
7
    grp_layout->setWidget(0, QFormLayout::LabelRole, userlabel);
8
    grp_layout->setWidget(0, QFormLayout::FieldRole, useredit);
9
    grp_layout->setWidget(1, QFormLayout::LabelRole, typelabel);
10
    grp_layout->setWidget(1, QFormLayout::FieldRole, typeedit);
11
    userlabel->setBuddy(useredit);   // Alt+N 聚焦用户名框
12
    typelabel->setBuddy(typeedit);   // Alt+P 聚焦密码框
13
}

• QFormLayout 专为”标签—输入”两列表单设计；LabelRole/FieldRole 明确每行的标签与字段。setBuddy 让标签的 &n/&p 快捷键把焦点送到对应输入框——提升可访问性。

1
void Widget::show4() {                 // 构造函数实际调用
2
    auto *main_layout = new QHBoxLayout(this);
3
    auto *main_spliter = new QSplitter(Qt::Horizontal, this);
4
    main_spliter->setChildrenCollapsible(false);
5
    auto lefy_grp = new QGroupBox("功能区", main_spliter);
6
    auto right_spliter = new QSplitter(Qt::Vertical, main_spliter);
7
    auto edit = new QGroupBox("输入区", right_spliter);
8
    auto show_grp = new QGroupBox("输出区", right_spliter);
9
    main_spliter->setStretchFactor(0, 1);
10
    main_spliter->setStretchFactor(1, 2);
11
    right_spliter->setStretchFactor(0, 1);
12
    right_spliter->setStretchFactor(1, 2);
13
    main_layout->addWidget(main_spliter);
14
}

• QSplitter 与布局不同：它是可见的、可拖拽的分隔控件。setStretchFactor 设定初始比例（QSplitter 用 setStretchFactor 而非布局的 setStretch）。setChildrenCollapsible(false) 禁止把子区域拖到完全消失。widget.h 里 #include <QSplitter> 不可少，否则编译不过。

💡 Tips：这段代码藏着三个细节——① addWidget 的 stretch 参数（mainLayout->addWidget(panel,1)）与 setStretch(index,stretch) 作用相同但调用点不同：前者在加入时指定，后者事后按序号改；② QSplitter 不是 QLayout 子类，它是 QWidget，所以既能当容器也能被 addWidget 进布局；③ widget.ui 里 Designer 生成的 QFormLayout 内嵌 QVBoxLayout（stretch=“0,1,2”），与 show3 代码布局是同一概念的两种实现方式——可视化 vs 手写。

5. 运行效果 / 验证#

编译运行 qt11_tst_LayOut，构造函数调用 show4()，应看到一个窗口：

• 左侧”功能区” QGroupBox，右侧被垂直 QSplitter 分成上下”输入区""输出区”，中间有可拖拽的分隔条；左右比例初始约 1:2，上下约 1:2。
• 拖动分隔条，区域大小实时变化；缩放窗口，比例保持。
• 若把 show4() 换成 show1()：窗口左边三按钮（高度 1:2:1）、右边文本框（宽占 2 份），缩放自适应。
• show2：网格内按钮、跨列下拉框与文本框；show3：表单两行标签+输入框，按 Alt+N/Alt+P 焦点跳转。

💡 Tips：验证时最容易误判”成功”的假象——窗口能显示就以为布局对了。应拖动分隔条/缩放窗口确认控件真的在重排；若控件大小纹丝不动、重叠或挤在左上角，说明布局没真正设给 this（可能忘了 new QHBoxLayout(this) 的 this，或控件父对象与布局宿主不一致）。

容易踩坑（注意点）#

• 坑 1：布局没设给 this/容器。现象：控件全堆在窗口左上角、不自适应。原因：new QHBoxLayout() 漏传父对象，布局成了孤儿。规避：始终 new QHBoxLayout(this) 或 widget->setLayout(layout)。
• 坑 2：控件父对象与布局宿主不一致。现象：内存不释放或几何错乱。原因：控件 new QPushButton(name) 没给父，却 addWidget 进某布局。规避：控件父对象应是承载该布局的容器（如 buttonPanel）。
• 坑 3：布局与 setGeometry 混用。现象：手动设的几何被布局覆盖或控件重叠。原因：交给布局后几何由布局算。规避：布局管理的控件不要再 setGeometry；要固定大小用 setFixedSize/sizePolicy。
• 坑 4：stretch 设了但 sizePolicy 不允许扩展。现象：比例无效、控件不撑开。原因：sizePolicy 默认 Preferred/Minimum 可能拒绝扩展。规避：需要撑满设 QSizePolicy::Expanding。
• 坑 5：QSplitter 当布局用 setStretch。现象：比例无效。原因：QSplitter 用 setStretchFactor，不是布局的 setStretch。规避：记清 API 差异。
• 坑 6：QGridLayout 跨行列参数理解错。现象：控件错位/覆盖。原因：后两参是 rowSpan/colSpan（跨度）不是结束行列。规避：addWidget(w, r, c, 1, 2) 表示占 1 行 2 列。

学习要点总结#

Q&A（常见问题）#

Q1：布局和 QSplitter 有什么区别？该用哪个？ A1：布局（QLayout）是不可见的几何求解器，自动排列但不能由用户拖拽调整；QSplitter 是可见的、可拖拽的分隔控件，用户能实时改变区域大小。静态自适应用布局，需要用户手动调比例用 QSplitter（它本身也能被放进布局里嵌套）。

Q2：stretch 到底怎么算？设了为什么没效果？ A2：stretch 是剩余空间的分配权重，比值决定最终占比（如 1:2:1）。若没效果，多半是子控件的 sizePolicy 不允许扩展（如 Fixed/Minimum 水平方向拒绝拉伸），或你用了 setFixedSize 锁死。把对应方向 sizePolicy 设为 Expanding 再试。

Q3：Qt5 和 Qt6 在布局上有差异吗？ A3：布局 API 几乎完全兼容。Qt6 主要变化：① QWidget::setLayout 等行为一致；② High-DPI 支持更强，布局 sizeHint 按设备像素比更准；③ QFormLayout 在 Qt6 对 RowWrapPolicy 等细节有微调。代码层面 show1~4 在 Qt5/Qt6 都能编译运行。

Tips（全局速记）#