python3GUI--仿崩坏三二次元登录页面（附下载地址） By:PyQt5

文章目录

一．前言
二．预览
三．实现方案
- 1.实现原理
- - 1.PyQt5
  - 2. 具体实现
- 2.UI设计
- - 1.UI组件化、模块化
  - 2.UI设计风格思路
- 3.项目代码结构
- 4.使用方法
- 3.代码分享
- - 1.支持跳转网页的QLabel组件
  - 2.三角形ICON按钮
四．总结

大小：33.3 M，软件安装包放在了这里!

一．前言

大家好啊！本次给大家带来我开发的仿崩坏三web页面的登录页面，使用的技术是PyQt5，最后打包软件制作成了安装包，欢迎大家体验！

二．预览

这就是我们的软件主体了，整体采用一个背景，前景是不同方式的登录方案，主要分为短信登录、密码登录、扫码登录，三个页面都实现了，这里只举一个例子来展示界面效果。

在这里插入图片描述

三．实现方案

1.实现原理

1.PyQt5

PyQt5是一个Python库，它提供了对Qt5图形界面（GUI）应用程序框架的访问。Qt是一个跨平台的应用程序框架，它允许开发者创建非常复杂的GUI应用程序。
PyQt5是由Phil Thompson 开发的，是对Qt应用程序框架的Python包装。它是PySide的一个可选的API，PySide是它的另一个版本，但在某些情况下，PyQt5的性能更好。

2. 具体实现

通过使用PyQt5配合python的方案完成GUI界面的设计，使用虚拟环境打包的方式缩小打包体积，最后使用安装程序将我们的软件做成安装包。

2.UI设计

1.UI组件化、模块化

本次的UI完全是使用手写代码的方式，所有组件都是单独的类，均可以进行单元模块测试，说具体一点，我们的最后软件效果就是一架飞机，每个模块就是个个组件，这些组件可以是特殊的也可以是复用的，模块的复用保证了软件整体的风格一致性，更好的实现了UI上的“高内聚，低耦合”。

这里我们一个组件来举例子，登录面板：
这些组件我们是能够单独调试测试的
在这里插入图片描述

2.UI设计风格思路

有了好的设计才能落实软件GUI的开发，本次参考了WEB端的网页，在网页端下载相关资源最后通过硬编码放置到项目中，这样我们就能够对外隐藏相关资源文件。

这里给大家看下我的资源文件列表：

在这里插入图片描述

3.项目代码结构

这里认为读者已经拿到本项目的源代码，
我们所有的源代码都在src/目录下
为了生成qrc转出的.py方便一些，这里仍然写了自定义的脚本来一键生成资源数据
我们主要的代码量在widgets/目录下，这里包括：基础组件、自定义的组件、页面组件、特殊组件。

在这里插入图片描述

4.使用方法

通过安装程序之后，创建桌面图标，双击打开后软件会全屏，如果需要关闭的话，直接点击登录区域的X即可。
在这里插入图片描述

3.代码分享

这里和大家分享我的代码

1.支持跳转网页的QLabel组件

class HyperlinkLabel(QLabel):"""封装了支持超链接和文本交互的 QLabel。"""def __init__(self, parent=None):super().__init__(parent)self.setWordWrap(True)self.setOpenExternalLinks(True)  # 允许点击链接跳转到浏览器self.setTextInteractionFlags(Qt.TextBrowserInteraction)  # 支持文字交互def set_html_text(self, html_text):"""设置 HTML 格式的文本。"""self.setText(html_text)

2.三角形ICON按钮

class TriangleIconButton(QPushButton):def __init__(self, *args, **kwargs):super(TriangleIconButton, self).__init__(*args, **kwargs)self.param_init()self.ui_init()def param_init(self):self.icon = ""self.qta_icon = ""self.size_factor = 1def ui_init(self):self.setFixedSize(35, 35)  # 设置按钮的大小self.setCursor(Qt.PointingHandCursor)self.setStyleSheet("border: none;")  # 去掉边框def set_icon(self, icon_name: str):"""设置按钮的图标。:param icon_name: 图标名称，支持 QtAwesome 图标的名称，如 'fa5s.triangle'。"""self.icon = icon_nameself.qta_icon = qta.icon(icon_name, color="#47B1F5")self.update()  # 更新按钮界面，以便重新绘制图标def paintEvent(self, event):super(TriangleIconButton, self).paintEvent(event)if not self.qta_icon: returnpainter = QPainter(self)# 设置为透明背景painter.setRenderHint(QPainter.Antialiasing)painter.setOpacity(1)  # 保证图标不透明# 通过 QtAwesome 渲染设置的图标self.qta_icon.paint(painter, QRect(0, 0, self.width(), self.height()), Qt.AlignCenter)# 画一个白色遮罩，覆盖右下角的四分之一区域rect_width = self.width() // self.size_factorrect_height = self.height() // self.size_factormask_polygon = QPolygon([QPoint(self.width() - rect_width, self.height()),  # 左下角（右下四分之一区域的左上角）QPoint(self.width(), self.height() - rect_height),  # 右上角QPoint(self.width(), self.height())  # 右下角])painter.setBrush(QColor(255, 255, 255))  # 设置白色遮罩painter.setPen(Qt.transparent)  # 不显示边框painter.drawPolygon(mask_polygon)  # 绘制白色三角形遮罩painter.end()