Qt 布局管理器详解：QVBoxLayout、QHBoxLayout、QGridLayout、QFormLayout

此时拖拽窗口，按钮就会自适应窗口。

更多细节

1. 注意：在代码中，当你调用 QWidget::setLayout() 时，只能设置一个布局管理器，但允许嵌套多个布局管理器。这个布局管理器会成为 Widget 的直接布局管理器。
2. 在代码中创建多个 layout 时，它们会嵌套在第一个生成的 Layout 上。
   • layout 标签表示的是布局管理器的本体，外面会自动创建出了一个 Widget
   • 每个 layout 里面就可以包含若干个 item（也就是如按钮的控件）
3. 也可以先拖拽其他控件，然后再套上 layout。

框选住刚刚拖拽的控件，然后点击左上角就能放到 layout 中。

水平布局 QHBoxLayout

使用 QHBoxLayout 表示水平的布局管理器（H 是 horizontal 的缩写）。

核心属性

(和 QVBoxLayout 属性是一致的)

实操示例

1. 创建出三个按钮，按钮 1/2/3
2. 创建 QHBoxLayout 对象
3. 将按钮添加到 layout 中（addWidget）
4. 再将 layout 设置到 this 上（setLayout）
5. 还能通过 layoutLeftMargin…等设置边距

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QHBoxLayout>

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget)
{
    ui->setupUi(this);
    QPushButton* b1 = new QPushButton("按钮 1");
    QPushButton* b2 = new QPushButton("按钮 2");
    QPushButton* b3 = new QPushButton("按钮 3");
    
    // 创建一个 h 布局管理器
    QHBoxLayout* layout = new QHBoxLayout();
    // 将按钮添加到布局管理器中
    layout->addWidget(b1);
    layout->addWidget(b2);
    layout->addWidget(b3);
    setLayout(layout);
    layout->setMargin(200); // 边距
    layout->setSpacing(50); // 内部控件见的距离
}

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

嵌套布局

布局管理器之间，也能嵌套布局管理器（例如：垂直布局内部嵌套水平布局）。

1. 创建垂直布局管理器 QVBoxLayout 对象
2. 设置到窗口里面：setLayout
3. 添加两个按钮进去 addWidget
4. 创建一个水平的布局管理器
   • 也添加两个按钮进去
5. 把水平布局管理器添加到垂直布局管理器内部（addLayout）

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QVBoxLayout>
#include <QHBoxLayout>

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget)
{
    ui->setupUi(this);
    QVBoxLayout* vLayout = new QVBoxLayout();
    this->setLayout(vLayout);
    
    QPushButton* b1 = new QPushButton("按钮 1");
    QPushButton* b2 = new QPushButton("按钮 2");
    
    // 创建一个 h 布局管理器
    QHBoxLayout* hLayout = new QHBoxLayout();
    // 将按钮添加到布局管理器中
    hLayout->addWidget(b1);
    hLayout->addWidget(b2);
    
    QPushButton* b4 = new QPushButton("按钮 4");
    QPushButton* b5 = new QPushButton("按钮 5");
    vLayout->addWidget(b4);
    vLayout->addWidget(b5);
    vLayout->addLayout(hLayout);
}

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

网格布局 QGridLayout

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

核心属性

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

实操示例

1. 创建 4 个按钮 按钮 1/2/3/4
2. 创建一个 QGridLayout 网格布局对象
3. 添加将按钮添加进去 addWidget，其中传递过程中还需要设置 行、列
4. 将网格布局管理器设置到窗口中 setLayout
5. 因为是行列的添加按钮的位置，所以可以随意的放到网格中
6. 任意调整行列，即可看到不同的效果，但注意的是如果设置的是一个很大的值，但是这个值和上一个值之间并没有其他的元素，那么并不会在中间腾出额外的空间
7. 此处设置的行数和列数，只是用来决定控件之间的相对位置，谁先谁后

甚至还可以斜着布局，同理放到同一列（就相当于垂直布局），将 4 个按钮都放到同一行（就相当于水平布局）。

#include "widget.h"
#include "ui_widget.h"
#include <QGridLayout>
#include <QPushButton>

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 创建 GridLayout 布局管理器
    QGridLayout* grid = new QGridLayout();
    
    // 创建 4 按按钮
    QPushButton* b1 = new QPushButton("按钮 1");
    QPushButton* b2 = new QPushButton("按钮 2");
    QPushButton* b3 = new QPushButton("按钮 3");
    QPushButton* b4 = new QPushButton("按钮 4");
    
    // 斜着布局
    grid->addWidget(b1, 0, 0);
    grid->addWidget(b2, 1, 1);
    grid->addWidget(b3, 2, 2);
    grid->addWidget(b4, 3, 3);
    
    setLayout(grid);
}

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

拉伸系数

1. 刚刚创建的布局管理器，里面控件的尺寸都是均等的
2. 当需要创建出尺寸不同的是，就可以设置拉伸系数
3. 拉伸系数就相当于设置控件之间尺寸的比例

实操

1. 创建 6 个 按钮 1 ~ 6，使用网格布局 2 * 3 的方式排列
2. 在设置水平拉伸系数 setColumnStretch：按照 1:1:2 的比例进行放置
3. 当拉伸系数设为 0，就不参与拉伸，那么按钮的大小就是固定值

设置垂直拉伸系数的问题

当我们设置垂直拉伸系数，发现其实并没有效果。这是因为 QSizePolicy 的限制（默认是 Ignored 的）：

QSizePolicy::Ignored : 忽略控件的尺寸，不对布局产生影响 QSizePolicy::Minimum : 控件的最小尺寸为固定值，布局时不会超过该值。 QSizePolicy::Maximum : 控件的最大尺寸为固定值，布局时不会小于该值。 QSizePolicy::Preferred : 控件的理想尺寸为固定值，布局时会尽量接近该值。 QSizePolicy::Expanding : 控件的尺寸可以根据空间调整，尽可能占据更多空间。 QSizePolicy::Shrinking : 控件的尺寸可以根据空间调整，尽可能缩小以适应空间

所以按钮设置 setSizePolicy 的尺寸策略为 QSizePolicy::Expanding，让其可以拉伸展开（需要同时设置垂直和水平）。这样就能完成垂直的策略。

// 将三列中比例为 1:1:3
ui->gridLayout->setColumnStretch(0, 1);
ui->gridLayout->setColumnStretch(1, 1);
ui->gridLayout->setColumnStretch(2, 3);

// 将行的比例为 1:3
ui->gridLayout->setRowStretch(0, 1);
ui->gridLayout->setRowStretch(1, 3);

// 设置策略
ui->pushButton->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
// ... 其他按钮同样设置

表单布局 QFormLayout

类似一种填表，填调查问卷的样式，一般是 N 行 2 列。

实操示例

1. 设置 3 行 2 列的表单，并设置到窗口中
2. 创建 3 个 label，并作为第一列
3. 创建 3 个输入框作为第二列
4. 将上述控件添加到表单中 addRow(Column1, Column2,...)（添加到行中）
5. 创建一个提交按钮，并同样放到表单中

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QLineEdit>
#include <QFormLayout>
#include <QLabel>

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 创建 layout
    QFormLayout* layout = new QFormLayout();
    this->setLayout(layout);
    
    // 创建三个 label
    QLabel* label1 = new QLabel("姓名");
    QLabel* label2 = new QLabel("年龄");
    QLabel* label3 = new QLabel("电话");
    
    // 创建三个 lineEdit
    QLineEdit* lineEdit1 = new QLineEdit();
    QLineEdit* lineEdit2 = new QLineEdit();
    QLineEdit* lineEdit3 = new QLineEdit();
    
    // 创建一个提交按钮
    QPushButton* btn = new QPushButton("提交");
    
    // 把上述元素添加到 layout 中
    layout->addRow(label1, lineEdit1);
    layout->addRow(label2, lineEdit2);
    layout->addRow(label3, lineEdit3);
    layout->addRow(NULL, btn);
}

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

Spacer 空白

使用布局管理器的时候，可能需要在控件之间，添加一段空白。就可以使用 QSpacerItem 来表示，通过添加这个控件来达到空白的效果。

核心属性

实操

让两个按钮中间有一定的空白：

1. 创建 QHBoxLayout，并设置到创建中
2. 图按钮中间并没有空隙，现在想要让他空开一点：就可以使用 spacer 使两个按钮之间存在空白
3. 通过 addSpacerItem 进行添加 spacer 控件
4. QSpacerItem 构造的时候设置宽高

通过添加空间的顺序确定 spacer 的位置。若放到前面则空白在前，反之在后。

总结

前面的每个控件本质都是可扩展的，每个控件都是 Qt 内置的一个类，咱们在代码中都可以基于这个类，继承出自定义的子类，在这个自定义的子类中，又可以添加许多的属性和方法，实现自己的需求场景，还可以在子类中，把多个控价组合到一起。