专栏首页用户6811391的专栏如何用 Python 写个登陆窗口?

如何用 Python 写个登陆窗口?

最近在学习 PyQt5 GUI 编程,大致路线是找了套网课《撩课-Python-GUI编程-PyQt5》,以梳理思维导图的形式梳理了下基础知识点以及 QtDesigner 应用流程,跳过各种具体控件的细节,结合课程中具体的综合案例来进行具体练习。

本文就是在完成注册、登陆和功能界面的综合案例后进行梳理,力图整理出 PyQt5 GUI 编码过程以及应用到的知识点,以及个人技术点方面的收获。

案例效果展示

因为是回顾,比从零开始记录的优势是可以结合着最终案例效果来进行演示。本个案例分为三个界面:注册、登陆和功能界面,通过图形界面中各按钮选项相互联系跳转。

MVP 概念

首先 MVP 概念:最简可行产品(minimum viable product),有部分机能,恰好可以让设计者表达其核心设计概念的产品。

这也是我在工作中接触到的概念,学习或者介绍某个技术应用时,通过一个 MVP 的开发和演示,能够形象具体地将知识点应用落实到具体场景,高效且实用。

注册页

先提注册页是因为它比较独立,界面元素是背景图、左上角按钮、左下角输入框和注册按钮:

当点选左上方不同按钮时也会产生不同的交互效果;当输入的账号密码符合要求时,注册按钮可以被激活等。

登陆界面

登陆界面是根据课程案例指引,仿 QQ 登陆界面,界面上方是一个动图,左下角“注册账号”点击跳转注册界面,右下角二维码图片可以跳转链接,中间的账号输入部分也会有相应地检测逻辑:

功能界面

当登陆界面能够正常登陆后,便进入功能界面,根据课程案例的指引,功能界面被做成了个简单的计算器:

功能界面

动态展示

动图展示

案例项目概览

项目结构

首先是项目结构,在项目中,我们有个控制所有界面的 main.py, 它负责控制整个项目的运行流程与界面切换,比如最开始运行项目要展示登陆界面,当点击“注册账号”时就要控制注册界面取代登陆界面。

代码结构

控制各界面展现的是项目中的 Register_Pane.py(注册界面)、Login_Pane.py(登陆界面)、Calculate_Pane.py(功能界面),它们负责将每个界面前端布局有组件间的逻辑关系进行关联生成类,通过在 main.py 中建立实例具体展现。

此外,因为项目开发中采用了 QtDesigner,所以会有 resource 文件夹中的 UI 文件以及图片素材等,相应的 *.ui 文件也都有对应的 py 文件来控制布局等。

项目编写过程

在我们对项目有了大致思路后,整个项目编写过程大致可以分为三个阶段:

  1. 按页面使用 QtDesigner 绘制 UI 界面
  2. 为不同界面建立相应的 class 类
  3. 在主代码中导入类实例化通过流程进行控制

注意,这里在设计图形界面时,我们借助了 QtDesiner 工具,首先是因为它的操作方便、拖拽式操作设置可以加速设计过程,再者是因为它的设计符合 MVC 框架

❝MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。百度百科-MVC框架 ❞

通过 QtDesigner 设计生成的 .ui 文件(实质上是XML格式的文件)可以通过 pyuic5 工具转换成 .py 文件,相当于视图(View)。之后通过类的导入,我们在视图基础上添加逻辑控制构成控制器(Controller)部分。最终将前二者联系合并起来形成模型,用于最终程序代码中。

编码过程梳理

工具环境配置

根据个人计算机系统和代码编辑器来有选择地搭建,我个人是 Mac + Pycharm 下进行配置:

https://www.jianshu.com/p/c5001fc182ec

按照该教程指引,最终配置 PyRcc 时候,出现 No code object available for PyQt5.pyrcc 问题,可以将 Parameters 修改为:-m PyQt5.pyrcc_main -o _rc.py -x

注意这里的 -x 作用是在生成的 .py 代码中添加 main 可执行部分用于调试。

界面设计

以注册界面为例,按照设计,要为窗口导入背景图片,需要将图片资源导入到项目中,这里是通过 qrc 来实现。先将准备好的素材图片放到文件夹中备用。

首先启动 QtDesigner 新建 Widget

设置背景图

在生成的窗口界面中我们要为窗口添加背景图:右键单击选择 Change styleSheet 选项:

点击 Add Resource ,在 Select Resource 界面中点击铅笔按钮,进入到 Edit Resources,点击左下角新建按钮:

弹出的窗口中输入新建的 resource 名字并存储,接下来选中 source.qrc 点击下方添加按钮:

输入 Prefix/Path 名字然后点击 OK,之后点击下方添加文件按钮:

找到自己准备的背景图片,添加完成后如图,点击 OK:

继续点击 ok,直到回到 Edit Style Sheet 界面。此时可以在该图片路径前手动添加 border-image: 等属性,或者全部删掉,点击 Add Resource 右侧下拉三角,选择 border-image 再选择到我们刚添加的图片,最终修改如下:

点击 ok,便可看到新建的 widget 界面背景图已经设置好了:

此外,当向界面内拖拽按钮时,会发现每个按钮也被设置了背景图,这时,再次点到编辑样式窗口,为界面样式添加限定:

添加控件

根据预先设计,向界面中拖拽按钮 Push Button、输入框 Line Edit 等控件,通过样式调整逐步弄成喜欢的样子:

调整控件位置、样式等:

保存 ui 文件

最终将界面保存:

至此,我们得到了页面布局 register.ui 文件。

ui 文件转 py 文件

按照我们之前在 pycharm 中的配置,在 pycharm 中打开我们新生成的文件夹,找到 register.ui 文件,右键 External Tools 找到自己添加的 PyUic 工具点击:

接下来文件夹内会自动生成 register.py 文件,它就是由 ui 界面直接转化来的布局文件,因为我们添加的转化指令中有 -x, 该代码最下方有如下部分:

if __name__ == "__main__":    import sys    app = QtWidgets.QApplication(sys.argv)    Form = QtWidgets.QWidget()    ui = Ui_Form()    ui.setupUi(Form)    Form.show()    sys.exit(app.exec_())    

这也意味着我们可以直接运行该代码查看效果,但此刻我们运行会导致报错:ModuleNotFoundError: No module named 'source_rc'

是的,我们还没有将图片等素材资源导入。

qrc 文件转 py

类似刚步骤,这次对 source.qrc 文件采用配置的 PyRcc 工具:

之后便可得到 source_rc.py,它相当于把我们之前导入的所有图片素材全部以二进制的形式写入到该 py 代码中。

注意,该过程中可能由于添加的图片素材过多、过大,会导致 pycharm 提示超出 xxx MB 限制,该问题可以通过设置 PyCharm 读取超大文件限制来解决,或者如果不做修改,控制图片素材不超限。

相关 Pycharm 设置可参考:

https://www.cloudbility.com/club/7472.html

测试 register.py

此时,可以运行 register.py 得到单个注册页面样式的展示,比如刚我们在背景图上只加了几个按钮,没有继续做样式调整,此时通过 ui 生成的 py 和 qrc 生成的 py,运行 register.py 便可得到如下界面:

样式设计完善之后,便能得到最终版效果。

添加控制模块

注意,目前我们的 register.py 是由 register.ui 直接转化来的,倘若我们之后对 ui 进行修改调整,那么就会新生成 register.py,覆盖掉我们在 register.py 中的修改。换言之,目前的 register.py 相当于只是个界面文件,并不适合向其中直接添加功能逻辑代码,我们需要新建个 py 文件,导入 register.py 界面,再对其界面中的按钮、输入框等进行相应功能的控制和添加。

为了展示功能效果,我们在上图只有五个按钮和背景图的 register.ui 中为最下方的按钮添加个点击功能。

用 QtDesigner 打开 register.ui,点击上方菜单栏中的 Edit - Edit Signal/Slots 进入编辑信号/槽模式,该模式下点击界面中按钮往外拉出如下效果:

在弹出的窗口中选择点击事件 clicked(),点击右侧的 Edit... 编辑个自定义信号比如 test(),将 clicked() 与 test() 绑定

完成上述操作,保存。这时我们的 register.ui 就会更新,回到 Pycharm,重新将 ui 文件转化为 py 文件,运行 register.py 会得到如下提示信息:

AttributeError: 'QWidget' object has no attribute 'test'

这就表明我们刚添加的 test 信号已经生效了,但代码检测不到 test 究竟要做什么所以报错。

刚我们也说了,register.py 不适合编辑功能,那么我们要新建个 py 文件来告诉代码 test 究竟要做什么。为了统一名字和格式,我们建立个 Register_Pane.py:

from PyQt5.Qt import *from register import Ui_Form

class RegisterPane(QWidget,Ui_Form):    def __init__(self):        super().__init__()        self.setAttribute(Qt.WA_StyledBackground, True)        self.setupUi(self)
    def test(self):        print("Hello World")


if __name__ == '__main__':    import sys
    app = QApplication(sys.argv)
    window = RegisterPane()    window.show()    sys.exit(app.exec_())

将该代码文件放到与 register.py 相同的文件夹内,可以从代码中看出该代码先从 register.py 中导入了 Ui_Form 类,在其中又定义了 test 方法,也就实现了将界面页面与功能模块的绑定。

此时运行 Register_Pane.py 点击最下方的按钮,就会看到打印 Hello World,实现了图形界面中点击按钮实现功能的简单演示。

编写 main.py

注意刚我们编号的 Register_Pane.py 中只是定义了一个 Regisrter_Pane 类,从中实现注册界面和功能的绑定,现在除了注册界面还有登陆界面,类似地也要有 Login_Pane.py 等,最终其实需要一个统筹各界面,根据操作流程来处理各界的程序代码,也就是这里我们需要的 main.py

由于目前我们只有 Register_Pane, 我们就只在 main.py 中控制该界面:

from Register_Pane import RegisterPanefrom PyQt5.Qt import *

if __name__ == '__main__':    import sys    app = QApplication(sys.argv)
    # 注册面板的创建    register_pane = RegisterPane()    register_pane.show()
    sys.exit(app.exec_())

至此,我们便实现了对于注册页面的 MVC 架构,之后要做的便是相似的流程完成对登陆界面、功能界面的代码文件。最终各个界面的交互、跳转,写在 main.py 中加以控制。

知识点梳理

后续实现过程

在刚我们简单展示的基础上,仍需对界面中各种控件的导入、修改样式、布局设计等;

同时界面设计完,在 *_Pane.py 中进行功能与页面绑定时,也要设计好方法函数参数传递等,这些需要通过 PyQt5 中信号/槽的连接以及自定义信号等;

最终在 main.py 中处理各个界面的交互,也是通过在 Pane 类中定义自定义信号,并在类的方法中将信号通过 emit 发出;最终在 main.py 中会检测各类实例的信号,若检测到,则触发新的槽函数实现不同界面的交互与切换。

知识点梳理

接下来以思维导图的形式梳理编码过程涉及到的各个知识点:

宏观GUI编程

GUI编程

PyQt5 学习指导建议

指导建议

QtDesigner 引导

QtDesigner

信号与槽

信号与槽

综合案例

综合案例

经验分享

PyQt5 使用经验

本篇是因为工作需要,上周跟着学了一周的 PyQt5 教程,仿着课程里的案例一行行代码敲出来的。相比之前自己摸索着去用 PyQt5 编写计算器界面,此次学习最明显的提升是 MVC 框架应用再配合面向对象的思想将整个项目给划分成不同模块。

自学 Python 编码时多数情况下几个 py 文件就能把任务搞定了;但涉及到大型的工程,都要有合理的架构和相互直接的交互联系,这个自己摸索还挺难接触的,这可能也是很多网课所能带给我们的引导和经验传授吧。

文中展示的案例代码在最后的功能模块计算器部分还没完成,登陆和注册界面基本完善了

本文分享自微信公众号 - TTTEED(TEDxPY),作者:TED

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 怎么用Python初步实现页面对象和测试用例的分离?举个登录的栗子

    有的情况下需要滚动滚动条,有的情况下不需要滚动也可以操作。现在只是判断能不能找得到它,存不存在,并不是判断我要进行点击等各种操作。只是看它存不存在,有没有,可不...

    清菡
  • python3百度指数抓取 前言:代码在我的github上面:

    哥那么叼的人怎么会被他吓到,于是乎花了零零碎碎加起来大约2天半搞定,在此鄙视一下土福

    机器学习和大数据挖掘
  • python3百度指数抓取

    分类:python 作者:TTyb文章发表于 2016-11-12 百度指数抓取,再用图像识别得到指数前言: 土福曾说,百度指数很难抓,在淘宝上面是20块1个关...

    企鹅号小编
  • 使用python编写一个登录接口

    py3study
  • 3道TMD热门数据分析面试题,我们帮你解了

    导读:本文通过几道TMD面试题介绍一下如何使用窗口函数。涉及知识点有用于排序的窗口函数、用于用户分组查询的窗口函数、用于偏移分析的窗口函数,每种会通过一道面试题...

    华章科技
  • 如何使用Python自动登陆视频会议

    嗯,我们都知道Zoom是一个视频会议应用程序,它允许我们参加/主持会议。由于新冠的情况,视频会议应用的使用也急剧增加,这成为了一种新的常态,有时这些连续的在线课...

    HuangWeiAI
  • 使用 Python 全栈实现桌面图形程序的用户认证

    使用 Python 编写桌面图形界面程序之后,我们一般是直接使用 Pyinstaller 之类的工具打包成二进制文件,然后提供下载供用户使用。

    州的先生
  • PyQt5 GUI应用程序工具包入门(2)

    下面我们从一个简单的登录对话框来了解PyQt5的开发过程。 PyQt5支持两种界面开发方式:一种是在QtDesigner中设计界面,各种控件直接通过拖动添加;...

    Python中文社区
  • 宝塔面板忘记密码 linux 解决方式

    问题描述:在云服务器重装完系统的时候,想要登陆宝塔控制面板,发现怎么也登不上,然后想着注册呗,就会出现下面这个问题,将用户名和密码填写之后,哪个按钮验证一直点不...

    meihuasheng
  • Centos下堡垒机Jumpserver V3.0环境部署完整记录(1)-安装篇

    Jumpserver是一款由python编写, Django开发的开源跳板机/堡垒机系统, 助力互联网企业高效 用户、资产、权限、审计 管理。jumpserve...

    洗尽了浮华
  • 用Python实现一个最新QQ办公版(TIM)的登录界面

    最近,QQ的办公版本——TIM进行了一次更新升级。本次更新升级大幅修改了界面的样式,看起来更加的清爽、简洁和高效了。

    州的先生
  • Python + Selenium 自动发布文章(一):开源中国

      还是说说出这个系列的起因吧。之前写完或是修改了Markdown文章,我还分别需要在多个平台进行发布或是更新维护这些内容,这些平台目前包括我的博客、简书、开源...

    happyJared
  • 【老金知道】python学习(三)用python模拟登陆ZABBIX(GRAFANA)的几种方式

    python学习(三)用python模拟登陆ZABBIX(GRAFANA)的几种方式

    Zabbix
  • Python模块:tkinter

    最近我同学在做一个聊天程序,服务器已经全部完成了,客户端也已经使用CMD版本的进行过测试了,为了做的好一点,需要弄一个图形用户界面的客户端,Python编写图形...

    不可言诉的深渊
  • Python 数据库操作

    数据库是应用程序保存数据的一个重要手段,因此学习python语言的数据库操作也是非常重要的内容。今天我们就来分享pymysql模块的使用。

    ZackSock
  • 数分面试必考题:窗口函数

    窗口函数的主要作用是对数据进行分组排序、求和、求平均值、计数等。对于数据从业者来说, sql窗口函数在实际工作中具备非常广泛的应用场景。可以大大的提高数据查询效...

    Python数据科学
  • 抖音面试题:送你一个万能模板,要吗?

    在《拼多多面试题:如何找出连续出现N次的内容?》里讲过遇到“连续问题”如何解决,并送出了一个万能模板,模板使用的是窗口函数解决连续问题。

    猴子数据分析
  • 反爬虫机制和破解方法汇总

    什么是爬虫和反爬虫? 爬虫:使用任何技术手段,批量获取网站信息的一种方式。 反爬虫:使用任何技术手段,阻止别人批量获取自己网站信息的一种方式。 ? 常见的反...

    Python中文社区
  • 知识点讲解四:selenium教程

    环境: Python3.6.5 编译器: Sublime Text 3 联系方式: ke.zb@qq.com 第三方库: seleniu

    K同学啊

扫码关注云+社区

领取腾讯云代金券