Qt 网格布局 QGridLayout

见其名知其意，QGridLayout 是一个网格形式的布局，他可以让控件或嵌套 layout 以网格形式在窗口中排布，我们只需在创建控件的时候指定其在网格中的位置即可。

【一个最简单的 QGridLayout 布局】

代码语言：javascript复制

#include "cwidget.h"
#include <QGridLayout>
#include <QPushButton>

CWidget::CWidget(QWidget *parent) : QWidget(parent)
{
    QGridLayout* grid = new QGridLayout(this);

    grid->addWidget(new QPushButton("button 0,0"), 0, 0);
    grid->addWidget(new QPushButton("button 0,1"), 0, 1);
    grid->addWidget(new QPushButton("button 1,0"), 1, 0);
    grid->addWidget(new QPushButton("button 1,1"), 1, 1);
}

如下图，QGridLayout 是将一个窗口以网格形式进行了布局，第一行第一列就是 0，0、第一行第二列就是 0，1、第二行第一列就是 1，0、第二行第二列就是 1，1。

如果你希望四个按钮一直在窗口的左上角，同样我们可以通过弹簧来实现，但 QGridLayout 的弹簧与 QHBoxLayout 及 QVBoxLayout 有些不同。它是设定整一行和整一列的弹簧，而不是设定某个格子的弹簧。如下图表示：

实现的代码如下：

代码语言：javascript复制

// 在第 2 列增加一个弹簧，比例为 1
grid->setColumnStretch(2, 1);
// 在第 2 行增加一个弹簧，比例为 1
grid->setRowStretch(2, 1);

如果你希望窗口中所有的控件都在中间，那么就需要在0行设置一个弹簧，0列设置一个弹簧，把控件放在1行和2行、1列和2列中，最后在3列和3行再设置弹簧，这样就把控件都挤在中间了，如下图表示：

实现代码：

代码语言：javascript复制

#include "cwidget.h"
#include <QGridLayout>
#include <QPushButton>

CWidget::CWidget(QWidget *parent) : QWidget(parent)
{
    QGridLayout* grid = new QGridLayout(this);

    grid->addWidget(new QPushButton("button 1,1"), 1, 1);
    grid->addWidget(new QPushButton("button 1,2"), 1, 2);
    grid->addWidget(new QPushButton("button 2,1"), 2, 1);
    grid->addWidget(new QPushButton("button 2,2"), 2, 2);

    // 在第 0 列增加一个弹簧，比例为 1
    grid->setColumnStretch(0, 1);
    // 在第 0 行增加一个弹簧，比例为 1
    grid->setRowStretch(0, 1);

    // 在第 3 列增加一个弹簧，比例为 1
    grid->setColumnStretch(3, 1);
    // 在第 3 行增加一个弹簧，比例为 1
    grid->setRowStretch(3, 1);
}

上面是一种实现思路，还有另外一种思路就是 QGridLayout 嵌套 QGridLayout，外部的 QGridLayout 只负责设置四边的弹簧，然后留出中间的位置嵌套一个带有控件的 QGridLayout。实现代码如下：

代码语言：javascript复制

#include "cwidget.h"
#include <QGridLayout>
#include <QPushButton>

CWidget::CWidget(QWidget *parent) : QWidget(parent)
{
    // 原 layout 不指定父窗口
    QGridLayout* grid = new QGridLayout;

    grid->addWidget(new QPushButton("button 0,0"), 0, 0);
    grid->addWidget(new QPushButton("button 0,1"), 0, 1);
    grid->addWidget(new QPushButton("button 1,0"), 1, 0);
    grid->addWidget(new QPushButton("button 1,1"), 1, 1);

    // 再创建一个 Layout
    QGridLayout* mainLayout = new QGridLayout(this);
    // 添加0行和2行的弹簧
    mainLayout->setRowStretch(0, 1);
    mainLayout->setRowStretch(2, 1);

    //中间是 1行， 1列 的位置，嵌入上面的 layout
    mainLayout->addLayout(grid, 1, 1);

    // 添加0列和2列的弹簧
    mainLayout->setColumnStretch(0, 1);
    mainLayout->setColumnStretch(2, 1);
}

效果图如下：

qt button grid include 布局

0 人点赞