3.1 标准布局管理器（一）

今天我们开始第三章布局管理的学习

在前面的例子中，当我们改变窗口的大小时，发现窗口上的控件并不会根据窗口的大小变化而改变自己的大小及位置，而我们在界面设计中会经常希望，当父窗口改变大小时，其子窗口也会跟着变化，为此Qt引入了布局管理器来实现这样的功能。

Qt为我们引入了很多标准布局管理器，例如QHBoxLayout，QVBoxLayout，QGridLayout，QFormLayout等等，一般情况下，这些管理器已经够用了，如果还需要实现特殊的管理器，你还可以继承QLayout自定义管理器。

本节我们先来看看Qt的标准布局管理器

3.1.1水平、垂直、网格布局管理器

水平和垂直管理器的区别只有方向，其它都一样，所以这里就只拿水平管理器来举例说明了。

H代表horizontal表示水平的，V代表vertical表示垂直的，所以水平管理器是QHBoxLayout，垂直管理器是QVBoxLayout。

它们都继承于QBoxLayout，QBoxLayout继承于QLayout，QLayout继承于QObject和QLayoutItem。

网格管理器从名字上也很好理解，下面我们直接上代码

3.1.2 示例

新建一个GUI项目StdLayoutWidget，类名为StdLayoutWidget，基类选择QWidget

stdlayoutwidget.h

#ifndef STDLAYOUTWIDGET_H
#define STDLAYOUTWIDGET_H

#include <QWidget>

namespace Ui {
class StdLayoutWidget;
}

class QTabWidget;
class StdLayoutWidget : public QWidget
{
    Q_OBJECT

public:
    explicit StdLayoutWidget(QWidget *parent = 0);
    ~StdLayoutWidget();

private:
    void initHBoxLayout();
    void initGridLayout();

private:
    Ui::StdLayoutWidget *ui;
    QTabWidget* tabWidget;
};

#endif // STDLAYOUTWIDGET_H

stdlayoutwidget.cpp

#include <QLabel>
#include <QPushButton>
#include <QHBoxLayout>
#include <QTabWidget>
#include "stdlayoutwidget.h"
#include "ui_stdlayoutwidget.h"

StdLayoutWidget::StdLayoutWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::StdLayoutWidget)
{
    ui->setupUi(this);

    //这里传入this，表示hLayout设置在主窗口上，如果这里不传this，则需要调用setLayout()接口
    QHBoxLayout* hLayout = new QHBoxLayout(this);
    tabWidget = new QTabWidget;
    hLayout->addWidget(tabWidget);

    initHBoxLayout();
    initGridLayout();
}

StdLayoutWidget::~StdLayoutWidget()
{
    delete ui;
}

void StdLayoutWidget::initHBoxLayout()
{
    QWidget* hWidget = new QWidget;
    QHBoxLayout *layout = new QHBoxLayout;
    hWidget->setLayout(layout);

    QStringList textList;
    textList << tr("一") << tr("二") << tr("三") << tr("四") << tr("五");
    for (int i = 0; i < textList.size(); ++i)
    {
        QString txt = textList.at(i);
        QPushButton *button = new QPushButton(txt);
        layout->addWidget(button);//将按钮加入到布局管理器中
        layout->addSpacing(i*10);//设置按钮之间的间距
    }

    //设置边距为20像素
    layout->setMargin(20);

    QPushButton *firstButton = hWidget->findChild<QPushButton *>();
    //将按钮“一”放到第三个位置上
    layout->insertWidget(3, firstButton);

    //将按钮“一”设置在上方
    layout->setAlignment(firstButton, Qt::AlignTop);

    //添加tab页
    tabWidget->addTab(hWidget, "QHBoxLayout");
}

void StdLayoutWidget::initGridLayout()
{
    QWidget* gridWidget = new QWidget;
    QGridLayout *layout = new QGridLayout;
    gridWidget->setLayout(layout);

    QLabel *label1 = new QLabel("一");
    QLabel *label2 = new QLabel("二");
    QLabel *label3 = new QLabel("三");
    QLabel *label4 = new QLabel("四");
    QLabel *label5 = new QLabel("五");

    layout->addWidget(label1, 0/*0行*/, 0/*0列*/, 2/*占2行*/, 3/*占3列*/);
    layout->addWidget(label2, 2, 0, 1, 1);
    layout->addWidget(label3, 2, 1, 1, 1);
    layout->addWidget(label4, 2, 2, 1, 1);
    layout->addWidget(label5, 3, 1, 1, 2);

    //为所有标签设置背景颜色
    QList<QLabel *> allLabels = gridWidget->findChildren<QLabel *>();
    foreach (QLabel* label, allLabels)
    {
        QColor clr(qrand()%255, qrand()%255, qrand()%255);
        //为标签设置背景，关于样式表以后会讲到
        label->setStyleSheet(QString("QLabel{background-color:%1}").arg(clr.name()));
    }

    tabWidget->addTab(gridWidget, "QGridBoxLayout");
}

3.1.3 在ui中使用布局管理器

如果我们在代码中直接使用布局管理器，当面对复杂的窗口时就会很混乱，但我们可以使用ui设计器来编辑我们的布局。

下图是ui界面中的布局管理按钮

image.png

从左至右，依次为“水平布局”，“垂直布局”，“水平分裂器”，“垂直分裂器”，“表格布局”，“网格布局”，“清除布局”。

选中所有要加入到布局的控件，然后点击以上按钮，即可加入布局。

布局管理器还可以从左侧的控件列表中选择，并拖入到编辑窗口中。

在编辑窗口中还可以右键选择布局。

关于分裂器，表格布局我们后面再讲，今天的分享就到这里了，我们下次见。

想要更多干货，请关注微信公众号：小豆君，关注后，还可加入C++\Qt交流群，与小伙伴们一起学习。