Qt 网格布局 QGridLayout

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

【一个最简单的 QGridLayout 布局】

#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。

2015-06-17_114502

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

2015-06-17_114924

实现的代码如下:

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

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

2015-06-17_115638

实现代码:

#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。实现代码如下:

#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);
}

效果图如下:

2015-06-17_120740

评论