PyQt5 开发注册、登陆和功能界面案例与知识点梳理

最近在学习 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 下进行配置：

Mac 下 PyQt5 开发环境的搭建

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