《I.MX6U 嵌入式Qt开发指南》第七章 Qt控件 7.7 容器

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

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.7 容器

容器（Containers）

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

（1） Group Box:组框

（2） Scroll Area:滚动区域

（3） Tool Box:工具箱

（4） Tab Widget:标签小部件

（5） Stacked WIdget:堆叠小部件

（6） Frame:帧

（7） Widget:小部件

（8） MDI Area:MDI区域

（9） Dock Widget:停靠窗体部件

各种容器的解释如下：

QGroupBox继承QWidget。QGroupBox为构建分组框提供了支持。分组框通常带有一个边框和一个标题栏，作为容器部件来使用，在其中可以布置各种窗口部件。布局时可用作一组控件的容器，但是需要注意的是，内部通常使用布局控件（如QBoxLayout）进行布局。组框还提供键盘快捷方式，键盘快捷方式将键盘焦点移动到组框的一个子部件。

QScrollArea继承QAbstractScrollArea。滚动区域用于在框架中显示子部件的内容。如果小部件超过框架的大小，视图就会出现滚动条，以便可以查看子小部件的整个区域。

QToolBox继承QFrame。QToolBox类提供了一列选项卡小部件项。工具箱是一个小部件，它显示一列选项卡在另一列的上面，当前项显示在当前选项卡的下面。每个选项卡在选项卡列中都有一个索引位置。选项卡的项是QWidget。

QTabWidget继承QWidget。abWidget类提供了一组选项卡（多页面）小部件。QTabWidget主要是用来分页显示的，每一页一个界面，众多界面公用一块区域，节省了界面大小，很方便的为用户显示更多的信息。

QStackedWidget继承QFrame。QStackedWidget类提供了一个小部件堆栈，其中一次只能看到一个小部件，与QQ的设置面板类似。QStackedWidget可用于创建类似于QTabWidget提供的用户界面。它是构建在QStackedLayout类之上的一个方便的布局小部件。常与QListWidget搭配使用，效果如下图，左边的是QListWidget列表，右边的是QStackedWidget。他们一般与信号槽连接，通过点击左边的QListWidget列表，使用信号槽连接后，就可以让右边的QStackedWidget显示不同的内容，每次显示一个widget小部件。

QWidget类是所有用户界面对象的基类（如QLabel类继承于QFrame类，而QFrame类又继承于QWidget类）。Widget是用户界面的基本单元：它从窗口系统接收鼠标，键盘和其他事件，并在屏幕上绘制自己。每个Widget都是矩形的，它们按照Z-order进行排序。注：Z-order是重叠二维对象的顺序，例如堆叠窗口管理器中的窗口。典型的GUI的特征之一是窗口可能重叠，使得一个窗口隐藏另一个窗口的一部分或全部。当两个窗口重叠时，它们的Z顺序确定哪个窗口出现在另一个窗口的顶部。理解：术语"z-order"指沿着z轴物体的顺序。三维坐标轴中x横轴，y数轴，z上下轴。可以将gui窗口视为平行与显示平面的一系列平面。因此，窗口沿着z轴堆叠。所以z-order指定了窗口的前后顺序。就像您桌面上的一叠纸一样，每张纸是一个窗口，桌面是您的屏幕，最上面的窗口z值最高。QWidget不是一个抽象类，它可以用作其他Widget的容器，并很容易作为子类来创建定制Widget。它经常用于创建、放置和容纳其他的Widget窗口。由上可知，QWidget一般用于容纳其他Widget窗口，其属性和方法相当的多，对于初学者，我们通常只用它来作可以容纳其他窗口的容器，还会用来接收鼠标，键盘和其他事件等。

QMdiArea继承QAbstractScrollArea。QMdiArea小部件提供一个显示MDI窗口的区域。

QMdiArea的功能本质上类似于MDI窗口的窗口管理器。大多数复杂的程序，都使用MDI框架，在Qt designer中可以直接将控件MDI Area拖入使用。

QDockWidget继承QWidget。QDockWidget类提供了一个小部件，可以停靠在QMainWindow内，也可以作为桌面的顶级窗口浮动。QDockWidget提供了停靠部件的概念，也称为工具面板或实用程序窗口。停靠窗口是放置在QMainWindow中央窗口附近的停靠窗口部件区域中的辅助窗口。停靠窗口可以被移动到当前区域内，移动到新的区域，并由终端用户浮动(例如，不停靠)。QDockWidget API允许程序员限制dock widget的移动、浮动和关闭能力，以及它们可以放置的区域。QDockWidget的初始停靠区域有Qt.BottomDockWidgetArea（底部停靠）、Qt.LeftDockWidgetArea（左边停靠、Qt.RightDockWidgetArea（右边停靠）、Qt.TopDockWidgetArea（顶部停靠）和Qt.NoDockWidgetArea（不显示Widget）。

在前面某些小节里已经有使用过本小节的控件，例如QWidget小部件。下面将上面列出的控件进行进一步的解释与运用。

7.7.1 QGroupBox

7.7.1.1 控件简介

QGroupBox小部件提供一个带有标题的组框框架。一般与一组或者是同类型的部件一起使用。

7.7.1.2 用法示例

例33_qgroupbox，组框示例（难度：简单），使用3个QRadioButton单选框按钮，与QVBoxLayout（垂直布局）来展示组框的基本使用。

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

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

mainwindow.h编程后的代码
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QRadioButton>
6 #include <QGroupBox>
7 #include <QVBoxLayout>
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 QGroupBox *groupBox;
20 QVBoxLayout *vBoxLayout;
21 QRadioButton *radioButton[3];
22 };
23 #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 /* 以标题为“QGroupBox示例”实例化groupBox对象 */
10 groupBox = new QGroupBox(tr("QGroupBox示例"), this);
11 groupBox->setGeometry(300, 100, 300, 200);
12
13 vBoxLayout = new QVBoxLayout();
14
15 /* 字符串链表 */
16 QList <QString>list;
17 list<<"选项一"<<"选项二"<<"选项三";
18 for(int i = 0; i < 3; i++){
19 radioButton[i] = new QRadioButton();
20 radioButton[i]->setText(list[i]);
21 /* 在vBoxLayout添加radioButton */
22 vBoxLayout->addWidget(radioButton[i]);
23 }
24 /* 添加一个伸缩量1 */
25 vBoxLayout->addStretch(1);
26 /* vBoxLayout布局设置为groupBox布局 */
27 groupBox->setLayout(vBoxLayout);
28 }
29
30 MainWindow::~MainWindow()
31 {
32 }

复制代码

在源文件“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.7.1.3 运行效果

程序编译运行的结果如下，可以看到radioButton有规则的排布在groupBox组框里面。

7.7.2 QScrollArea

7.7.2.1 控件简介

QScrollArea类提供到另一个小部件的滚动视图。

7.7.2.2 用法示例

例34_qscrollarea滚动视图（难度：简单），使用一个Label标签，将Label标签设置为一张图片，并把Label标签放置于滚动区域内，此时图片应要大于滚动区域才会出现滚动条。

在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成，并添加了一张资源图片（添加资源图片的步骤请参考7.1.4小节），如下图。

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

mainwindow.h编程后的代码
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QScrollArea>
6 #include <QLabel>
7
8 class MainWindow : public QMainWindow
9 {
10 Q_OBJECT
11
12 public:
13 MainWindow(QWidget *parent = nullptr);
14 ~MainWindow();
15
16 private:
17 /* 定义QScrollArea对象 */
18 QScrollArea *scrollArea;
19 QLabel *label;
20 };
21 #endif // MAINWINDOW_H

复制代码

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

mainwindow.cpp编程后的代码
1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 this->setGeometry(0, 0, 800, 480);
7
8 scrollArea = new QScrollArea(this);
9 /* 设置滚动区域为700*380 */
10 scrollArea->setGeometry(50, 50, 700, 380);
11
12 label = new QLabel();
13 /* label显示的lantingxu.png图片分辨率为1076*500 */
14 QImage image(":/images/lantingxu.png");
15 label->setPixmap(QPixmap::fromImage(image));
16
17 scrollArea->setWidget(label);
18
19 }
20
21 MainWindow::~MainWindow()
22 {
23 }

复制代码

在源文件“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.7.2.3 运行效果

程序编译运行的结果如下，由于图片的大小大于滚动区域的大小，所以在滚动区域出现了滚动条，可以拖动滚动条来查看这张图片其余部分。

7.7.3 QToolBox

7.7.3.1 控件简介

QToolBox（工具盒类）提供了一种列状的层叠窗体，中文译为工具箱，类似抽屉。

7.7.3.2 用法示例

例35_qtoolbox，QQ好友面板之QToolBox（难度：简单），本例将使用到前面的知识QGroupBox组框与QBoxLayout布局管理。前面我们已经学过QGroupBox组框和学过QBoxLayout。有了前面的基础，那么去理解本例就会快很多。

本例思路:使用6个QToolButton分成2组，使用垂直布局将QToolButton的2组排布好，然后添加到2组QGroupBox组框，再把2组QGroupBox组框作为子项添加到QToolBox。

在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成，并添加了几张资源图片（添加资源图片的步骤请参考7.1.4小节），如下图。

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

mainwindow.h编程后的代码
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QToolBox>
6 #include <QGroupBox>
7 #include <QToolButton>
8 #include <QVBoxLayout>
9
10 class MainWindow : public QMainWindow
11 {
12 Q_OBJECT
13
14 public:
15 MainWindow(QWidget *parent = nullptr);
16 ~MainWindow();
17
18 private:
19 /* 声明对象 */
20 QToolBox *toolBox;
21 QGroupBox *groupBox[2];
22 QVBoxLayout *vBoxLayout[2];
23 QToolButton *toolButton[6];
24
25 };
26 #endif // MAINWINDOW_H

复制代码

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

mainwindow.cpp编程后的代码
1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 this->setGeometry(0, 0, 800, 480);
7
8 toolBox = new QToolBox(this);
9 toolBox->setGeometry(300, 50, 200, 250);
10 /* 设置toolBox的样式，此处设置为30%不透明度的黑色 */
11 toolBox->setStyleSheet("QToolBox {background-color:rgba(0, 0, 0, 30%);}");
12
13 for(int i = 0; i < 2; i++){
14 vBoxLayout[i] = new QVBoxLayout();
15 groupBox[i] = new QGroupBox(this);
16 }
17
18 /* 字符串链表 */
19 QList <QString>strList;
20 strList<<"李白"<<"王照君"<<"李元芳"<<"程咬金"<<"钟馗"<<"上官婉儿";
21
22 /* 字符串图标链表 */
23 QList <QString>iconsList;
24 iconsList<<":/icons/libai"<<":/icons/wangzhaojun"
25 <<":/icons/liyuanfang"<<":/icons/chengyaojin"
26 <<":/icons/zhongkui"<<":/icons/shangguanwaner";
27
28 for(int i = 0; i < 6; i++){
29 toolButton[i] = new QToolButton();
30 /* 设置toolButton图标 */
31 toolButton[i]->setIcon(QIcon(iconsList[i]));
32 /* 设置toolButton的文本 */
33 toolButton[i]->setText(strList[i]);
34 /* 设置toolButton的大小 */
35 toolButton[i]->setFixedSize(150, 40);
36 /* 设置toolButton的setToolButtonStyle的样式 */
37 toolButton[i]->setToolButtonStyle(
38 Qt::ToolButtonTextBesideIcon
39 );
40 if( i < 3 ) {
41 /* 将toolButton添加到时垂直布局 */
42 vBoxLayout[0]->addWidget(toolButton[i]);
43 /* 添加一个伸缩量1 */
44 vBoxLayout[0]->addStretch(1);
45 } else {
46 vBoxLayout[1]->addWidget(toolButton[i]);
47 vBoxLayout[1]->addStretch(1);
48 }
49 }
50 /* 将垂直布局的内容添加到组框groupBox */
51 groupBox[0]->setLayout(vBoxLayout[0]);
52 groupBox[1]->setLayout(vBoxLayout[1]);
53
54 /* 将组框加入QToolBox里 */
55 toolBox->addItem(groupBox[0],"我的好友");
56 toolBox->addItem(groupBox[1],"黑名单");
57 }
58
59 MainWindow::~MainWindow()
60 {
61 }

复制代码

在源文件“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.7.3.3 运行效果

程序编译运行的结果如下，本次使用QToolButool作为QGroupBox的子项，也可以使用其他QWidget小部件，如QWidget等。（注意本程序在linux运行效果如下，若如在Windows下，可能QToolBox的显示样式不一样）。点击“我的好友”列表，则会出现好友列表，点击“黑名单”则会出现黑名单列表。

7.7.4 QTabWidget

7.7.4.1 控件简介

QTabWidget继承QWidget，QTabWidget类提供了一组选项卡（多页面）小部件。QTabWidget主要是用来分页显示的，每一页一个界面，众多界面公用一块区域，节省了界面大小，很方便的为用户显示更多的信息。类似浏览器的多标签页面，所以这个控件在实际项目中也会经常用到。

7.7.4.2 用法示例例36_qtabwidget，标题栏多页面切换（难度：简单），本例创建3个页面，每个页面里有一个Label标签部件，点击每个页面的选项卡则会切换到不同的页面上。

在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成，并添加了几张资源图片（添加资源图片的步骤请参考7.1.4小节），如下图。

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

mainwindow.h编程后的代码
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QTableWidget>
6 #include <QHBoxLayout>
7 #include <QLabel>
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 QWidget *widget;
20 QTabWidget *tabWidget;
21 QHBoxLayout *hBoxLayout;
22 QLabel *label[3];
23 };
24 #endif // MAINWINDOW_H

复制代码

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

mainwindow.cpp编程后的代码
1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 this->setGeometry(0, 0, 800, 480);
7
8 widget = new QWidget(this);
9 /* 居中 */
10 this->setCentralWidget(widget);
11
12 /* 多页面小部件 */
13 tabWidget = new QTabWidget();
14
15 /* 水平布局实例化 */
16 hBoxLayout = new QHBoxLayout();
17 QList <QString>strLabelList;
18 strLabelList<<"标签一"<<"标签二"<<"标签三";
19
20 QList <QString>strTabList;
21 strTabList<<"页面一"<<"页面二"<<"页面三";
22
23 QList <QString>iconList;
24 iconList<<":/icons/icon1"
25 <<":/icons/icon2"
26 <<":/icons/icon3";
27
28 for (int i = 0; i < 3; i++) {
29 label[i] = new QLabel();
30 /* 设置标签文本 */
31 label[i]->setText(strLabelList[i]);
32 /* 标签对齐方式（居中） */
33 label[i]->setAlignment(Qt::AlignCenter);
34 /* 添加页面 */
35 tabWidget->addTab(label[i],
36 QIcon(iconList[i]),
37 strTabList[i]
38 );
39 }
40 /* 是否添加关闭按钮 */
41 //tabWidget->setTabsClosable(true);
42 /* 将tabWidget水平直排布 */
43 hBoxLayout->addWidget(tabWidget);
44 /* 将垂直布局设置到widget */
45 widget->setLayout(hBoxLayout);
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.7.4.3 运行效果

程序编译运行的结果如下，点击不同页面的选项卡则会切换到不同的页面上。本例还可拓展使用void setTabsClosable(bool closeable)函数在选项卡后加一个关闭按钮，再连接信号槽实现关闭页面的操作。本例就不再添加代码了，比较简单。

7.7.5 QStackedWidget

7.7.5.1 控件简介

QStackedWidget继承QFrame。QStackedWidget类提供了一个小部件堆栈，其中一次只能看到一个小部件，与QQ的设置面板类似。

QStackedWidget可用于创建类似于QTabWidget提供的用户界面。它是构建在QStackedLayout类之上的一个方便的布局小部件。常与QListWidget搭配使用，效果如下图，左边的是QListWidget列表，右边的是QStackedWidget。他们一般与信号槽连接，通过点击左边的QListWidget列表，使用信号槽连接后，就可以让右边的QStackedWidget显示不同的内容，每次显示一个widget小部件。

7.7.5.2 用法示例

例37_qstackedwidget，列表栏多页面切换（难度：简单），本例创建3个堆栈页面，每个页面里有一个Label标签部件，点击每个列表的不同项则会切换到不同的页面上。

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

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

mainwindow.h编程后的代码
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QStackedWidget>
6 #include <QHBoxLayout>
7 #include <QListWidget>
8 #include <QLabel>
9
10 class MainWindow : public QMainWindow
11 {
12 Q_OBJECT
13
14 public:
15 MainWindow(QWidget *parent = nullptr);
16 ~MainWindow();
17
18 private:
19 /* widget小部件 */
20 QWidget *widget;
21 /* 水平布局 */
22 QHBoxLayout *hBoxLayout;
23 /* 列表视图 */
24 QListWidget *listWidget;
25 /* 堆栈窗口部件 */
26 QStackedWidget *stackedWidget;
27 /* 3个标签 */
28 QLabel *label[3];
29
30 };
31 #endif // MAINWINDOW_H
32

复制代码

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

mainwindow.cpp编程后的代码
1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 this->setGeometry(0, 0, 800, 480);
7
8 /* widget小部件实例化 */
9 widget = new QWidget(this);
10
11 /* 设置居中 */
12 this->setCentralWidget(widget);
13
14 /* 垂直布局实例化 */
15 hBoxLayout = new QHBoxLayout();
16
17 /* 堆栈部件实例化 */
18 stackedWidget = new QStackedWidget();
19
20 /* 列表实例化 */
21 listWidget = new QListWidget();
22
23 QList <QString>strListWidgetList;
24 strListWidgetList<<"窗口一"<<"窗口二"<<"窗口三";
25
26 for (int i = 0; i < 3; i++){
27 /* listWidget插入项 */
28 listWidget->insertItem(
29 i,
30 strListWidgetList[i]
31 );
32 }
33
34 QList <QString>strLabelList;
35 strLabelList<<"标签一"<<"标签二"<<"标签三";
36
37 for (int i = 0; i < 3; i++){
38 label[i] = new QLabel();
39 /* 设置标签文本 */
40 label[i]->setText(strLabelList[i]);
41 /* 标签对齐方式（居中） */
42 label[i]->setAlignment(Qt::AlignCenter);
43 /* 添加页面 */
44 stackedWidget->addWidget(label[i]);
45 }
46
47 /* 设置列表的最大宽度 */
48 listWidget->setMaximumWidth(200);
49 /* 添加到水平布局 */
50 hBoxLayout->addWidget(listWidget);
51 hBoxLayout->addWidget(stackedWidget);
52
53 /* 将widget的布局设置成hboxLayout */
54 widget->setLayout(hBoxLayout);
55
56 /* 利用listWidget的信号函数currentRowChanged()与
57 * 槽函数setCurrentIndex(),进行信号与槽连接
58 */
59 connect(listWidget, SIGNAL(currentRowChanged(int)),
60 stackedWidget, SLOT(setCurrentIndex(int)));
61 }
62
63 MainWindow::~MainWindow()
64 {
65 }

复制代码

在源文件“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.7.5.3 运行效果

程序编译运行的结果如下，点击列表视图的不同的项会切换到不同的页面上。

7.7.6 QFrame

　在7.3.5小节已经举过例子。

7.7.7 QWidget

7.7.7.1控件简介

QWidget类是所有用户界面对象的基类（如QLabel类继承于QFrame类，而QFrame类又继承于QWidget类）。Widget是用户界面的基本单元：它从窗口系统接收鼠标，键盘和其他事件，并在屏幕上绘制自己。每个Widget都是矩形的，它们按照Z-order进行排序。

注：Z-order是重叠二维对象的顺序，例如堆叠窗口管理器中的窗口。典型的GUI的特征之一是窗口可能重叠，使得一个窗口隐藏另一个窗口的一部分或全部。当两个窗口重叠时，它们的Z顺序确定哪个窗口出现在另一个窗口的顶部。

理解：术语"z-order"指沿着z轴物体的顺序。三维坐标轴中x横轴，y数轴，z上下轴。可以将gui窗口视为平行与显示平面的一系列平面。因此，窗口沿着z轴堆叠。所以z-order指定了窗口的前后顺序。就像您桌面上的一叠纸一样，每张纸是一个窗口，桌面是您的屏幕，最上面的窗口z值最高。

QWidget不是一个抽象类，它可以用作其他Widget的容器，并很容易作为子类来创建定制Widget。它经常用于创建、放置和容纳其他的Widget窗口。

上面这么多例子都有用到QWidget，如7.5.1小节，请自行参考，没有具体例子可写，比较简单。

7.7.8 QMdiArea

7.7.8.1 控件简介

QMdiArea继承QAbstractScrollArea。QMdiArea小部件提供一个显示MDI窗口的区域。

QMdiArea的功能本质上类似于MDI窗口的窗口管理器。大多数复杂的程序，都使用MDI框架，在Qt designer中可以直接将控件MDI Area拖入使用。

7.7.8.2 用法示例

例38_qmdiarea，父子窗口（难度：简单），本例创建一个MDI Area区域，使用一个按钮，每单击按钮时，就会在MDI Area区域新建一个MdiSubWindow窗口。

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

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

mainwindow.h编程后的代码
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QMdiSubWindow>
6 #include <QMdiArea>
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 /* Mdi Area区域对象 */
19 QMdiArea *mdiArea;
20 /* MdiSubWindow子窗口对象 */
21 QMdiSubWindow *newMdiSubWindow;
22 /* 用作点击创建新的窗口 */
23 QPushButton *pushButton;
24
25 private slots:
26 /* 按钮槽函数 */
27 void creat_newMdiSubWindow();
28
29 };
30 #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 pushButton = new QPushButton("新建窗口", this);
9 pushButton->setGeometry(0, 30, 100, 30);
10
11 mdiArea = new QMdiArea(this);
12 /* 设置MDI Area区域大小 */
13 mdiArea->setGeometry(100, 30, 700, 430);
14 /* 连接信号槽 */
15 connect(pushButton, SIGNAL(clicked()),
16 this, SLOT(creat_newMdiSubWindow()));
17 }
18
19 void MainWindow::creat_newMdiSubWindow()
20 {
21 newMdiSubWindow = new QMdiSubWindow();
22 newMdiSubWindow->setWindowTitle("新建窗口");
23
24 /* 如果窗口设置了Qt::WA_DeleteOnClose 这个属性，
25 * 在窗口接受了关闭事件后，Qt会释放这个窗口所占用的资源
26 */
27 newMdiSubWindow->setAttribute(Qt::WA_DeleteOnClose);
28
29 /* 添加子窗口 */
30 mdiArea->addSubWindow(newMdiSubWindow);
31 /* 显示窗口，不设置时为不显示 */
32 newMdiSubWindow->show();
33 /* 自适应窗口 */
34 newMdiSubWindow->sizePolicy();
35 /* 以级联的方式排列所有窗口 */
36 // mdiArea->cascadeSubWindows();
37 /* 以平铺方式排列所有窗口 */
38 mdiArea->tileSubWindows();
39 }
40
41 MainWindow::~MainWindow()
42 {
43 }

复制代码

在源文件“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.7.8.3 运行效果

程序编译运行的结果如下，当点击新建窗口按钮时，在MDI Area区域里新建了一个窗口标题为“新建窗口”窗口，下图为点击多次新建窗口的效果。本例使用了一个按钮，进行了新建窗口操作，其他功能例如添加删除按钮等，读者可以自行添加。本文在新建窗口里的内容为空，newMdiSubWindow可以使用setWidget(QWidget *widget)方法添加内容，如添加前面所学过的QLineEdit等。

7.7.9 QDockWidget

7.7.9.1 控件简介

QDockWidget继承QWidget。QDockWidget类提供了一个小部件，可以停靠在QMainWindow内，也可以作为桌面的顶级窗口浮动。

QDockWidget提供了停靠部件的概念，也称为工具面板或实用程序窗口。停靠窗口是放置在QMainWindow中央窗口附近的停靠窗口部件区域中的辅助窗口。停靠窗口可以被移动到当前区域内，移动到新的区域，并由终端用户浮动(例如，不停靠)。QDockWidget API允许程序员限制dock widget的移动、浮动和关闭能力，以及它们可以放置的区域。QDockWidget的初始停靠区域有Qt.BottomDockWidgetArea（底部停靠）、Qt.LeftDockWidgetArea（左边停靠、；Qt.RightDockWidgetArea（右边停靠）、Qt.TopDockWidgetArea（顶部停靠）和Qt.NoDockWidgetArea（不显示Widget）。

7.7.9.2 用法示例

例39_qdockwidget，停靠窗口（难度：简单），本例创建一个停靠窗口，在停靠窗口里添加文本编辑框，并且把这个停靠窗口放置到QMainWindow的顶部。

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

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