Qt 布局之二：水平、垂直布局的使用详解

前言

水平布局、垂直布局除了构造时的方向（LeftToRight、TopToBottom）不同外，其它均相同。下面我们以 QHBoxLayout 为例，来讲解 QBoxLayout 的基本使用。

源码

下面，我们创建 5 个按钮，然后添加至水平不居中。

QWidget *window = new QWidget;
window->setWindowTitle(QObject::tr("Qt之水平布局"));

QPushButton *pButton1 = new QPushButton("One");
QPushButton *pButton2 = new QPushButton("Two");
QPushButton *pButton3 = new QPushButton("Three");
QPushButton *pButton4 = new QPushButton("Four");
QPushButton *pButton5 = new QPushButton("Five");

QHBoxLayout *pHLayout = new QHBoxLayout();
pHLayout->addWidget(pButton1);
pHLayout->addWidget(pButton2);
pHLayout->addWidget(pButton3);
pHLayout->addWidget(pButton4);
pHLayout->addWidget(pButton5);

window->setLayout(pHLayout);
window->show();

从下图可以看到，除标题栏以外的区域都在 pHLayout 布局内，即上图包括 5 个按钮的灰色区域：

设置外边距

Qt 控件的外边距默认为 0，为了美观性我们可以设置下 Margin。相关函数如下：

setMargin(int)
setContentsMargins(int left, int top, int right, int bottom);
setContentsMargins(const QMargins &margins)

setMargin 可以同时设置左、上、右、下的外边距。setContentsMargins 与其功能相同，但是可以将左、上、右、下的外边距设置为不同的值。

这里我使用 setMargin(30) 将外边距设置为 30px。从下图可以看到红框以内就是水平布局，红框以外的区域就是新设置的外边距：

设置间距

一般情况下，系统会自动设置间距，为了保持所有布局的统一性，或者你需要一个更合适的间距值，则需要手动设置。我们使用 setSpacing(int) 来设置间距。

这里我使用 setSpacing(30) 将间距设置为 30。效果如下：

注意：setSpacing(0) 可以完全消除 QLbael 之间的间距，但不能完全消除 QPushButton之间的间距。

使用伸缩

addStretch 函数的作用是在布局器中增加一个伸缩量（QSpacerItem），里面的参数表示 QSpacerItem 的个数，默认值为零。如果伸缩量为 0，会将你放在 layout 中的空间压缩成默认的大小。其函数原型如下：

void QBoxLayout::addStretch(int stretch = 0)

居右

在第一个控件之前添加伸缩，这样所有的控件就会居右显示。

QHBoxLayout *pHLayout = new QHBoxLayout();
pHLayout->addStretch(); // 添加伸缩
pHLayout->addWidget(pButton1);
pHLayout->addWidget(pButton2);
pHLayout->addWidget(pButton3);
pHLayout->addWidget(pButton4);
pHLayout->addWidget(pButton5);

要先把窗口拉长一些，或者更改窗口宽度，否则看不出效果，下面都一样。效果如下：

居中

在第一个控件之前、最后一个控件之后添加伸缩，这样所有的控件就会居中显示。

QHBoxLayout *pHLayout = new QHBoxLayout();
pHLayout->addStretch(); // 第一个控件之前添加伸缩
pHLayout->addWidget(pButton1);
pHLayout->addWidget(pButton2);
pHLayout->addWidget(pButton3);
pHLayout->addWidget(pButton4);
pHLayout->addWidget(pButton5);
pHLayout->addStretch(); // 最后一个控件之后添加伸缩
pHLayout->setSpacing(10);

效果如下：

均分

在每一个控件之间都添加伸缩，这样所有的控件之间的间距都会相同。

QHBoxLayout *pHLayout = new QHBoxLayout();
pHLayout->addStretch();
pHLayout->addWidget(pButton1);
pHLayout->addStretch();
pHLayout->addWidget(pButton2);
pHLayout->addStretch();
pHLayout->addWidget(pButton3);
pHLayout->addStretch();
pHLayout->addWidget(pButton4);
pHLayout->addStretch();
pHLayout->addWidget(pButton5);
pHLayout->addStretch();
pHLayout->setSpacing(0);

效果如下：

分比例设置间距

下面例子中四个 addStretch() 函数用于在 button 按钮间增加伸缩量，伸缩量的比例为 0:1:2:3:4:0，意思就是将 button 以外的空白地方按设定的比例等分为 10 份并按照设定的顺序放入布局器中，相当于设置了不同比例的间距。

QHBoxLayout *pHLayout = new QHBoxLayout();
pHLayout->addWidget(pButton1);
pHLayout->addStretch(1);
pHLayout->addWidget(pButton2);
pHLayout->addStretch(2);
pHLayout->addWidget(pButton3);
pHLayout->addStretch(3);
pHLayout->addWidget(pButton4);
pHLayout->addStretch(4);
pHLayout->addWidget(pButton5);

效果如下：

设置拉伸系数

当窗体大小变化时，控件会根据拉伸系数来做相应的调整，所以我们可以使用 setStretchFactor 函数来设置拉伸系数以自适应窗口大小。其函数原型如下：

bool setStretchFactor(QWidget *widget, int stretch);

例如设置 pButton1 的拉伸系数为 1，pButton2 拉伸系数为 2，当窗体变大时，会优先将 pButton2 进行拉伸，当达到一定程度时，再拉伸 pButton1，pButton1 与 pButton2 的宽度比例为 1:2。

setStretchFactor(pButton1, 1);
setStretchFactor(pButton2, 2);

设置对齐方式

添加控件的 addWidget 函数原型如下：

addWidget(QWidget *, int stretch = 0, Qt::Alignment alignment = 0);

可以看到该函数同时可以设置伸缩和对齐方式。默认的，我们添加控件至水平布局中，默认都是垂直方向居中对齐的。例如：

其中有控件大小不相同的时候就会看得很明显了，如果我们需要将其中的某些控件居上、居下显示，那么可以使用对齐方式 Qt::Alignment。

下面，我们使用向上、向下对齐来设置其它控件。

QHBoxLayout *pHLayout = new QHBoxLayout();
// 水平居左 垂直居上
pHLayout->addWidget(pButton1, 0 , Qt::AlignLeft | Qt::AlignTop);
pHLayout->addWidget(pButton2, 0 , Qt::AlignLeft | Qt::AlignTop);
pHLayout->addWidget(pButton3);
// 水平居左 垂直居下
pHLayout->addWidget(pButton4, 0 , Qt::AlignLeft | Qt::AlignBottom);
pHLayout->addWidget(pButton5, 0 , Qt::AlignLeft | Qt::AlignBottom);

效果如下：

总结

上面介绍了基本所有常用的接口使用，掌握了这些接口，其它布局 QVBoxLayout、QGridLayout 功能也相同或类似，一通百通。

参考：

Qt 之水平/垂直布局（QBoxLayout、QHBoxLayout、QVBoxLayout）