PyQt5设计简单登录界面

704 阅读3分钟

本文已参与[新人创作礼]活动,一起开启掘金创作之路。

本文主要内容,使用PyQt5设计一个简单登录界面,并实现登录页面跳转。

本文登录界面设计主要流程:1.通过Pyqt5中的QtDesigner绘制一个登录界面,主要有用户名,密码和登录按钮;2.使用python为界面添加动作,实现一个登录功能

使用Pyqt5设计页面时候,有两种方式来绘制页面:一种是通过代码,另一种是通过Qtdesigner这种可视化的界面来通过内置模块搭积木。Qtdesigner界面如下:

界面.png 这是一个绘制完成的登录界面。

1.Qtdesigner设计登录界面

详细流程如下所示:

(1)打开Qtdesigner后会出现以下界面,选择widget创建一个空白文件。

微信截图_20220904150839.png

空白界面如下所示:

微信截图_20220904150930.png

在旁边有一个widget box里面放着我们需要用的模块。buttons 、input widgets 和display widgets这两个是我们主要使用的。buttons中的push button则是我们要使用的按钮,同样是点击后拖出来到那个界面上就行。

微信截图_20220904151029.png

input widgets中line edit是文本框,账户名和密码都要在这里输入,直接点击后拖出来到空白界面就可以使用了。

微信截图_20220904151112.png

display widgets中的label就是要显示“账户”和“密码”这两个字给用户看的,

微信截图_20220904151210.png

拖拽完成后界面如下,密码我们需要单独设置,不能作为普通的文本框,在属性编辑器里面找到属性-echomode,点击他的-值-,选择password。

微信截图_20220904151305.png 最后保存为login.ui文件,再创建一个任意的界面,我创建了一个welcome。

2.添加动作

在这里推荐一个关于pyqt5的一个课程,先说明,我和这位老师完全不认识,我和这位老师没有任何关系啊,也只是学习了这位老师发布的课程。我是刚开始学习pyqt5,在B站上看见了这个课程,我感觉很有用,个人很喜欢,这里也其实就是这个课程的一篇学习笔记。详细的代码可以去看这位老师的课程【PyQt5 快速入门】 www.bilibili.com/video/BV1LT… ,老师的讲义在这里doc.itprojects.cn/0001.zhishi… 这个讲义和B站视频是配套的。

1.加载ui文件

python加载ui文件有两种方式,一种是先编译再加载,一种是直接加载,各有优缺点,我们选择的简单的直接加载。

from PyQt5.QtWidgets import QApplication
from PyQt5 import uic

app = QApplication(sys.argv)

ui_login = uic.loadUi("login.ui")

ui_login.show()
app.exec()


核心就是uic.loadui和ui_login.show其他都是固定格式,可以不用管。

2.读取用户名和密码并添加动作

代码如下,核心就是获取输入框 self.user_name_qwidget = self.ui.lineEdit然后通过text()这个方法来得到文本框里面的文本。.clicked.connect函数给按钮绑定动作,self.login_btn.clicked.connect(self.login),点击这个登录按钮后执行login这个函数,验证密码和用户名后关闭login界面打开welcome界面实现跳转,否则输出一个‘error’。

def init(self):
    self.ui = uic.loadUi('login.ui')
    self.welcome = uic.loadUi('welcome.ui')

    self.user_name_qwidget = self.ui.lineEdit  # 用户名输入框
    self.password_qwidget = self.ui.lineEdit_2  # 密码输入框
    self.login_btn = self.ui.pushButton  # 登录按钮
    #绑定信号与槽函数
    self.login_btn.clicked.connect(self.login)
    

def login(self):
    user_name = self.user_name_qwidget.text()
    password = self.password_qwidget.text()
    if user_name == "admin" and password == "123456":
        self.ui.close()
        self.welcome.show()
    else:
        print('error!!!')