【QT】常用控件（三）Qt布局管理器（网格/表单/间隔器）

艾莉丝努力练剑2026-05-26 8:35

🎬 个人主页 ：艾莉丝努力练剑
❄专栏传送门 ：《C语言》《数据结构与算法》《C/C++干货分享&学习过程记录》
《Linux操作系统编程详解》《笔试/面试常见算法：从基础到进阶》《Python干货分享》

⭐️为天地立心，为生民立命，为往圣继绝学，为万世开太平

🎬 艾莉丝的简介：

文章目录

  • 整体知识思维导图
  • 导入语
  • [1 ~> 网格布局 QGridLayout](#1 ~> 网格布局 QGridLayout)
    • [1.1 核心属性](#1.1 核心属性)
      • [1.2 基本使用方法](#1.2 基本使用方法)
      • [1.2.1 2×2 标准网格布局](#1.2.1 2×2 标准网格布局)
      • [1.2.2 模拟水平布局](#1.2.2 模拟水平布局)
      • [1.2.3 模拟垂直布局](#1.2.3 模拟垂直布局)
    • [1.3 高级用法：拉伸系数](#1.3 高级用法：拉伸系数)
      • [1.3.1 水平拉伸系数](#1.3.1 水平拉伸系数)
      • [1.3.2 垂直拉伸系数](#1.3.2 垂直拉伸系数)
  • [2 ~> 表单布局 QFormLayout](#2 ~> 表单布局 QFormLayout)
    • [2.1 核心特点](#2.1 核心特点)
    • [2.2 基本使用方法](#2.2 基本使用方法)
    • [2.3 实战示例：用户信息表单](#2.3 实战示例：用户信息表单)
  • [3 ~> 间隔器 QSpacerItem](#3 ~> 间隔器 QSpacerItem)
    • [3.1 核心属性](#3.1 核心属性)
    • [3.2 基本使用方法](#3.2 基本使用方法)
    • [3.3 实战示例：调整按钮对齐方式](#3.3 实战示例：调整按钮对齐方式)
      • [3.3.1 空白在中间（分隔两个按钮）](#3.3.1 空白在中间（分隔两个按钮）)
      • [3.3.2 空白在左侧（按钮右对齐）](#3.3.2 空白在左侧（按钮右对齐）)
      • [3.3.3 空白在右侧（按钮左对齐）](#3.3.3 空白在右侧（按钮左对齐）)
    • [3.4 Qt Designer 中的使用](#3.4 Qt Designer 中的使用)
  • 总结
  • 结尾

整体知识思维导图

Bash 复制代码 
Qt布局管理器核心体系
├─ 布局管理器概述
│  ├─ 绝对定位的局限性（坐标计算繁琐、无法自适应窗口）
│  └─ Qt布局管理器类型（垂直/水平/网格/表单/间隔器）
├─ 网格布局 QGridLayout
│  ├─ 核心属性
│  │  ├─ 边距：左/右/上/下边距
│  │  ├─ 间距：水平/垂直间距
│  │  └─ 拉伸系数：行拉伸/列拉伸
│  ├─ 基本使用
│  │  ├─ addWidget(控件, 行, 列) 语法
│  │  ├─ 2×2标准网格布局
│  │  ├─ 模拟水平布局（同行不同列）
│  │  ├─ 模拟垂直布局（同列不同行）
│  │  └─ 行列号仅表示相对位置（大数值无额外空白）
│  └─ 高级用法
│     ├─ 水平拉伸系数 setColumnStretch
│     ├─ 垂直拉伸系数 setRowStretch
│     └─ 尺寸策略 QSizePolicy 对拉伸的影响
├─ 表单布局 QFormLayout
│  ├─ 核心特点（QGridLayout特殊情况，固定N行2列）
│  ├─ 基本使用
│  │  ├─ addRow(标签, 输入控件)
│  │  └─ addRow(NULL, 按钮) 实现右对齐
│  └─ 适用场景（用户信息填写、表单提交）
└─ 间隔器 QSpacerItem
   ├─ 核心作用（添加不等间距空白、调整控件对齐）
   ├─ 核心属性（宽/高、水平/垂直尺寸策略）
   ├─ 基本使用
   │  ├─ addSpacerItem 方法
   │  ├─ 空白在中间（分隔控件）
   │  ├─ 空白在左侧（控件右对齐）
   │  └─ 空白在右侧（控件左对齐）
   └─ Qt Designer中的使用（水平/垂直间隔器控件）

导入语

在 Qt 图形界面开发中，控件的布局直接决定了界面的美观度和可用性。如果单纯使用setGeometry或move进行绝对定位，不仅需要手动计算每个控件的坐标，而且当窗口大小改变时，控件无法自适应调整，会出现重叠、变形等问题。为了解决这些痛点，Qt 提供了布局管理器机制，能够自动计算控件的位置和尺寸，实现界面的自适应布局。

Qt 主要提供了四种基础布局管理器：垂直布局（QVBoxLayout）、水平布局（QHBoxLayout）、网格布局（QGridLayout）和表单布局（QFormLayout），同时配合间隔器（QSpacerItem）可以实现更灵活的间距调整和对齐效果。其中网格布局是最灵活的通用布局，表单布局专门针对信息填写场景优化，间隔器则是精细调整布局的重要工具。本文将系统讲解这三种布局的核心原理、使用方法和实战技巧，帮助你快速掌握 Qt 布局开发的核心能力，构建出专业、美观且自适应的图形界面。

1 ~> 网格布局 QGridLayout

网格布局将窗口划分为 M 行 N 列的网格结构，每个控件可以放置在指定的网格单元格中。它不仅能实现规则的矩阵排列，还能通过拉伸系数和尺寸策略实现控件大小的比例调整，甚至可以模拟水平布局和垂直布局的效果，是 Qt 中最常用、最灵活的布局管理器。

1.1 核心属性

网格布局的核心属性分为三类，分别控制布局与窗口的边距、控件之间的间距以及拉伸时的大小比例：

  • 边距属性 ：控制布局管理器与窗口边缘的距离
    • layoutLeftMargin：左侧边距
    • layoutRightMargin：右侧边距
    • layoutTopMargin：上方边距
    • layoutBottomMargin：下方边距
  • 间距属性 ：控制相邻控件之间的距离
    • layoutHorizontalSpacing：水平方向相邻控件的间距
    • layoutVerticalSpacing：垂直方向相邻控件的间距
  • 拉伸系数属性 ：控制行或列在窗口拉伸时的大小比例
    • layoutRowStretch：行方向的拉伸系数
    • layoutColumnStretch：列方向的拉伸系数

1.2 基本使用方法

使用网格布局的核心是addWidget方法，通过指定行号和列号将控件放置到对应的网格位置。行号和列号从 0 开始计数，且仅表示控件之间的相对位置，不会因为数值过大而产生额外的空白空间。例如将控件放在 (0,0)、(1,1)、(100,100) 位置，效果与放在 (0,0)、(1,1)、(2,2) 完全相同。

1.2.1 2×2 标准网格布局

将四个按钮排列成 2 行 2 列的网格：

cpp 复制代码 
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QGridLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 创建四个按钮
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");
    QPushButton* button4 = new QPushButton("按钮4");

    // 创建网格布局管理器
    QGridLayout* layout = new QGridLayout();
    layout->addWidget(button1, 0, 0);
    layout->addWidget(button2, 0, 1);
    layout->addWidget(button3, 1, 0);
    layout->addWidget(button4, 1, 1);

    // 将布局设置到窗口
    this->setLayout(layout);
}

Widget::~Widget()
{
    delete ui;
}

运行效果：四个按钮均匀分布在窗口中，当窗口大小改变时，按钮会自动调整尺寸填满网格。

1.2.2 模拟水平布局

将所有控件放在同一行的不同列中，即可实现与 QHBoxLayout 完全相同的水平排列效果：

cpp 复制代码 
// 替换上述布局添加代码
layout->addWidget(button1, 0, 0);
layout->addWidget(button2, 0, 1);
layout->addWidget(button3, 0, 2);
layout->addWidget(button4, 0, 3);

1.2.3 模拟垂直布局

将所有控件放在同一列的不同行中，即可实现与 QVBoxLayout 完全相同的垂直排列效果：

cpp 复制代码 
// 替换上述布局添加代码
layout->addWidget(button1, 0, 0);
layout->addWidget(button2, 1, 0);
layout->addWidget(button3, 2, 0);
layout->addWidget(button4, 3, 0);

1.3 高级用法：拉伸系数

默认情况下，网格布局中的所有行和列大小均等。当需要实现不同大小的控件时，可以通过设置拉伸系数来指定行或列的大小比例。拉伸系数是相对值，例如系数 1:2 表示后者的大小是前者的 2 倍。

1.3.1 水平拉伸系数

使用setColumnStretch(列号, 拉伸系数)方法设置列的拉伸比例：

cpp 复制代码 
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QGridLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 创建6个按钮，按2行3列排列
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");
    QPushButton* button4 = new QPushButton("按钮4");
    QPushButton* button5 = new QPushButton("按钮5");
    QPushButton* button6 = new QPushButton("按钮6");

    QGridLayout* layout = new QGridLayout();
    layout->addWidget(button1, 0, 0);
    layout->addWidget(button2, 0, 1);
    layout->addWidget(button3, 0, 2);
    layout->addWidget(button4, 1, 0);
    layout->addWidget(button5, 1, 1);
    layout->addWidget(button6, 1, 2);

    // 设置水平拉伸系数：第0列1，第1列1，第2列2
    layout->setColumnStretch(0, 1);
    layout->setColumnStretch(1, 1);
    layout->setColumnStretch(2, 2);

    this->setLayout(layout);
}

运行效果：第三列的宽度是第一列和第二列的 2 倍，窗口水平拉伸时，三列会按照 1:1:2 的比例同步放大。

特殊情况：拉伸系数为 0 如果将某一列的拉伸系数设置为 0，表示该列不参与拉伸，宽度保持固定值：

cpp 复制代码 
layout->setColumnStretch(0, 0);  // 第0列固定宽度
layout->setColumnStretch(1, 1);  // 第1列拉伸系数1
layout->setColumnStretch(2, 2);  // 第2列拉伸系数2

1.3.2 垂直拉伸系数

使用setRowStretch(行号, 拉伸系数)方法设置行的拉伸比例。需要特别注意：QPushButton 的默认尺寸策略是水平方向Expanding、垂直方向Preferred，因此直接设置垂直拉伸系数可能没有效果，必须先将按钮的垂直尺寸策略设置为QSizePolicy::Expanding。

cpp 复制代码 
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QGridLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 创建6个按钮，按3行2列排列
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");
    QPushButton* button4 = new QPushButton("按钮4");
    QPushButton* button5 = new QPushButton("按钮5");
    QPushButton* button6 = new QPushButton("按钮6");

    // 设置按钮的尺寸策略：水平和垂直方向都允许拉伸
    button1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    button2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    button3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    button4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    button5->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    button6->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    QGridLayout* layout = new QGridLayout();
    layout->addWidget(button1, 0, 0);
    layout->addWidget(button2, 0, 1);
    layout->addWidget(button3, 1, 0);
    layout->addWidget(button4, 1, 1);
    layout->addWidget(button5, 2, 0);
    layout->addWidget(button6, 2, 1);

    // 设置垂直拉伸系数：第0行1，第1行1，第2行2
    layout->setRowStretch(0, 1);
    layout->setRowStretch(1, 1);
    layout->setRowStretch(2, 2);

    this->setLayout(layout);
}

运行效果：第三行的高度是第一行和第二行的 2 倍，窗口垂直拉伸时，三行会按照 1:1:2 的比例同步放大。

2 ~> 表单布局 QFormLayout

表单布局是网格布局的特殊情况，专门用于实现两列的表单界面。它将窗口划分为 N 行 2 列的结构，第一列通常是标签（QLabel）用于显示提示信息，第二列是输入控件（如 QLineEdit、QComboBox）用于用户输入数据，广泛应用于用户注册、信息填写等场景。

2.1 核心特点

  • 固定为 N 行 2 列的结构，简化了表单界面的开发
  • 自动对齐标签和输入控件，界面更加整齐美观
  • 支持添加按钮等其他控件，可实现右对齐效果

2.2 基本使用方法

表单布局的核心方法是addRow，用于添加一行控件，有两种常用形式：

  1. 添加标签和输入控件：layout->addRow(标签指针, 输入控件指针)
  2. 添加单个控件（如按钮）：layout->addRow(NULL, 控件指针)，此时控件会右对齐显示

2.3 实战示例：用户信息表单

创建一个包含姓名、年龄、电话输入框和提交按钮的完整表单：

cpp 复制代码 
#include "widget.h"
#include "ui_widget.h"
#include <QFormLayout>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 创建表单布局管理器
    QFormLayout* layout = new QFormLayout();
    this->setLayout(layout);

    // 创建标签和输入框
    QLabel* label1 = new QLabel("姓名");
    QLineEdit* edit1 = new QLineEdit();

    QLabel* label2 = new QLabel("年龄");
    QLineEdit* edit2 = new QLineEdit();

    QLabel* label3 = new QLabel("电话");
    QLineEdit* edit3 = new QLineEdit();

    // 创建提交按钮
    QPushButton* button = new QPushButton("提交");

    // 添加行到表单布局
    layout->addRow(label1, edit1);
    layout->addRow(label2, edit2);
    layout->addRow(label3, edit3);
    // 添加提交按钮，第一个参数为NULL实现右对齐
    layout->addRow(NULL, button);
}

Widget::~Widget()
{
    delete ui;
}

运行效果：表单界面整齐排列，标签在左侧，输入框在右侧，提交按钮右对齐显示。当窗口大小改变时，输入框会自动拉伸以适应窗口宽度。

3 ~> 间隔器 QSpacerItem

在使用布局管理器时，控件之间的间距通常由布局的spacing属性统一控制。但有时需要实现不等间距的布局，或者在特定位置添加空白区域来调整控件的对齐方式，这时就需要使用间隔器（QSpacerItem）。间隔器本质上是一个不可见的控件，用于占据布局中的空白空间。

3.1 核心属性

QSpacerItem 的核心属性决定了空白区域的尺寸和拉伸行为：

  • width：空白区域的宽度
  • height：空白区域的高度
  • hData：水平方向的尺寸策略，可选值包括：
    • QSizePolicy::Maximum：最大尺寸为固定值，布局时不会小于该值
    • QSizePolicy::Preferred：理想尺寸为固定值，布局时会尽量接近该值
    • QSizePolicy::Expanding：尺寸可以根据空间调整，尽可能占据更多空间
    • QSizePolicy::Shrinking：尺寸可以根据空间调整，尽可能缩小以适应空间
  • vData：垂直方向的尺寸策略，可选值与hData相同

3.2 基本使用方法

使用间隔器的步骤是：创建 QSpacerItem 对象，指定宽度、高度和尺寸策略，然后使用addSpacerItem方法将其添加到布局中的指定位置。间隔器的添加顺序决定了空白区域的位置。

3.3 实战示例：调整按钮对齐方式

3.3.1 空白在中间（分隔两个按钮）

cpp 复制代码 
#include "widget.h"
#include "ui_widget.h"
#include <QHBoxLayout>
#include <QPushButton>
#include <QSpacerItem>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QHBoxLayout* layout = new QHBoxLayout();
    this->setLayout(layout);

    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");

    // 创建间隔器：宽度200，高度20，水平和垂直方向均为Preferred
    QSpacerItem* spacer = new QSpacerItem(200, 20);

    // 添加顺序：按钮1 -> 间隔器 -> 按钮2，空白在中间
    layout->addWidget(button1);
    layout->addSpacerItem(spacer);
    layout->addWidget(button2);
}

3.3.2 空白在左侧（按钮右对齐）

cpp 复制代码 
// 修改添加顺序：间隔器 -> 按钮1 -> 按钮2
layout->addSpacerItem(spacer);
layout->addWidget(button1);
layout->addWidget(button2);

3.3.3 空白在右侧（按钮左对齐）

cpp 复制代码 
// 修改添加顺序：按钮1 -> 按钮2 -> 间隔器
layout->addWidget(button1);
layout->addWidget(button2);
layout->addSpacerItem(spacer);

3.4 Qt Designer 中的使用

在 Qt Designer 中，可以直接拖拽间隔器控件到界面中，提供了两种类型：

  • Horizontal Spacer：水平间隔器，用于在水平方向添加空白
  • Vertical Spacer：垂直间隔器，用于在垂直方向添加空白

拖拽间隔器到布局中后，可以在属性编辑器中调整其宽度、高度和尺寸策略，实现与代码完全相同的效果。

总结

本文系统讲解了 Qt 中三种核心布局工具的使用方法，它们是构建自适应界面的基础：

网格布局 QGridLayout 是最灵活的通用布局，支持任意 M 行 N 列的排列，通过拉伸系数可以精确控制控件的大小比例。需要重点记住：行列号仅表示相对位置，不会产生额外空白；垂直拉伸必须配合QSizePolicy::Expanding尺寸策略才能生效。

表单布局 QFormLayout 是专门针对信息填写场景优化的布局，通过addRow方法可以快速构建整齐的两列表单，自动实现标签和输入控件的对齐，大大提高了表单开发的效率。

间隔器 QSpacerItem 是精细调整布局的重要工具，通过在不同位置添加间隔器，可以实现不等间距布局和各种对齐效果（左对齐、右对齐、中间分隔），弥补了统一间距的局限性。

在实际开发中，通常需要结合多种布局管理器，通过布局嵌套的方式实现复杂的界面效果。掌握这三种布局的核心用法和注意事项，能够帮助你快速构建出专业、美观且自适应的 Qt 图形界面。

结尾

uu们，本文的内容到这里就全部结束了，艾莉丝在这里再次感谢您的阅读！

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| ### 艾莉丝努力练剑 C/C++ & Linux 底层探索者 | 一个正在努力练剑的技术博主 *** ** * ** *** 👀 【关注】 跟随我一起深耕技术领域，见证每一次成长。 ❤️ 【点赞】 让优质内容被更多人看见，让知识传递更有力量。 ⭐ 【收藏】 把核心知识点存好，在需要时随时查、随时用。 💬 【评论】 分享你的经验或疑问，评论区一起交流避坑！ 不要忘记给博主"一键四连"哦！ "今日练剑达成！" "技术之路难免有困惑，但同行的人会让前进更有方向。" |

结语：希望对学习QT相关内容的uu有所帮助，不要忘记给博主"一键四连"哦！

往期回顾：

【QT】常用控件（二）Qt常用控件与布局管理

🗡博主在这里放了一只小狗，大家看完了摸摸小狗放松一下吧！🗡 ૮₍ ˶ ˊ ᴥ ˋ˶₎ა

在这里插入代码片

相关推荐
say_fall12 小时前
从零开始学x86汇编_16位指令系统完全指南
开发语言·汇编·计算机组成·微机原理
代码AC不AC12 小时前
【Linux】线程封装
linux·线程封装
粉嘟小飞妹儿12 小时前
Java Switch与Break用法详解
java·开发语言
小猫咪0112 小时前
Linux 日志系统入门：/var/log 和 journalctl 怎么排查问题？
linux
骑士雄师12 小时前
python 的列表和java中的集合有什么区别
java·windows·python
csjane107912 小时前
Redis 分布式锁实战
java·redis
尋找記憶的魚12 小时前
基于langchain4j的ai编程助手项目（完整篇）
java·人工智能·spring boot·langchain·ai编程
川冰ICE12 小时前
JavaScript入门⑩｜BOM与浏览器对象，localStorage_位置_历史记录
开发语言·javascript·ecmascript
LT101579744412 小时前
2026年自动化性能测试平台选型：持续集成与常态化测试落地指南
运维·ci/cd·自动化
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法04裂开！ChatGPT 居然开始要手机号验证，附详细解决方法05CC-Switch & Claude 基于 Linux 服务器安装使用指南06【AI】2026 年具身智能模型和世界模型总结07Codegraph 实战：用知识图谱让 AI 编程效率翻倍08几个好用的ip纯净度检测网站09LLM Wiki：让大模型替你打理知识库的完整指南10给 Claude Code 装上“技能库”和“眼睛”：配置 Skills 与图片识别实战