《I.MX6U 嵌入式Qt开发指南》第七章 Qt控件 7.5 布局管理

正点原子运营 · 发表于 2022-7-29 09:52:52

本帖最后由正点原子运营于 2022-7-29 09:51 编辑

1）实验平台：正点原子阿尔法Linux开发板
2) 章节摘自【正点原子】《I.MX6U 嵌入式Qt开发指南》
3）购买链接:https://detail.tmall.com/item.htm?id=609033604451
4）全套实验源码+手册+视频下载地址：http://www.openedv.com/docs/boards/arm-linux/zdyz-i.mx6ull.html
5）正点原子官方B站：https://space.bilibili.com/394620890
6）正点原子阿尔法Linux交流群：1027879335

第七章 Qt控件

7.5 布局管理

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)接口函数设置布局的换行策略进行布局等。

7.5.1 QBoxLayout7.5.1.1 控件简介

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

7.5.1.2 用法示例

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

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

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

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”具体代码如下。

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”具体代码如下。由新建项目时生成，无改动。

main.cpp编程后的代码
1 #include "mainwindow.h"
2
3 #include <QApplication>
4
5 int main(int argc, char *argv[])
6 {
7 QApplication a(argc, argv);
8 MainWindow w;
9 w.show();
10 return a.exec();
11 }

复制代码

7.5.1.3 运行效果

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

7.5.2 QGridLayout
7.5.2.1 控件简介

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

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

7.5.2.2 用法示例

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

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

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

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”具体代码如下。

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”具体代码如下。由新建项目时生成，无改动。

main.cpp编程后的代码
1 #include "mainwindow.h"
2
3 #include <QApplication>
4
5 int main(int argc, char *argv[])
6 {
7 QApplication a(argc, argv);
8 MainWindow w;
9 w.show();
10 return a.exec();
11 }

复制代码

7.5.2.3 运行效果

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

7.5.3 QFormLayout
7.5.3.1 控件简介

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

7.5.3.2 用法示例

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

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

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