Qt 布局之三：栅格布局的使用详解

前言

QGridLayout：栅格布局，也被称作网格布局（多行多列）。

栅格布局将位于其中的窗口部件放入一个网状的栅格之中。QGridLayout 需要将提供给它的空间划分成的行和列，并把每个窗口部件插入并管理到正确的单元格。 栅格布局是这样工作的：

它计算了位于其中的空间，然后将它们合理的划分成若干个行（row）和列（column），并把每个由它管理的窗口部件放置在合适的单元之中，这里所指的单元（cell）即是指由行和列交叉所划分出来的空间。

在栅格布局中，每个列（以及行）都有一个最小宽度以及一个伸缩因子。最小宽度指的是位于该列中的窗口部件的最小的宽度，而伸缩因子决定了该列内的窗口部件能够获得多少空间。

效果

下面我们以 QQ 登陆窗口为例，来讲解如何使用 QGridLayout。先看下效果：

源码

#include <QApplication>
#include <QGridLayout>
#include <QLabel>
#include <QLineEdit>
#include <QCheckBox>
#include <QPushButton>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 创建widget
    QWidget *pWidget = new QWidget();
    pWidget->setWindowTitle(QObject::tr("Qt之栅格布局"));

    // 构建控件 头像框、用户名、密码输入框等
    QLabel *pImageLabel = new QLabel();
    QLineEdit *pUserLineEdit = new QLineEdit();
    QLineEdit *pPasswordLineEdit = new QLineEdit();
    QCheckBox *pRememberCheckBox = new QCheckBox();
    QCheckBox *pAutoLoginCheckBox = new QCheckBox();
    QPushButton *pLoginButton = new QPushButton();
    QPushButton *pRegisterButton = new QPushButton();
    QPushButton *pForgotButton = new QPushButton();

    pLoginButton->setFixedHeight(30);
    pUserLineEdit->setFixedWidth(200);

    // 设置头像框
    pImageLabel->setFixedSize(90, 90);
    pImageLabel->setStyleSheet("border:1px solid red;");

    // 设置文本
    pUserLineEdit->setPlaceholderText(QStringLiteral("QQ号码/手机/邮箱"));
    pPasswordLineEdit->setPlaceholderText(QStringLiteral("密码"));
    pPasswordLineEdit->setEchoMode(QLineEdit::Password);
    pRememberCheckBox->setText(QStringLiteral("记住密码"));
    pAutoLoginCheckBox->setText(QStringLiteral("自动登录"));
    pLoginButton->setText(QStringLiteral("登录"));
    pRegisterButton->setText(QStringLiteral("注册账号"));
    pForgotButton->setText(QStringLiteral("找回密码"));

    // 创建栅格布局
    QGridLayout *pLayout = new QGridLayout(pWidget);
    // 头像框 第0行，第0列开始，占3行1列
    pLayout->addWidget(pImageLabel, 0, 0, 3, 1);
    // 用户名输入框 第0行，第1列开始，占1行2列
    pLayout->addWidget(pUserLineEdit, 0, 1, 1, 2);
    pLayout->addWidget(pRegisterButton, 0, 4);
    // 密码输入框 第1行，第1列开始，占1行2列
    pLayout->addWidget(pPasswordLineEdit, 1, 1, 1, 2);
    pLayout->addWidget(pForgotButton, 1, 4);
    // 记住密码 第2行，第1列开始，占1行1列 水平居左 垂直居中
    pLayout->addWidget(pRememberCheckBox, 2, 1, 1, 1, Qt::AlignLeft | Qt::AlignVCenter);
    // 自动登录 第2行，第2列开始，占1行1列 水平居右 垂直居中
    pLayout->addWidget(pAutoLoginCheckBox, 2, 2, 1, 1, Qt::AlignRight | Qt::AlignVCenter);
    // 登录按钮 第3行，第1列开始，占1行2列
    pLayout->addWidget(pLoginButton, 3, 1, 1, 2);
    // 设置水平间距
    pLayout->setHorizontalSpacing(10);
    // 设置垂直间距
    pLayout->setVerticalSpacing(10);
    // 设置外间距
    pLayout->setContentsMargins(10, 10, 10, 10);

    // 显示widget
    pWidget->show();

    return a.exec();
}

常用接口

void addWidget(QWidget *, int row, int column, int rowSpan, int columnSpan, Qt::Alignment = 0)

一般情况下我们都是把某个窗口部件放进栅格布局的一个单元中，但窗口部件有时也可能会需要占用多个单元，这时就需要用到 addWidget() 方法的这个重载版本。

这个单元将从 row 和 column 开始，扩展到 rowSpan 和 columnSpan 指定的倍数的行和列。如果 rowSpan 或 columnSpan 的值为 -1，则窗口部件将扩展到布局的底部或者右边边缘处。

setRowStretch(int row, int stretch)
setColumnStretch(int column, int stretch)

设置行/列的伸缩空间，和 QBoxLayout 的 addStretch 功能类似。

setSpacing(int spacing)
setHorizontalSpacing(int spacing)
setVerticalSpacing(int spacing)

setSpacing() 可以同时设置水平、垂直间距，设置之后，水平、垂直间距相同。setHorizontalSpacing()、setVerticalSpacing() 可以分别设置水平间距、垂直间距。

setRowMinimumHeight(int row, int minSize)
setColumnMinimumWidth(int column, int minSize)

设置行最小高度和列最小宽度。

columnCount()

rowCount()

获取列数和行数。

总结

当界面元素较为复杂时，应毫不犹豫的尽量使用栅格布局，而不是使用水平和垂直布局的组合或者嵌套的形式，因为在多数情况下，后者往往会使 “局势” 更加复杂而难以控制。栅格布局赋予了界面设计器更大的自由度来排列组合界面元素，而仅仅带来了微小的复杂度开销。

当要设计的界面是一种类似于两列和若干行组成的形式时，使用表单布局要比栅格布局更为方便些。

参考：

Qt 之格栅布局（QGridLayout）