Python深度学习实战PyQt5窗⼝切换的堆叠布局⽰例详解
⽬录
1. 堆叠布局简介
1. 1什么是堆叠布局（Stacked Layout）
1.2 堆叠布局的实现⽅法
2. 创建多窗⼝切换的堆叠布局
3. 堆叠布局的主程序设计
3.1 QStackedWidget 类
3.2 建⽴信号/槽连接
3.3 页⾯控制程序
3.4 堆叠布局中的控件操作
软件项⽬中经常需要多种不同的图形界⾯，以适应不同的任务场景。选项卡控件（QTackedWidget）通过标签选择打开对应的对话框页⾯，不需要另外编程。堆叠窗⼝控件（QStackedWidget）在主程序中通过编程来控制显⽰的图形界⾯，相对⽐较复杂，但也更加通⽤和灵活。
1. 堆叠布局简介
1. 1什么是堆叠布局（Stacked Layout）
布局管理就是管理图形窗⼝中各个部件的位置和排列。图形窗⼝中的⼤量部件也需要通过布局管理，对部件进⾏整理分组、排列定位，才能使界⾯友好。上⼀篇⽂中我们介绍了基本的⽔平布局、垂直布局、栅格布局、表格布局和进阶的嵌套布局和容器布局。
在容器布局中，通过容器控件（Containers）与布局管理器（Layouts）的结合，可以实现对程序窗⼝的分割和布局，就可以⾃由设计各种丰富的图形界⾯。
在实际的软件项⽬中，通常需要多种/多个不同的图形界⾯，以适应不同的任务场景。如何实现多窗⼝图形界⾯的需求呢？⼤致来说有⼏种思路：
使⽤弹出窗⼝。主窗⼝提供基本界⾯，通过弹出窗⼝实现⼦任务界⾯，⼦任务结束后关闭弹出窗⼝回到主窗⼝。
这是⼀种可⾏的，也⽐较简单的处理⽅案，很多应⽤程序中都设有弹出窗⼝。但是频繁弹出和关闭窗⼝的⽤户体验不好，⽽且在窗⼝之间的切换不⽅便。
重建图形界⾯。当调⽤新的图形界⾯时，关闭后删除现有界⾯上的所有控件，再新建需要的各种控件。
这种⽅案虽然可⾏，但是编程复杂、浪费资源、容易出错，难以适应多窗⼝相互切换的要求，因此很少使⽤。在
QtDesigner 中也不⽀持这种⽅案的操作。
通过堆叠布局实现多窗⼝切换。堆叠布局是在窗⼝的整体或局部区域设置多组图形界⾯，根据需要使⽤指定的图形界⾯。
打个⽐⽅，这就好⽐戏剧或拍照中准备了多种背景幕布，需要什么场景，就展开所需的场景幕布，⽽把其它幕布收起来。
1.2 堆叠布局的实现⽅法
QStackedLayout 类提供了多页⾯切换的堆叠布局。
选项卡控件（QTackedWidget）提供了选项卡对话框，外观类似于浏览器页⾯打开多个标签页。选项卡控件允许创建多个对话框页⾯，每个页⾯带有⾃⼰的标签。使⽤时点击标签⾏进⾏选择，就打开对应的对话框页⾯，不需要另外编程。
堆叠窗⼝控件（QStackedWidget）提供了更加通⽤和灵活的多窗⼝、多页⾯切换的解决⽅案。QStackedWidget 控件可以添加在整个窗⼝或窗⼝中的任意区域，允许在堆叠窗⼝区域内设计多个页⾯，在程序控制使⽤指定的窗⼝界⾯。
堆叠窗⼝控件（QStackedWidget）需要在主程序中通过编程来控制显⽰的图形界⾯，相对于选项卡控件（QTackedWidget）来说⽐较复杂，但因此也更加灵活。
本⽂以堆叠窗⼝控件（QStackedWidget）为例，详细介绍堆叠布局的界⾯设计和程序实现过程。
2. 创建多窗⼝切换的堆叠布局
（1）以上⽂ uiDemo6.ui 为基础：图形窗⼝的左侧上部为垂直布局的按钮控件区域 leftLayout_1，设有多个按钮控件，⽤于选择不同的业务；左侧下部为垂直布局的⽂本区域 leftLayout_2，设有⽂本显⽰框。
（2）将图形窗⼝右侧的主体区域设计为堆叠窗⼝，⽤于设计多个图形界⾯，以适应不同的业务场景：
在 QtDesigner 左侧⼯具栏 “Containers” 类中，选择 “Stacked Widget” 控件，将其拖动⾄设计的图形窗⼝中，创建堆叠布局的容器控件。
对窗⼝中的堆叠容器 “Stacked Widget”，选中后可以⽤⿏标拖动、拉伸来调整控件的位置和⼤⼩，或者在 “属性编辑器”
中设置 (X, Y)、宽度、⾼度属性。
堆叠容器 “Stacked Widget” ⾃动建⽴了 2个页⾯。⿏标位于堆叠容器 “Stacked Widget” ，右键唤出下拉菜单，选择 "插⼊页"可以插⼊新的页⾯，选择 “改变页顺序” 可以调整各页⾯的顺序。
在控件的右上⾓显⽰有⼀对⿊⾊三⾓符号，可以在多个页⾯之间切换，也可以在 “对象查看器” 中选择要编辑的页⾯。
（3）堆叠容器 “Stacked Widget” 中各页⾯的设计，具体设计内容是根据业务需要确定的。
page_0 的设计：标签控件 label_1 ⽤于显⽰封⾯图⽚，按钮控件 pushButton_6~8 ⽤于控制翻页；
page_1 的设计：⽔平布局的标签控件 label_2、label_3 ⽤于显⽰原始图⽚和处理图⽚，控件⽤于控制处理⽅法和参数，按钮控件 pushButton_9~11 ⽤于控制翻页；
page_2 的设计：表格控件 tableWidget 控件⽤于显⽰表格数据，按钮控件⽤于控制。
将完成的堆叠布局界⾯设计⽂件另存为 uiDemo8.ui，不同页⾯的编辑状态如下图所⽰：
堆叠布局 page_0 设计图：
堆叠布局 page_1 设计图：
堆叠布局 page_2 设计图：
3. 堆叠布局的主程序设计
使⽤堆叠窗⼝控件（QStackedWidget）建⽴的堆叠布局界⾯，要在主程序中通过编程控制显⽰哪⼀个图形界⾯。
3.1 QStackedWidget 类
QStackedWidget 类继承⾃ QFrame类。QStackedWidge t类提供了多页⾯切换的布局，⼀次只能看到⼀个界⾯。QStackedWidget 类的信号：
currentChanged(int index)：当前页⾯发⽣变化时候发射，index 为新的索引值。
widgetRemoved(int index)：页⾯被移除时候发射，index 为页⾯对应的索引值。
QStackedWidget 类的槽函数：
setCurrentIndex(int index)：设置索引 index 所在的页⾯为当前页⾯。
setCurrentWidget(QWidget *widget)：设置QWidget页⾯为当前页⾯。
简单地说，使⽤如下程序可以设置 page_0 为当前显⽰的页⾯：
pageNo = 0  # 设置 page_0 为索引页（第⼀页⾯）
self.stackedWidget.setCurrentIndex(pageNo)  # 设置使⽤ pageNo=0 作为当前显⽰页⾯
需要注意的是，不论我们为每个页⾯控件设置的名称（objectName）是什么，在 QStackedWidget 类中定义的页⾯索引index 都是⼀个从 0 开始计数，即：第⼀页⾯的索引值 index=0，第⼆页⾯的索引值 index=1，…。
因此，为了避免混淆，建议将 StackedWidge 控件的第⼀页⾯命名为 objectName: page_0，第⼆页⾯命名为 objectName: page_1，…
3.2 建⽴信号/槽连接
建⽴信号/槽连接，既可以在 QtDesigner 中设置，也可以在主程序中通过程序实现。
以下例程是在程序中建⽴信号/槽连接。
# 通过 connect 建⽴信号/槽连接，点击按钮事件发射 triggered 信号，执⾏相应的⼦程序 click_pushButton
self.pushButton_t(self.click_pushButton_1)  # 点击 pushButton_1 触发
self.pushButton_t(self.click_pushButton_2)  # 点击 pushButton_2 触发
self.pushButton_t(self.click_pushButton_3)  # 点击 pushButton_3 触发
3.3 页⾯控制程序
通过编程控制堆叠窗⼝控件的显⽰页⾯，就是说当前显⽰哪⼀个图形界⾯。
⼀种简单的⽅法是，在任务场景的⼦程序中，直接使⽤ setCurrentIndex() 设置选择堆叠控件的显⽰页⾯。通俗的说就是，任务需要使⽤哪个场景时，就在程序中编写页⾯设置语句进⾏选择。例如：
def click_pushButton_1(self):  # 点击 pushButton_1 触发
学python需要什么
self.stackedWidget.setCurrentIndex(0)  # 打开 stackedWidget > page_0
self.label_1.setPixmap(QtGui.QPixmap("../image/fractal01.png"))
return
另⼀种⾼级的应⽤⽅法是，通过⾃定义页⾯控制函数，获取当前信号 sender 检索 objectName，来选择堆叠窗⼝控件的显⽰页⾯。这种⽅法更清晰地体现业务与界⾯的分离。例如：
def frameController(self):  # 页⾯控制函数
sender = self.sender().objectName()  # 获取当前信号 sender
index = {
"pushButton_1": 0,  # page_0
"pushButton_2": 1,  # page_1
"pushButton_3": 2,  # page_2
}
self.stackedWidget.setCurrentIndex(index[sender])  # 根据信号 index 设置所显⽰的页⾯
3.4 堆叠布局中的控件操作
控件操作包括控件发出信号和在槽函数中进⾏操作。
在⽤户编写的程序中，需要接收控件信号、或在槽函数中对控件进⾏操作，都要通过控件的 objectName 来实现。
例如，点击按钮 “第⼀章”（pushButton_1），就选择堆叠布局页⾯ “page_0”；要在标签控件 “label_1” 显⽰图⽚
“…/image/fractal01.png”，就使⽤以下的程序：
self.label_1.setPixmap(QtGui.QPixmap("../image/fractal01.png"))
⽽对于堆叠布局页⾯ “page_0” 中的按钮控件 “上⼀张”、“下⼀张”、“返回”，要实现点击按钮时执⾏相应的任务，则应以控件的objectName 建⽴触发信号与槽函数的连接。例如：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。