qt 布局gridlayout_Qt零基础系列06：如何进行界面布局管理

内容提要：

介绍Qt页面布局中，QBoxLayout，QGridLayout，QFormLayout，QStackedLayout等4种常用的布局管理器，以及一些布局中常用的操作

主要内容：

---

详细内容：

1.Qt页面管理器

在开发Qt应用程序时，为了程序上组件布局的美观，所以要给每个组件设定一个合适的大小和位置。用户在使用我们开发的程序的时候，会自己调整页面的大小，因此还需要再用户调整界面大小的时候，组件能够根据程序页面的调整，做出组件尺寸和组件内容大小的自适应调整，从而保证程序页面不会产生变形。

Qt提供了4种用于页面布局的类：QBoxLayout，QGridLayout，QFormLayout，QStackedLayout。

---

1.1 QBoxLayout

QBoxLayout类有两个子类，水平布局管理器 QHBoxLayout 和 垂直布局管理器 QVBoxLayout。下面演示一下如何使用这两个类进行页面布局。

step1 创建一个新项目，项目名称myQBoxLayout，基类为Qwidget

step2 在 widget.h 文件中，添加如下代码

#include <QPushButton>      // 用于创建按钮的类
#include <QHBoxLayout>      // 用于水平布局的类

声明按钮，用于演示水平布局

private:
    QPushButton *button1;       // 声明按钮1
    QPushButton *button2;       // 声明按钮2
    QPushButton *button3;       // 声明按钮3
    QPushButton *button4;       // 声明按钮4
    QPushButton *button5;       // 声明按钮5

step3 在 widget.cpp 文件中，添加如下代码

    // 创建按钮1
    button1 = new QPushButton("One");
    // 创建按钮2
    button2 = new QPushButton("Two");
    // 创建按钮3
    button3 = new QPushButton("Three");
    // 创建按钮4
    button4 = new QPushButton("Four");
    // 创建按钮5
    button5 = new QPushButton("Five");

    // 创建水平页面布局管理对象
    QHBoxLayout *hlayout = new QHBoxLayout;
    // 向水平布局增加 按钮1
    hlayout->addWidget(button1);
    // 向水平布局增加 按钮2
    hlayout->addWidget(button2);
    // 向水平布局增加 按钮3
    hlayout->addWidget(button3);
    // 向水平布局增加 按钮4
    hlayout->addWidget(button4);
    // 向水平布局增加 按钮5
    hlayout->addWidget(button5);
    // 设置水平页面布局是窗口布局
    this->setLayout(hlayout);

step4 Ctrl+r 运行程序，观察页面布局，试着拉大或者缩小窗口，观察按钮的变化

可以看出使用QHBoxLayout布局后，调整窗口大小是，按钮的尺寸也会自动调整，但是有个问题，这个界面太大了，不需要这么大，那有什么办法可以让这个界面自动调整到合适的尺寸呢？答案是有的，我们可以添加如下代码，然后再运行程序看看效果。

    // 设置窗口为固定尺寸，sizeHint()函数的作用是保持窗口为理想大小的尺寸
    this->setFixedSize(sizeHint()); // 设置后页面大小不可调整，一直处于系统推荐大小的状态

step5 在 widget.h 文件中，添加如下代码

#include <QVBoxLayout>      // 用于垂直布局的类

声明按钮，用于演示垂直布局

private:
    QPushButton *button6;       // 声明按钮6
    QPushButton *button7;       // 声明按钮7
    QPushButton *button8;       // 声明按钮8
    QPushButton *button9;       // 声明按钮9
    QPushButton *button10;      // 声明按钮10

step6 在 widget.cpp 文件中，添加如下代码

    // 创建按钮6
    button6 = new QPushButton("Six");
    // 创建按钮7
    button7 = new QPushButton("Seven");
    // 创建按钮8
    button8 = new QPushButton("Eight");
    // 创建按钮9
    button9 = new QPushButton("Nine");
    // 创建按钮10
    button10 = new QPushButton("Ten");

    // [2]创建垂直页面布局管理对象
    QVBoxLayout *vlayout = new QVBoxLayout;
    // 向水平布局增加 按钮6
    vlayout->addWidget(button6);
    // 向水平布局增加 按钮7
    vlayout->addWidget(button7);
    // 向水平布局增加 按钮8
    vlayout->addWidget(button8);
    // 向水平布局增加 按钮9
    vlayout->addWidget(button9);
    // 向水平布局增加 按钮10
    vlayout->addWidget(button10);

    // [3]创建垂直页面布局管理对象
    QVBoxLayout *layout = new QVBoxLayout;
    layout->addLayout(hlayout);
    layout->addLayout(vlayout);

程序里面创建了3个页面布局管理对象，他们之间的关系可以用下图来表示，页面布局中，经常会用到类似这种嵌套布局的情况，所以要多多练习

step7 Ctrl+r 运行程序，观察页面布局

除此之外还有三个函数比较常用，QBoxLayout::setSpacing(int spacing)设置组件之间的间隔，QBoxLayout::addStretch(int stretch = 0)设置一个占位空间，void QLayout::setContentsMargins(int left, int top, int right, int bottom)设置布局管理器到边界的距离。

使用演示：设置组件间隔，在 widget.cpp 增加如下代码，然后运行程序，观察按钮1~5之间的间隔是否发生变化

    // 演示水平布局之间增加间隔
    hlayout->setSpacing(20);

使用演示：增加一个组件占位，在 widget.cpp 增加如下代码，然后运行程序，观察按钮6~10之间的变化

    // 演示在按钮之间增加一个占位
    vlayout->addStretch();

并注释代码，否则观察不到占位效果

//    this->setFixedSize(sizeHint()); // 设置后页面大小不可调整，一直处于系统推荐大小的状态