前言

本系列介绍如何在 Python 中使用 Qt for Python 进行 GUI 应用程序开发。

• 第一篇文章：Qt for Python学习笔记—简介
• 第二篇文章：Qt for Python学习笔记—搭建开发环境
• 第三篇文章：Qt for Python学习笔记—应用程序初探
• 第四篇文章：Qt for Python学习笔记—应用程序再探
• 第五篇文章：Qt for Python—Qt Designer 概览
• 第六篇文章：Qt for Python—可视化开发GUI应用程序
• 第七篇文章：Qt for Python布局管理(1)—概览
• 第八篇文章：Qt for Python布局管理(2)—绝对定位
• 第九篇文章：Qt for Python布局管理(3)—水平布局
• 第十篇文章：Qt for Python布局管理(4)—垂直布局
• 第十一篇文章：Qt for Python布局管理(5)—部件拉伸

本文是《Qt for Python 学习笔记》系列第十二篇，对 Qt for Python 的嵌套布局进行了介绍，让读者对 Qt for Python 嵌套布局有个基本的认识。

1. 嵌套布局（Nesting Layout）

1.1 简介

分别利用水平布局管理器、垂直布局管理器已经可以实现某些应用程序 GUI 布局了，但在应用实践中会面对更为复杂的布局，通常会在一个布局中嵌套其他布局，比如可以将水平布局和垂直布局互相嵌套，以实现一个较为复杂的布局。

本文会给读者重点介绍如何利用两种布局（水平布局和垂直布局）互相嵌套来开发一个示例 GUI 应用程序。

注：后续还会再介绍更为复杂的嵌套布局。

1.2 嵌套布局的相关函数

1.2.1 将子布局添加到布局中的函数

一、函数声明

 def addLayout(self, layout:PySide6.QtWidgets.QLayout, stretch:int=...) -> None: ...

上述函数继承自 QBoxLayout 类。

二、函数说明

——功能：该函数将指定子布局（layout）添加到布局的末尾，同时设置该子布局的伸缩因子（stretch）

——参数（layout）：表示待添加到布局中的子布局，类型为 QLayout。

——参数（stretch）：表示子伸缩的拉伸因子，类型为 int。该参数可省略，缺省值为0。

1.2.2 在布局指定位置插入指定子布局的函数

一、函数声明

 def insertLayout(self, index:int, layout:PySide6.QtWidgets.QLayout, stretch:int=...) -> None: ...

上述函数继承自 QBoxLayout 类。

二、函数说明

——功能：该函数在布局的指定位置（index）插入指定子布局（layout），同时设置该部件的伸缩因子（stretch）。

——参数（index）：表示布局对象中指定位置，类型为 int。索引从0开始，0表示第一个位置（水平布局从左往右，垂直布局从上往下）；若索引为负值表示插入到布局末尾。

——参数（layout）：表示待添加到布局中的子布局，类型为 QLayout。

——参数（stretch）：表示子布局的伸缩因子，类型为 int。该参数可省略，缺省值为0。

2. 嵌套布局示例

2.1 示例原型

在进行 GUI 应用程序编码之前，一般建议先勾画出 GUI 框架（窗体及各部件的布局等）。本示例原型如下：

2.2 示例目标

本示例目标是创建一个 Python GUI 应用程序，在主窗口中如原型图示放置6个标签。

主窗口及部件的位置、尺寸及其他属性如下：

• 主窗口

——(1) 窗口位置及尺寸采用尺寸提示（默认大小）

——(2) 标题：嵌套布局示例程序

——(3) 具有窗口最小化、最大化、关闭快捷按钮

• 6个标签

——(1) 位置：如原型图示放置排列

——(2) 尺寸：采用尺寸提示（默认大小）

——(3) 尺寸：6个标签文本依次为：“标签一”、"标签二"、"标签三"、"标签四"、"标签五"、"标签六"

——(4) 背景色：6个标签依次为“SkyBlue”、“Pink”、“PaleGreen”、“Cyan”、“Gold”、“Orange”

• 窗口缩放时各部件按默认的尺寸策略自动进行自适应调整

——(1) 整个窗口（1个水平布局）从左往右分三个区域，依次为1个标签1、1个垂直布局1、1个垂直布局2。

——(2) 标签1：会随窗口缩放而自适应调整，占据水平布局可用空间的1/3。

——(3) 垂直布局1：从上往下放置标签2和标签3。

————(3.1) 水平方向：标签2和标签3的宽度随窗口缩放而自适应调整，占据水平布局可用宽度的1/3；

————(3.2) 垂直方向：标签2和标签3的高度随窗口缩放而自适应调整，按照1：1的比例填满水平布局可用高度。

——(3) 垂直布局2：从上往下放置标签4、标签5和标签6。

————(3.1) 水平方向：标签4、标签5和标签6的宽度随窗口缩放而自适应调整，占据水平布局可用宽度的1/3；

————(3.2) 垂直方向：标签4、标签5和标签6的高度随窗口缩放而自适应调整，按照1：1：1的比例填满水平布局可用高度。

——(4) 在拉伸（或压缩）窗口时，标签四周的内容边距以及各个标签之间的间距始终保持不变。

2.3 示例代码

利用 Visual Studio Code 编辑代码，并保存为文件（如：C:\MyPySide6\MyPySide6NestingLayoutApp.py）。

 from PySide6.QtWidgets import (QApplication, QMainWindow, QWidget, QHBoxLayout, QVBoxLayout, QLabel)
 
 class MyMainWindow(QMainWindow):
     def __init__(self):
         super(MyMainWindow, self).__init__()
 
         window = QWidget() 
 
         label_1 = QLabel("标签一")
         label_2 = QLabel("标签二")
         label_3 = QLabel("标签三")
         label_4 = QLabel("标签四")
         label_5 = QLabel("标签五")
         label_6 = QLabel("标签六")
         label_1.setStyleSheet("background-color: SkyBlue;")
         label_2.setStyleSheet("background-color: Pink;")
         label_3.setStyleSheet("background-color: PaleGreen;")
         label_4.setStyleSheet("background-color: Cyan;") 
         label_5.setStyleSheet("background-color: Gold;")
         label_6.setStyleSheet("background-color: Orange;")
 
         vBoxLayout1 = QVBoxLayout() 
         vBoxLayout1.addWidget(label_2)
         vBoxLayout1.addWidget(label_3)
 
         vBoxLayout2 = QVBoxLayout() 
         vBoxLayout2.addWidget(label_4)
         vBoxLayout2.addWidget(label_5)
         vBoxLayout2.addWidget(label_6)
 
         hBoxLayout = QHBoxLayout()
         hBoxLayout.addWidget(label_1)
         hBoxLayout.addLayout(vBoxLayout1)
         hBoxLayout.insertLayout(2, vBoxLayout2)
 
         window.setLayout(hBoxLayout) 
 
         self.setCentralWidget(window) 
         self.setWindowTitle("嵌套布局示例程序")
 
 if __name__ == '__main__':
     import sys
 
     app = QApplication(sys.argv)
     gui = MyMainWindow()
     gui.show()
     sys.exit(app.exec_())

2.4 代码解析

本示例代码共分三部分：

一、导入模块（或类）部分

 from PySide6.QtWidgets import (QApplication, QMainWindow, QWidget, QHBoxLayout, QVBoxLayout, QLabel)

——第1行代码：示从 PySide6.QtWidgets 模块导入后续代码中会用到的 QApplication 类、QMainWindow 类、QWidget 类、QHBoxLayout 类、QVBoxLayout 类、QLabel 类。

二、自定义MyMainWindow类部分

其次，自定义 MyMainWindow 类（即主窗口，继承自 QMainWindow 类）：

 class MyMainWindow(QMainWindow):
     def __init__(self):
         super(MyMainWindow, self).__init__()
 
         window = QWidget() 
 
         label_1 = QLabel("标签一")
         label_2 = QLabel("标签二")
         label_3 = QLabel("标签三")
         label_4 = QLabel("标签四")
         label_5 = QLabel("标签五")
         label_6 = QLabel("标签六")
         label_1.setStyleSheet("background-color: SkyBlue;")
         label_2.setStyleSheet("background-color: Pink;")
         label_3.setStyleSheet("background-color: PaleGreen;")
         label_4.setStyleSheet("background-color: Cyan;") 
         label_5.setStyleSheet("background-color: Gold;")
         label_6.setStyleSheet("background-color: Orange;")
 
         vBoxLayout1 = QVBoxLayout() 
         vBoxLayout1.addWidget(label_2)
         vBoxLayout1.addWidget(label_3)
 
         vBoxLayout2 = QVBoxLayout() 
         vBoxLayout2.addWidget(label_4)
         vBoxLayout2.addWidget(label_5)
         vBoxLayout2.addWidget(label_6)
 
         hBoxLayout = QHBoxLayout()
         hBoxLayout.addWidget(label_1)
         hBoxLayout.addLayout(vBoxLayout1)
         hBoxLayout.insertLayout(2, vBoxLayout2)
 
         window.setLayout(hBoxLayout) 
 
         self.setCentralWidget(window) 
         self.setWindowTitle("嵌套布局示例程序")

——第1行代码：自定义 MyMainWindow 类的声明语句。类名为 MyMainWindow，该类继承自 QMainWindow 类。

——第2行代码：声明一个类构造函数（ __init__(self)），有1个传递参数（self，表示类实例对象本身）：

——第3行代码：通过 super() 方法继承了父类（QMainWindow）构造函数中的全部属性。

——第5行代码：通过实例化 QWidget 类创建一个窗口对象（window）。

——第7-12行代码：通过实例化 QLabel 类依次创建6个标签对象（这4个标签会添加到布局中，故无需设置其父部件）

——第13-18行代码：通过调用标签对象的 setStyleSheet() 方法依次设置6个标签的背景色。

——第20行代码：通过实例化 QVBoxLayout 类创建一个垂直布局对象（vBoxLayout1）。

——第21-22行代码：调用 addwidget() 方法依次将标签2和标签3添加到垂直布局对象（vBoxLayout1）末尾。

——第24行代码：通过实例化 QVBoxLayout 类创建一个垂直布局对象（vBoxLayout2）。

——第25-27行代码：调用 addwidget() 方法依次将标签4、标签5和标签6添加到垂直布局对象（vBoxLayout2）末尾。

——第29行代码：通过实例化 QHBoxLayout 类创建一个水平布局对象（hBoxLayout）。

——第30行代码：调用 addwidget() 方法将标签1添加到水平布局对象（hBoxLayout）末尾（从左往右第一个位置）。

——第31行代码：调用 addLayout() 方法将垂直布局对象（vBoxLayout1）添加到水平布局对象（hBoxLayout）末尾（从左往右第二个位置）。

——第32行代码：调用 insertLayout() 方法将垂直布局对象（vBoxLayout2）插入到水平布局对象（hBoxLayout）指定位置（索引值为2，这里表示从左往右第三个位置，即末尾）。

——第34行代码：通过调用窗口对象（window）的 setLayout() 方法将水平布局对象（hBoxLayout）设置为窗口对象的布局管理器。

——第36行代码：调用窗口的 setCentralWidget() 方法设置主窗口的中央部件为窗口对象（window）。

——第37行代码：调用窗口的 setWindowTitle() 方法设置主窗口的标题为"嵌套布局示例程序"。

三、设置文件运行入口部分

最后，在设置文件运行入口部分，完成创建应用程序、创建和显示自定义主窗口、运行应用程序直至退出。

 if __name__ == "__main__":
     import sys 
     
     app = QApplication(sys.argv)
     win = MyMainWindow()
     win.show()
     sys.exit(app.exec_())

——第1行代码：通过 if __name__ == "__main__": 语句来设置文件运行入口。

——第2行代码：导入 Python 内置的 sys 模块，接下的 sys.argv 和 sys.ext() 会用到该模块。

——第4行代码：使用 QApplication 类创建一个应用程序对象（app），括号内的 sys.argv 表示构造时含的传递参数。

——第5行代码：使用自定义的 MyMainWindow 类创建应用程序的主窗口对象（win）。

——第6行代码：调用主窗口对象（win）的 show() 方法来显示该主窗口。

——第7行代码：运行应用程序，直至退出。

2.5 示例程序运行

直接在 Visual Studio Code 上点击主窗体上运行图标按钮来运行该示例程序。

上图是程序运行后的窗口，可以看到已经实现示例嵌套布局目标：

——最外层红框表示水平布局；

——里面最左侧是标签1，其随窗口缩放而自适应调整，占据整个水平布局空间的1/3；

——里面中间的蓝框是一个垂直布局（其中从上往下依次放置标签2和标签3）：

————(1) 标签2和标签3的宽度随窗口缩放而自适应调整，均占据整个水平布局宽度的1/3；

————(2) 标签2和标签3的高度随窗口缩放而自适应调整，分别占据整个水平布局高度的1/2；

——里面右侧的绿框是一个垂直布局（其中从上往下依次放置标签4、标签5和标签6）：

————(1) 标签4、标签5和标签6的宽度随窗口缩放而自适应调整，均占据整个水平布局宽度的1/3；

————(2) 标签4、标签5和标签6的高度随窗口缩放而自适应调整，分别占据整个水平布局高度的1/3；

——在拉伸（或压缩）窗口时，标签四周的内容边距以及各个标签之间的间距始终保持不变。

注：上图运行窗口中并没有红框、蓝框、绿框，均为进行说明后加的。

3. 嵌套布局（伸缩因子）示例

3.1 示例原型

在进行 GUI 应用程序编码之前，一般建议先勾画出 GUI 框架（窗体及各部件的布局等）。本示例原型如下：

3.2 示例目标

本示例目标是创建一个 Python GUI 应用程序，在主窗口中如原型图示放置6个标签。

主窗口及部件的位置、尺寸及其他属性如下：

• 主窗口

——(1) 窗口位置及尺寸采用尺寸提示（默认大小）

——(2) 标题：嵌套布局(伸缩因子)布局示例程序

——(3) 具有窗口最小化、最大化、关闭快捷按钮

• 4个标签

——(1) 位置：如原型图示放置排列

——(2) 尺寸：采用尺寸提示（默认大小）

——(3) 尺寸：6个标签文本依次为：“标签一”、"标签二"、"标签三"、"标签四"、"标签五"、"标签六"

——(4) 背景色：6个标签依次为“SkyBlue”、“Pink”、“PaleGreen”、“Cyan”、“Gold”、“Orange”

• 窗口缩放时各部件自动进行自适应调整

——(1) 整个窗口（1个水平布局）从左往右分三个区域，依次为1个标签1、1个垂直布局1、1个垂直布局2。

——(2) 标签1：

————(2.1) 水平方向：标签1的宽度始终保持不变（最小宽度）；

————(2.2) 垂直方向：标签1的高度随窗口缩放而自适应调整，填满水平布局可用高度；

——(3) 垂直布局1：从上往下放置标签2和标签3。

————(3.1) 水平方向：标签2和标签3随窗口缩放而自适应调整，占据剩余可用宽度（水平布局宽度减去标签1宽度）的1/3；

————(3.2) 垂直方向：标签2和标签3随窗口缩放而自适应调整，按照1：2的比例填满水平布局可用高度。

——(3) 垂直布局2：从上往下放置标签4、标签5和标签6。

————(3.1) 水平方向：标签4、标签5和标签6随窗口缩放而自适应调整，占据剩余可用宽度（水平布局宽度减去标签1宽度）的2/3；

————(3.2) 垂直方向：标签4、标签5和标签6随窗口缩放而自适应调整，按照1：2：3的比例填满水平布局可用高度。

——(4) 在拉伸（或压缩）窗口时，标签四周的内容边距以及各个标签之间的间距始终保持不变。

3.3 示例代码

本示例代码基于本文第2.3章节示例代码，在其代码上进行相应修改。

利用 Visual Studio Code 编辑代码，并另存为文件（如：C:\MyPySide6\MyPySide6NestingLayoutStretchApp.py）。

 from PySide6.QtWidgets import (QApplication, QMainWindow, QWidget, QHBoxLayout, QVBoxLayout, QLabel)
 
 class MyMainWindow(QMainWindow):
     def __init__(self):
         super(MyMainWindow, self).__init__()
 
         window = QWidget() 
 
         label_1 = QLabel("标签一")
         label_2 = QLabel("标签二")
         label_3 = QLabel("标签三")
         label_4 = QLabel("标签四")
         label_5 = QLabel("标签五")
         label_6 = QLabel("标签六")
         label_1.setStyleSheet("background-color: SkyBlue;")
         label_2.setStyleSheet("background-color: Pink;")
         label_3.setStyleSheet("background-color: PaleGreen;")
         label_4.setStyleSheet("background-color: Cyan;") 
         label_5.setStyleSheet("background-color: Gold;")
         label_6.setStyleSheet("background-color: Orange;")
 
         vBoxLayout1 = QVBoxLayout() 
         vBoxLayout1.addWidget(label_2, 1)
         vBoxLayout1.addWidget(label_3, 2)
 
         vBoxLayout2 = QVBoxLayout() 
         vBoxLayout2.addWidget(label_4, 1)
         vBoxLayout2.addWidget(label_5, 2)
         vBoxLayout2.addWidget(label_6, 3)
 
         hBoxLayout = QHBoxLayout()
         hBoxLayout.addWidget(label_1, 0)
         hBoxLayout.addLayout(vBoxLayout1, 1)
         hBoxLayout.insertLayout(2, vBoxLayout2, 2)
 
         window.setLayout(hBoxLayout) 
 
         self.setCentralWidget(window) 
         self.setWindowTitle("嵌套布局(伸缩因子)示例程序")
 
 if __name__ == '__main__':
     import sys
 
     app = QApplication(sys.argv)
     gui = MyMainWindow()
     gui.show()
     sys.exit(app.exec_())

3.4 代码解析

本示例代码基于本文第2.3章节示例代码，在其代码上进行相应修改。仅对修改的代码进行解析。

本示例代码共分三部分：

一、导入模块（或类）部分

此部分略，请参见本文第2.4章节中对应代码解析。

二、自定义MyMainWindow类部分

 class MyMainWindow(QMainWindow):
     def __init__(self):
         ......
         vBoxLayout1 = QVBoxLayout() 
         vBoxLayout1.addWidget(label_2, 1)
         vBoxLayout1.addWidget(label_3, 2)
 
         vBoxLayout2 = QVBoxLayout() 
         vBoxLayout2.addWidget(label_4, 1)
         vBoxLayout2.addWidget(label_5, 2)
         vBoxLayout2.addWidget(label_6, 3)
 
         hBoxLayout = QHBoxLayout()
         hBoxLayout.addWidget(label_1, 0)
         hBoxLayout.addLayout(vBoxLayout1, 1)
         hBoxLayout.insertLayout(2, vBoxLayout2, 2)
 
         window.setLayout(hBoxLayout) 
 
         self.setCentralWidget(window) 
         self.setWindowTitle("嵌套布局(伸缩因子)示例程序")

本次修改无新增或删除代码语句，仅仅是对涉及向布局添加（或插入）标签时，增加各自伸缩因子参数。涉及修改的代码语句如下：

——完整代码第23行：调用 addwidget() 方法将标签2添加到垂直布局对象（vBoxLayout1）末尾（从上往下第一个位置）。

——完整代码第24行：调用 addwidget() 方法将标签3添加到垂直布局对象（vBoxLayout1）末尾（从上往下第二个位置）。

——完整代码第27行：调用 addwidget() 方法将标签4添加到垂直布局对象（vBoxLayout2）末尾（从上往下第一个位置）。

——完整代码第28行：调用 addwidget() 方法将标签5添加到垂直布局对象（vBoxLayout2）末尾（从上往下第二个位置）。

——完整代码第29行：调用 addwidget() 方法将标签6添加到垂直布局对象（vBoxLayout2）末尾（从上往下第三个位置）。

——完整代码第32行：调用 insertLayout() 方法将标签1添加到水平布局对象（hBoxLayout）末尾（从左往右第一个位置）。

——完整代码第39行代码：调用窗口的 setWindowTitle() 方法设置主窗口的标题为"嵌套布局(伸缩因子)示例程序"。

三、设置文件运行入口部分

此部分略，请参见本文第2.4章节中对应代码解析。

3.5 示例程序运行

直接在 Visual Studio Code 上点击主窗体上运行图标按钮来运行该示例程序。

上图是程序运行后的三种窗口（左上为默认窗口、右上为最小窗口、下面是拉伸后的窗口），对窗口进行拉伸（或压缩），可以发现示例目标均已经实现。

结束语

本文是《Qt for Python 学习笔记》系列第十一篇，介绍了 Qt for Python 布局管理中的嵌套布局（水平布局结合垂直布局）的相关内容（嵌套布局相关函数、示例代码及解析），并在嵌套布局中设置了伸缩因子，让读者对此有个较为基本的了解和掌握。

接下来会介绍 Qt for Python 布局中的内容边距和间距，敬请期待！

希望本文能对您有所帮助！若文中存在疏忽不足或错误，还请不吝赐教！