Qt控件----布局管理

布局管理

Qt 提供了非常丰富的布局类，基本布局管理类包括：QBoxLayout、QGridLayout、QFormLayout 和 QStackedLayout。这些类都从 QLayout 继承而来，它们都来源于 QObject（而不是 QWidget）。创建更加复杂的布局，可以让它们彼此嵌套完成。其中 QBoxLayout 提供了水平和垂直的布局管理；QFormLayout 提供了将输入部件和标签
成组排列的布局管理；QGridLayout 提供了网格形式的布局管理；QStackedLayout 提供了一组布局后的部件，可以对它们进行分布显示。它们的继承关系如下图。

下面将学习 Layouts 组里面的 4 种布局，如下图。

各个控件的名称依次解释如下。

（1） Vertiacl Layout:垂直布局
（2） Horizontal Layout:水平布局
（3） Grid Layout:网格布局
（4） Form Layout:表单布局

QBoxLayout 继承 QLayout。QBoxLayout 类提供水平或垂直地排列子部件。QBoxLayout 获取从它的父布局或从 parentWidget()中所获得的空间，将其分成一列框，并使每个托管小部件填充一个框。
QGridLayout继承QLayout。QGridLayout获取可用的空间(通过其父布局或parentWidget()))，将其分为行和列，并将其管理的每个小部件放入正确的单元格中。由于网格布局管理器中的组件也是会随着窗口拉伸而发生变化的，所以也是需要设置组件之间的比例系数的，与 QBoxLayout 不同的是网格布局管理器还需要分别设置行和列的比例系数。
QFormLayout 继承 QLayout。QFormLayout 类管理输入小部件及其关联标签的表单。QFormLayout 是一个方便的布局类，它以两列的形式布局其子类。左列由标签组成，右列由“字段”小部件(QLineEdit(行编辑器)、QSpinBox(旋转框等))组成。通常使setRowWrapPolicy(RowWrapPolicy policy)接口函数设置布局的换行策略进行布局等。

一、QBoxLayout

1. 控件简介

QBoxLayout 继承 QLayout。QBoxLayout 类提供水平或垂直地排列子部件。QBoxLayout 获取从它的父布局或从 parentWidget()中所获得的空间，将其分成一列框，并使每个托管小部件填充一个框。

2. 用法示例

例 29_qboxlayout，垂直或水平布局（难度：简单），使用几个按钮，将他们设置为垂直排布和水平排布，以及设置它们的一些属性。

在新建例程中不要勾选“Generate form”，默认继承 QMainWindow 类即可。项目新建完成如下图。

在头文件“mainwindow.h”具体代码如下。

1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QHBoxLayout>
6 #include <QVBoxLayout>
7 #include <QPushButton>
8
9 class MainWindow : public QMainWindow
10 {
11 Q_OBJECT
12
13 public:
14 MainWindow(QWidget *parent = nullptr);
15 ~MainWindow();
16
17 private:
18 /* 声明按钮对象数组 */
19 QPushButton *pushButton[6];
20
21 /* 定义两个 widget，用于容纳排布按钮 */
22 QWidget *hWidget;
23 QWidget *vWidget;
24
25 /* QHBoxLayout 与 QVBoxLayout 对象 */
26 QHBoxLayout *hLayout;
27 QVBoxLayout *vLayout;
28
29 };
30 #endif // MAINWINDOW_H

在源文件“mainwindow.cpp”具体代码如下。

1 #include "mainwindow.h"
2 #include <QList>
3
4 MainWindow::MainWindow(QWidget *parent)
5 : QMainWindow(parent)
6 {
7 /* 设置主窗口的位置与大小 */
8 this->setGeometry(0, 0, 800, 480);
9
10 /* 实例化与设置位置大小 */
11 hWidget = new QWidget(this);
12 hWidget->setGeometry(0, 0, 800, 240);
13
14 vWidget = new QWidget(this);
15 vWidget->setGeometry(0, 240, 800, 240);
16
17 hLayout = new QHBoxLayout();
18 vLayout = new QVBoxLayout();
19
20 /* QList<T>是 Qt 的一种泛型容器类。
21 * 它以链表方式存储一组值，
22 * 并能对这组数据进行快速索引
23 */
24 QList <QString>list;
25 /* 将字符串值插入 list */
26 list<<"one"<<"two"<<"three"<<"four"<<"five"<<"six";
27
28 /* 用一个循环实例化 6 个按钮 */
29 for(int i = 0; i < 6; i++){
30 pushButton[i] = new QPushButton();
31 pushButton[i]->setText(list[i]);
32 if(i < 3) {
33 /* 将按钮添加至 hLayout 中 */
34 hLayout->addWidget(pushButton[i]);
35 } else {
36 /* 将按钮添加至 vLayout 中 */
37 vLayout->addWidget(pushButton[i]);
38 }
39 }
40 /* 设置间隔为 50 */
41 hLayout->setSpacing(50);
42
43 /* hWidget 与 vWidget 的布局设置为 hLayout/vLayout */
44 hWidget->setLayout(hLayout);
45 vWidget->setLayout(vLayout);
46 }
47
48 MainWindow::~MainWindow()
49 {
50 }

在源文件“main.cpp”具体代码由新建项目时生成，无改动。

3. 运行效果

程序编译运行的结果如下。可以看到在 hWidget 中添加了 3 个水平排布的按钮，在 vWidget中添加了 3 个垂直排布的按钮。

二、QGridLayout

1. 控件简介

QGridLayout 类提供了布局管理器里的一种以网格（二维）的方式管理界面组件，以按钮组件为例，它们所对应网格的坐标下表，与二维数组类似。

QGridLayout继承QLayout。QGridLayout获取可用的空间(通过其父布局或parentWidget()))，将其分为行和列，并将其管理的每个小部件放入正确的单元格中。由于网格布局管理器中的组件也是会随着窗口拉伸而发生变化的，所以也是需要设置组件之间的比例系数的，与
QBoxLayout 不同的是网格布局管理器还需要分别设置行和列的比例系数。

2. 用法示例

例 30_qgridlayout，网格布局（难度：简单），使用几个按钮，将他们设置为网格布局，同时设置它们的行、列比例系数（拉伸因子），以及设置它们的一些属性。

在新建例程中不要勾选“Generate form”，默认继承 QMainWindow 类即可。项目新建完成如下图。

在头文件“mainwindow.h”具体代码如下。

1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QGridLayout>
6 #include <QPushButton>
7
8 class MainWindow : public QMainWindow
9 {
10 Q_OBJECT
11
12 public:
13 MainWindow(QWidget *parent = nullptr);
14 ~MainWindow();
15 private:
16
17 /* 声明 widget 窗口部件，用于容纳下面 4 个 pushButton 按钮 */
18 QWidget *gWidget;
19
20 /* 声明 QGridLayout 对象 */
21 QGridLayout *gridLayout;
22
23 /* 声明 pushButton 按钮数组 */
24 QPushButton *pushButton[4];
25
26 };
27 #endif // MAINWINDOW_H

在源文件“mainwindow.cpp”具体代码如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 设置位置与大小 */
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 实例化 */
10 gWidget = new QWidget(this);
11 /* 设置 gWidget 居中央 */
12 this->setCentralWidget(gWidget);
13
14 gridLayout = new QGridLayout();
15 /* QList 链表，字符串类型 */
16 QList <QString> list;
17 list<<"按钮 1"<<"按钮 2"<<"按钮 3"<<"按钮 4";
18 for (int i = 0; i < 4; i++){
19 pushButton[i] = new QPushButton();
20 pushButton[i]->setText(list[i]);
21 /* 设置最小宽度与高度 */
22 pushButton[i]->setMinimumSize(100, 30);
23 /* 自动调整按钮的大小 */
24 pushButton[i]->setSizePolicy(
25 QSizePolicy::Expanding,
26 QSizePolicy::Expanding
27 );
28 switch (i) {
29 case 0:
30 /* 将 pushButton[0]添加至网格的坐标(0,0),下同 */
31 gridLayout->addWidget(pushButton[i], 0, 0);
32 break;
33 case 1:
34 gridLayout->addWidget(pushButton[i], 0, 1);
35 break;
36 case 2:
37 gridLayout->addWidget(pushButton[i], 1, 0);
38 break;
39 case 3:
40 gridLayout->addWidget(pushButton[i], 1, 1);
41 break;
42 default:
43 break;
44 }
45 }
46 /* 设置第 0 行与第 1 行的行比例系数 */
47 gridLayout->setRowStretch(0, 2);
48 gridLayout->setRowStretch(1, 3);
49
50 /* 设置第 0 列与第 1 列的列比例系数 */
51 gridLayout->setColumnStretch(0, 1);
52 gridLayout->setColumnStretch(1, 3);
53
54 /* 将 gridLayout 设置到 gWidget */
55 gWidget->setLayout(gridLayout);
56 }
57
58 MainWindow::~MainWindow()
59 {
60 }

在源文件“main.cpp”具体代码由新建项目时生成，无改动。

3. 运行效果

程序编译运行的结果如下。可以看到在 gWidget 中添加了 4 个按钮，因为设置了行、列的系数比（拉伸因子），所以看到的按钮是按系数比的比例显示。

三、QFormLayout

1. 控件简介

QFormLayout 继承 QLayout。QFormLayout 类管理输入小部件及其关联标签的表单。QFormLayout 是一个方便的布局类，它以两列的形式布局其子类。左列由标签组成，右列由“字段”小部件(QLineEdit(行编辑器)、QSpinBox(旋转框等))组成。通常使用setRowWrapPolicy(RowWrapPolicy policy)接口函数设置布局的换行策略进行布局等。

2. 用法示例

例 31_qformlayout，表单布局（难度：简单），将使用addRow(const QString &labelText,QWidget *field)来创建一个带有给定文本的 QLabel 及 QWidget 小部件，并且它们是伙伴关系。简单的展示表单布局的使用。

在新建例程中不要勾选“Generate form”，默认继承 QMainWindow 类即可。项目新建完成如下图。

在头文件“mainwindow.h”具体代码如下。

1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QFormLayout>
6 #include <QLineEdit>
7
8 class MainWindow : public QMainWindow
9 {
10 Q_OBJECT
11
12 public:
13 MainWindow(QWidget *parent = nullptr);
14 ~MainWindow();
15 private:
16 /* widget 对象 */
17 QWidget *fWidget;
18
19 /* 用于输入用户名 */
20 QLineEdit *userLineEdit;
21
22 /* 用于输入密码 */
23 QLineEdit *passwordLineEdit;
24
25 /* 声明 QFormLayout 对象 */
26 QFormLayout *formLayout;
27 };
28 #endif // MAINWINDOW_H

在源文件“mainwindow.cpp”具体代码如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 设置位置与大小 */
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 实例化及设置位置与大小，下同 */
10 fWidget = new QWidget(this);
11 fWidget->setGeometry(250, 100, 300, 200);
12
13 userLineEdit = new QLineEdit();
14 passwordLineEdit = new QLineEdit();
15
16 formLayout = new QFormLayout();
17
18 /* 添加行 */
19 formLayout->addRow("用户名：", userLineEdit);
20 formLayout->addRow("密码 ：", passwordLineEdit);
21
22 /* 设置水平垂直间距 */
23 formLayout->setSpacing(10);
24
25 /* 设置布局外框的宽度 */
26 formLayout->setMargin(20);
27
28 /* 将 formLayout 布局到 fWidget */
29 fWidget->setLayout(formLayout);
30 }
31
32 MainWindow::~MainWindow()
33 {
34 }

在源文件“main.cpp”具体代码由新建项目时生成，无改动。

3. 运行效果

程序编译运行的结果如下。可以看到在 fWidget 中添加了两行，同时设置了它们的间隔，与距边框的宽度。与 QGirdLayout 布局比较，QFomLayout 布局比较适用于行与列比较少的布局格局。如果是多行多列的布局，应该使用 QGirdLayout 布局。