使用 PyQt5 的 Qt Designer 工具设计登录注册页面

使用 PyQt5(PySide2)+SQLAlchemy 做一个登录注册页（一）

本文将介绍自己用 PyQt5+SQLAlchemy 做的一个登录注册页，使用邮箱接收验证码，本文介绍是前后端未分离的实现方式，后续将出一个前后端分离的，你可以将 PyQt5 改为 PySide2 以获得更宽松的开源协议

本文由于涉及到的代码较多，将会是一个系列，会有多篇文章

系列文章索引

必要说明

使用的环境 requirements.txt

# Python3.8.10 x32
# Windows10 x64
PyQt5
pyqt5-tools
PyMySQL~=1.1.0
sqlalchemy~=2.0.25
bcrypt~=4.1.2

项目结构

--- QtLoginRegistration
  |--- static                       # 资源，如图片、样式等
     |--- images
        |--- testing_x48.ico
        |--- testing_x256.png
        |--- testing_x512.svg
  |--- uis
     |--- __init__.py
     |--- LoginRegisterEmail.ui     # 登录注册页
     |--- MianWindow.ui             # 系统主页
  |--- requirements.txt

设计登录注册页面

打开 Qt Designer工具，（工具位置在 Python 安装位置，如果是虚拟环境则在虚拟环境位置，如我的虚拟环境位置\QtLoginRegistration\.venv\Lib\site-packages\qt5_applications\Qt\bin\designer.exe，可右键添加到桌面快捷方式）

最终效果：

登录页
注册页
忘记密码页

第1步：设计登录页

设计登录页

新建 Widget
添加组件(x1表示数量1)
- Frame x2
- StackedWidget x1
- PushButton x4
- Label x3
- LineEdit x2
- CheckBox x1
- Vertical Line x1
- Horizontal Spacer x1
摆放位置并适当调整顺序，如下图：
修改显示的文字,和输入提示
布局并添加标题和适当调整大小
- 分别选中右侧对象树 QWidget QFrame QStackedWidget,然后使用栅格布局
- 设置 QWidget大小
- 设置QWidget 标题
- 密码输入框，将模式切换为Password
在左侧QFrame 中的 Qlabel中添加图片，并设置垂直居中（图片任意，宽高建议256px），图片下载可点这里去选择，不过需要注意的是，此处后续将会换成使用资源的形式，目前是暂时使用文件的方式
修改组件名称（建议修改）
设置左侧QFrame 最大宽度，（看着舒服即可）