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

【一个最简单的 QGridLayout 布局】

1
2
3
4
5
6
7
8
9
10
11
12
13
#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 实现的代码如下:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#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。实现代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#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