PyQt5 designer 页面点击按钮跳转页面实现

目录
  • 使用 designer 进行开发
    • PyQt5 实现两个页面跳转
    • PyQt5 实现多个页面跳转
  • 补充:使用 designer 开发,页面跳转函数
  • 不使用 designer 的页面跳转

使用 designer 进行开发

首先要知道,使用 Qt designer 和 代码进行 Qt 开发实现页面跳转是不一样的,这里我们使用的是 designer 开发,在这里简单记录一下。

PyQt5 实现两个页面跳转

目前场景:

  • 用 Qt designer 设计好了两个页面:a_ui.pyb_ui.py
  • a_ui.py 中有个按钮的 id 为 goButton

我们实现两个页面之间的跳转:

from a_ui import Ui_MainWindow as A_Ui # a界面的库
from b_ui import Ui_MainWindow as B_Ui # b界面的库

from PyQt5 import QtCore, QtWidgets
import sys

class AUi(QtWidgets.QMainWindow, A_Ui):
    def __init__(self):
        super(AUi, self).__init__()
        self.setupUi(self)

class BUi(QtWidgets.QMainWindow, B_Ui):
    def __init__(self):
        super(BUi, self).__init__()
        self.setupUi(self)

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    a = AUi()
    a.show()
    b = BUi()
    # button是你定义的按钮
    a.goButton.clicked.connect(
        lambda:{a.close(), b.show()}
       )
    sys.exit(app.exec_())

PyQt5 实现多个页面跳转

PyQt5 实现多个页面跳转,我们可以借助一个 Controller 控制器来实现,大体思路如下:

# 利用一个控制器来控制页面的跳转
class Controller:
    def __init__(self):
        pass
    def show_A(self):
        # 创建 A 窗口对象并显示
        # 关闭其余窗口对象
    def show_B(self):
        # 创建 B 窗口对象并显示
        # 关闭其余窗口对象
    def show_C(self):
        # 创建 C 窗口对象并显示
        # 关闭其余窗口对象

来看一个使用情景:

  • 用 Qt designer 设计好了三个页面:hello.pylogin.pyoperate.py
  • hello.py 中有一个 Id 为 loginBuuton 的按钮,用于跳转到 login.py 窗口
  • hello.py 中还有一个 Id 为 operateButton 的按钮,用于跳转到 operate.py 窗口

实现效果

注:由于我们的 界面逻辑 是分离的,所以界面只需满足上面的使用情境中的要求即可。

运行程序启动一个 hello.py 的欢迎界面:

点击 票务管理,实际上是点击了 loginButton 按钮,跳转到了 login.py 登录界面:

如果欢迎界面中点击的是 票务查询,实际上是点击了 operateButton,会跳转到 operate.py 界面:

代码编写

首先导入需要的模块:系统模块利用designer设计的页面

import sys
from PyQt5 import QtCore, QtWidgets, QtCore

# 导入 Qt designer 设计的页面
from hello import Ui_MainWindow as Hello_Ui
from login import Ui_MainWindow as Login_Ui
from operate import Ui_MainWindow as Operate_Ui

然后写页面对应的窗口类,我们这里简单的实现 一个页面往其他页面的跳转
实现跳转的逻辑主要都在 HelloWindow 类中,其他窗口类仅仅做了初始化:

# 主窗口
class HelloWindow(QtWidgets.QMainWindow, Hello_Ui):
    switch_window1 = QtCore.pyqtSignal() # 跳转信号
    switch_window2 = QtCore.pyqtSignal() # 跳转信号
    def __init__(self):
        super(HelloWindow, self).__init__()
        self.setupUi(self)
        self.queryButton.clicked.connect(self.goOperate)
        self.manageButton.clicked.connect(self.goLogin)
    def goLogin(self):
        self.switch_window1.emit()
    def goOperate(self):
        self.switch_window2.emit()

# 登录窗口
class LoginWindow(QtWidgets.QMainWindow, Login_Ui):
    def __init__(self):
        super(LoginWindow, self).__init__()
        self.setupUi(self)

# 操作窗口
class OperateWindow(QtWidgets.QMainWindow, Operate_Ui):
    def __init__(self):
        super(OperateWindow, self).__init__()
        self.setupUi(self)

控制器用来控制页面的跳转:

# 利用一个控制器来控制页面的跳转
class Controller:
    def __init__(self):
        pass
    # 跳转到 hello 窗口
    def show_hello(self):
        self.hello = HelloWindow()
        self.hello.switch_window1.connect(self.show_login)
        self.hello.switch_window2.connect(self.show_operate)
        self.hello.show()
    # 跳转到 login 窗口, 注意关闭原页面
    def show_login(self):
        self.login = LoginWindow()
        self.hello.close()
        self.login.show()
    # 跳转到 operate 窗口, 注意关闭原页面
    def show_operate(self):
        self.operate = OperateWindow()
        self.hello.close()
        self.operate.show()

启动整个项目:

def main():
    app = QtWidgets.QApplication(sys.argv)
    controller = Controller() # 控制器实例
    controller.show_hello() # 默认展示的是 hello 页面
    sys.exit(app.exec_())

if __name__ == '__main__':
    main()

补充:使用 designer 开发,页面跳转函数

假设写好了一个 A 页面:

class MainWindow(QMainWindow, Ui_MainWindow):  # 多重继承QMainWindow和Ui_MainWindow
    def __init__(self):
        super(MainWindow, self).__init__()  # 先调用父类QMainWindow的初始化方法
        self.setupUi(self)  # 再调用setupUi方法

在 B 页面引入了 A 页面:

from main import MainWindow

在 A 页面需要进行页面跳转只需要封装一个以下函数即可:

# 关闭当前界面, 打开主界面
def toMainWindow(self):
    self.ui1 = MainWindow()
    self.ui1.show()
    self.close()

不使用 designer 的页面跳转

这个更简单了,只需要在 main 方法里将 A 页面的点击事件与 B 页面的展示绑定即可:

import sys
from PyQt5.QtWidgets import QMainWindow, QPushButton, QApplication

class First(QMainWindow):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.btn = QPushButton("Button", self)
        self.btn.move(30, 50)
        self.setGeometry(300, 300, 500, 500)
        self.setWindowTitle('Event sender')
        self.show()

class Second(QMainWindow):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.setGeometry(300, 300, 290, 150)
        self.setWindowTitle('Get sender')

if __name__ == '__main__':
    app = QApplication(sys.argv)
    a = First()
    b = Second()
    a.show()
    a.btn.clicked.connect(b.show)  # 重点在这
    sys.exit(app.exec_())

如果需要点击 A 跳转 B 的同时关闭,那么给 A 的点击事件同时绑定 A 的关闭事件即可:

class First(QMainWindow):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.btn = QPushButton("Button", self)
        self.btn.move(30, 50)
        self.setGeometry(300, 300, 500, 500)
        self.setWindowTitle('Event sender')
        self.show()

        self.btn.clicked.connect(self.close)  # 加上这句话即可

到此这篇关于PyQt5 designer 页面点击按钮跳转页面实现的文章就介绍到这了,更多相关PyQt5 designer按钮跳转页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • PyQt5实现界面(页面)跳转的示例代码

    网上关于PyQt5的教程很少,特别是界面跳转这一块儿,自己研究了半天,下来和大家分享一下 一.首先是主界面 # -*- coding: utf-8 -*- # Form implementation generated from reading ui file 'Form.ui' # # Created by: PyQt5 UI code generator 5.10.1 # # WARNING! All changes made in this file will be lost! #要注意的

  • Pyqt5设置返回键和跳转页面键的示例代码

    例子一 import sys from PyQt5.QtWidgets import QMainWindow, QPushButton, QApplication class First(QMainWindow): def __init__(self): super().__init__() self.initUI() def initUI(self): self.btn = QPushButton("进入页面2", self) self.btn.move(30, 50) self.s

  • PyQt5 designer 页面点击按钮跳转页面实现

    目录 使用 designer 进行开发 PyQt5 实现两个页面跳转 PyQt5 实现多个页面跳转 补充:使用 designer 开发,页面跳转函数 不使用 designer 的页面跳转 使用 designer 进行开发 首先要知道,使用 Qt designer 和 代码进行 Qt 开发实现页面跳转是不一样的,这里我们使用的是 designer 开发,在这里简单记录一下. PyQt5 实现两个页面跳转 目前场景: 用 Qt designer 设计好了两个页面:a_ui.py.b_ui.py a_

  • 解决layer弹出层的内容页点击按钮跳转到新的页面问题

    在参与的一个项目中,有一个这样的需求,导入基础数据成功后,默认弹出一个管理员登录页,点击登录按钮,需要跳到管理页面. 导入页按钮: <button type="button" id="start" class="layui-btn layui-btn-radius layui-btn-lg layui-bg-orange btn3"><i>导入</i></button> 导入按钮的点击事件,点击后会

  • Android使用Intent的Action和Data属性实现点击按钮跳转到拨打电话和发送短信界面

    场景 点击拨打电话按钮,跳转到拨打电话页面 点击发送短信按钮,跳转到发送短信页面 注: 实现 将布局改为LinearLayout,并通过android:orientation="vertical">设置为垂直布局,然后添加id属性. 然后添加两个按钮,并设置Id属性与显示文本. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="

  • 如何解决手机浏览器页面点击不跳转浏览器双击放大网页

    手机端web网页项目 1,angluar js 1.4.6 网页项目开发过程中,使用PC浏览器能正常访问,IOS设备浏览器也能正常访问,但是使用Android部分浏览器进行访问的时候,链接偶尔不跳转,点击完没有任何反应(本人使用angluar js route进行单页面应用跳转),此时地址栏的路径已经被更新为点击后的地址,并且双击页面网页会放大(顺着这个现象去找到了问题) 现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大? 解决方案: 可以在页面头部加上meta

  • vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

    vue项目中,需要实现点击对应按钮,滚动到对应页面位置,下面分享一个简单实用的方法 原文地址 http://www.sharedblog.cn/?post=205 <template> <div class="box"> <div class="btn"> <span @click="Submit(1)">按钮一</span> <span @click="Submit(2

  • Android超详细介绍自定义多选框与点击按钮跳转界面的实现

    总程:在avtivity_main.xml设计5个控件,btn1-5,点击btn1弹出一个多选对话框,点击按钮btn1弹出一个多选框可选择你喜欢的打野英雄,点击btn2跳转到activity_main2界面(就是图片,不可选择)设计思路流程:在activity_main.xml布局界面,总体在头目录进行垂直排列,然后镶嵌5个水平的线性布局(左是ImageView,右边是Button按钮)由于5张图的大小在一个屏幕显示不出来,所以添加一个ScoveView滚动,以使所有资源可以看到! 在MainA

  • Python flask框架实现浏览器点击自定义跳转页面

    代码如下 _init_.py from flask import Flask, request, url_for, redirect, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/cool_form', methods=['GET', 'POST']) def cool_form(): if request.

  • vue点击按钮实现让页面的某一个元素全屏展示

    目录 点击按钮让页面的某一个元素全屏展示 先上效果图 页面结构 在页面加载时添加监听 vue全屏和退出全屏调用事件 页面全屏 部分元素全屏 退出全屏调用事件 点击按钮让页面的某一个元素全屏展示 先上效果图 项目情况:vue+screenfull插件 其实文档上写的很清楚:screenfull文档 点击页面的全屏图标,使包裹地图的div实现全屏. 页面结构 在页面加载时添加监听 mounted () { const element = document.getElementById('map_co

  • vue点击按钮实现简单页面的切换

    本文实例为大家分享了vue点击按钮实现页面切换的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8">

  • vue 点击按钮 路由跳转指定页面的实现方式

    目录 点击按钮 路由跳转指定页面 最终效果 vue跳转页面常用的方式 1:router-link跳转 2:this.$router.push() 3.this.$router.replace() 4.this.$router.go(n) ps : 区别 点击按钮 路由跳转指定页面 最终效果 点击指定按钮,跳转指定 /login 页面 代码: <button @click="gotolink" class="btn btn-success">点击跳转页面&

随机推荐