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_1.clicked.connect(self.click_pushButton_1)  # 点击 pushButton_1 触发
    self.pushButton_2.clicked.connect(self.click_pushButton_2)  # 点击 pushButton_2 触发
    self.pushButton_3.clicked.connect(self.click_pushButton_3)  # 点击 pushButton_3 触发

3.3 页面控制程序

通过编程控制堆叠窗口控件的显示页面,就是说当前显示哪一个图形界面。

一种简单的方法是,在任务场景的子程序中,直接使用 setCurrentIndex() 设置选择堆叠控件的显示页面。通俗的说就是,任务需要使用哪个场景时,就在程序中编写页面设置语句进行选择。例如:

def click_pushButton_1(self):  # 点击 pushButton_1 触发
    self.textEdit.append("当前动作:click_pushButton_1")
    self.textEdit.append("选择堆叠布局页面:page_0")
    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 建立触发信号与槽函数的连接。例如:

    # 通过 connect 建立信号/槽连接,点击按钮事件发射 triggered 信号,执行相应的子程序 click_pushButton
    self.pushButton_6.clicked.connect(self.click_pushButton_6)  # 点击按钮 "上一张" 触发
    self.pushButton_7.clicked.connect(self.click_pushButton_7)  # 点击按钮 "下一张" 触发
    self.pushButton_8.clicked.connect(self.click_pushButton_8)  # 点击按钮 "返回" 触发

需要特别提醒的是:堆叠布局的每个页面中的各个控件都是相互独立的不同的控件,具有不同的控件名称 objectName。

例如,page_0 中的按钮控件 “上一张”、“下一张”,与 page_1 中的按钮控件 “上一张”、"下一张"是不同的控件,具有不同的控件名称 objectName。

从 QtDesigner 可以清楚地看到所有控件名称及隶属关系。“stackedWidget” 堆叠布局页面 “page_0” 中的按钮控件 “上一张”、“下一张”、“返回”,objectName 分别是 pushButton_6、pushButton_7、pushButton_8;而页面 “page_1” 中的按钮控件 “上一张”、“下一张”、“返回”,objectName 分别是 pushButton_9、pushButton_10、pushButton_11。

4. 程序运行图

先上两张程序运行结果图。

我们的图形窗口如图所示,看起来已经有模有样了。

以上就是Python编程PyQt5项目实战窗口切换的堆叠布局示例详解的详细内容,更多关于PyQt5项目实战项目的堆叠布局的资料请关注我们其它相关文章!

(0)

相关推荐

  • python3+PyQt5+Qt Designer实现堆叠窗口部件

    本文是对<Python Qt GUI快速编程>的第9章的堆叠窗口例子Vehicle Rental用Python3+PyQt5+Qt Designer进行改写. 第一部分无借用Qt Designer,完全用代码实现. 第二部分则借用Qt Designer,快速实现. 第一部分: import sys from PyQt5.QtCore import (Qt) from PyQt5.QtWidgets import (QApplication, QComboBox, QDialog, QDialo

  • PyQt5 窗口切换与自定义对话框的实例

    近日,需要实现一个功能小而全的桌面版软件,所以选中并尝试了PyQt5这个GUI库.在使用中发现,其功能的确完备,但这方面的资料的确不多,有时自己想实现的功能相关资料找不到,有的还不得不阅读C++的实现代码.PyQt5的文档也都是指向C++版的文档.一段时间做下来,特将有关解决方法记录下来,以将来备查,也随手帮助下后来者. 一般来说,GUI软件都是需要不同的工作界面之间进行切换的,当然也少不了布局等功能的使用.Qt的布局功能理解起来也很容易,使用的基本方法是: 1.建立容器部件: 2.建立布局类,

  • PyQT5实现选项卡窗口、堆栈窗口、停靠窗口、子窗口

    一.选项卡控件QTabWidget import sys # 使用调色板等 from PyQt5.QtGui import QIcon # 导入QT,其中包含一些常量,例如颜色等 # 导入常用组件 from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QTabWidget from PyQt5.QtWidgets import QFormLayout, QLineEdit,QLabel from PyQt5.QtGui i

  • pyqt5 实现多窗口跳转的方法

    今天在做pyqt5的多页面跳转时遇到问题,一点击button按钮,程序会崩溃.在网上查了下,应该是当窗口A调用窗口B的时候,两个窗口不能是同一类型.我写的时候把A.B同时写成了QWidget.把窗口B改成Dialog类型后,就可以成功调用了. 具体代码不放了,写个大概的模板如下: class A(QWidget): def __init__(self): ...省略... self.btn = QPushButton('跳转按钮') def initUI(self): pass class B(

  • PyQt5 多窗口连接实例

    前言 之前做过pyqt的一个简单界面,在一个窗口(MainWindow)中实现一些操作:之前嫌麻烦没有去做多窗口和它们的切换功能.最近研究了下窗口的调用和切换. pyqt4和5有很多不同,在参考别人案例的时候走了很多弯路,最后在pyqt5下实现了简洁的多窗口切换为大家参考. 思路 多窗口的切换和显示连接到按钮的信号上再进行show()就行,格式上有别于pyqt4. 一个逻辑比较清晰的解决方案是,使用一个主程序,在其中实例化各个窗口,然后定义它们的显示逻辑即是按钮的槽函数. 格式上稍有不对就会报错

  • Python深度学习实战PyQt5窗口切换的堆叠布局示例详解

    目录 1. 堆叠布局简介 1. 1什么是堆叠布局(Stacked Layout) 1.2 堆叠布局的实现方法 2. 创建多窗口切换的堆叠布局 3. 堆叠布局的主程序设计 3.1 QStackedWidget 类 3.2 建立信号/槽连接 3.3 页面控制程序 3.4 堆叠布局中的控件操作 软件项目中经常需要多种不同的图形界面,以适应不同的任务场景.选项卡控件(QTackedWidget)通过标签选择打开对应的对话框页面,不需要另外编程.堆叠窗口控件(QStackedWidget)在主程序中通过编

  • Python深度学习实战PyQt5布局管理项目示例详解

    目录 1. 从绝对定位到布局管理 1.1 什么是布局管理 1.2 Qt 中的布局管理方法 2. 水平布局(Horizontal Layout) 3. 垂直布局(Vertical Layout) 4. 栅格布局(Grid Layout) 5. 表格布局(Form Layout) 6. 嵌套布局 7. 容器布局 布局管理就是管理图形窗口中各个部件的位置和排列.图形窗口中的大量部件也需要通过布局管理,对部件进行整理分组.排列定位,才能使界面整齐有序.美观大方. 1. 从绝对定位到布局管理 1.1 什么

  • Python深度学习实战PyQt5基本控件使用解析

    目录 1. PyQt5 控件简介 1.1 什么是控件 1.2 编辑控件的属性 1.3 PyQt5 的控件类型 输入控件: 显示控件: 高级控件: 2. 按钮控件 2.1 按钮控件简介 2.2 按键按钮(QPushButton) 2.3 其它按钮 3. 输入控件 3.1 输入控件简介 3.2 文本输入控件 3.3 调节输入控件 4. Python 应用程序调用图形界面 1. PyQt5 控件简介 1.1 什么是控件 控件也称控件对象,是 Qt用户界面上最基本的组件类型,也是构成用户界面的基本结构.

  • Python深度学习实战PyQt5信号与槽的连接

    目录 1. 信号与槽(Signals and slots) 1.1 信号与槽的原理 1.2 信号发送者与槽的接收者 2. QtDesigner 建立信号与槽的连接 2.1 信号与槽的连接:不同的发送者与接收者,槽函数为控件的内置函数 QtDesigner 设置信号/槽的连接的操作步骤如下: 2.2 信号与槽的连接:不同的发送者与接收者,槽函数为自定义函数 QtDesigner 设置信号/槽的连接的操作步骤如下: 2.3 信号与槽的连接:相同的发送者与接收者,槽函数为控件的内置函数 2.4 信号与

  • Python深度学习实战PyQt5菜单和工具栏功能作用

    目录 1. 创建主窗口 1.1 窗口类型 1.2 编辑窗口的属性 1.3 图形界面设计的预览 2. 建立菜单栏 2.1 建立一级菜单 2.2 建立二级菜单 2.3 关联动作 3. 建立工具栏 3.1 添加工具栏 3.2 添加和编辑动作对象 3.3 向工具栏添加动作对象 4. 编写 Python 应用程序调用图形界面 1. 创建主窗口 上文中我们建立的图形界面程序 GUIdemo2.py,通过导入图形界面 uiDemo1.py,已经实现了主窗口的创建. 1.1 窗口类型 进一步地,在 QtDesi

  • Python深度学习实战PyQt5安装与环境配置过程详解

    目录 1. PyQt5 图形界面开发工具 1.1 从 CLI 到 GUI 1.2 PyQt5 开发工具 2. 安装 PyQt5 和 QtTools pip 安装 PyQt5 pip 安装 QtTools 3. QtDesigner 和 PyUIC 的环境配置 3.1 在 PyCharm 添加 Create Tools 3.2 添加 QtDesigner 工具 3.3 添加 PyUIC 工具 4. QtDesigner 和 PyUIC 的快速入门 4.1 QtDesigner 的启动和入门 新建一

  • Python深度学习之Keras模型转换成ONNX模型流程详解

    目录 从Keras转换成PB模型 从PB模型转换成ONNX模型 改变现有的ONNX模型精度 部署ONNX 模型 总结 从Keras转换成PB模型 请注意,如果直接使用Keras2ONNX进行模型转换大概率会出现报错,这里笔者曾经进行过不同的尝试,最后都失败了. 所以笔者的推荐的情况是:首先将Keras模型转换为TensorFlow PB模型. 那么通过tf.keras.models.load_model()这个函数将模型进行加载,前提是你有一个基于h5格式或者hdf5格式的模型文件,最后再通过改

  • Python教程通过公共键对不同字典进行排序示例详解

    利用 operator 模块中的 itemgetter 函数对这类结构进行排序. rows = [ {'fname': 'Brian', 'lname': 'Jones', 'uid': 1003}, {'fname': 'David', 'lname': 'Beazley', 'uid': 1002}, {'fname': 'John', 'lname': 'Cleese', 'uid': 1001}, {'fname': 'Big', 'lname': 'Jones', 'uid': 100

  • Python实现双X轴双Y轴绘图的示例详解

    诈尸人口回归.这一年忙着灌水忙到头都掉了,最近在女朋友的提醒下终于想起来博客的账号密码,正好今天灌水的时候需要画一个双X轴双Y轴的图,研究了两小时终于用Py实现了.找资料的过程中没有发现有系统的文章,反正代码都整理出来了,我决定顺势水一篇. 目前找到的plt实现双X轴双Y轴绘图方式有两种: 使用fig.add_subplot方式将两对坐标系叠加在一个fig上实现双X轴双Y轴效果.所有调整均可完美实现,推荐该方式 通过axes.twinx().twiny()方式实现双X轴双Y轴图形绘制.问题在于对

  • Gradle 依赖切换源码实践示例详解

    目录 引言 1.一般的修改办法 2.通过 Gradle 脚本动态修改依赖 2.1 配置文件和工作流程抽象 2.2 为项目动态添加子工程 2.3 使用子工程替换依赖 2.4 注意事项 总结 引言 最近,因为开发的时候经改动依赖的库,所以,我想对 Gradle 脚本做一个调整,用来动态地将依赖替换为源码.这里以 android-mvvm-and-architecture 这个工程为例.该工程以依赖的形式引用了我的另一个工程 AndroidUtils.在之前,当我需要对 AndroidUtils 这个

随机推荐