我与PyQt5有个约会系列教程（11）：神奇的登录界面小程序

最新推荐文章于 2023-06-12 18:12:08 发布

樊晓鑫

最新推荐文章于 2023-06-12 18:12:08 发布

阅读量402

点赞数

分类专栏： PyQt5

本文链接：https://blog.csdn.net/zhuzipan/article/details/107202014

版权

PyQt5 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

写在最前面

上节课，我们介绍了对话框等知识点的大体概括，相信大家已经掌握的差不多了。

接下来呢，我们综合以前章节所学，来综合运用，写一个登录界面小程序。

登陆界面是大家常用的一种习惯方式，例如QQ、微信、淘宝、支付宝、网银、美团、京东、饿了么等等，耳详能熟的软件或者网站，你都能看登陆界面，各式各样，五花八门，但他们都具备一个共同特点，就是保护个人隐私信息。所以别看登陆界面简单不咋地，却有很大的学问。接下来，就让我们来研究一下登陆界面。

好的，那我们开始吧。

目录

第一步，登录界面布局

第二步，完善单行文本输入框和按钮功能

第三步，完善注册界面布局及功能

第四步，整合登录界面和注册界面

最后一步，小结

第一步，登录界面布局

首先完成登录界面布局，请看下方代码：

# -*- coding: utf-8 -*-

#--------------------------------------------------------------------------------
# 导入相关的包
#--------------------------------------------------------------------------------
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QLineEdit, QPushButton, \
    QGridLayout, QVBoxLayout, QHBoxLayout
from PyQt5.QtGui import QIcon


class Example(QWidget):
    def __init__(self):
        super(Example, self).__init__()
        self.initUI()
    
    def initUI(self):   
        #------------------------------------------------------------------------------
        # 界面窗口标题、图标、大小
        #------------------------------------------------------------------------------
        self.setWindowTitle('我与PyQt5有个约会 -- 登陆界面')
        self.setWindowIcon(QIcon("myico.ico"))
        self.setGeometry(600,300,520,200)
        
        #------------------------------------------------------------------------------
        # 增添控件
        #------------------------------------------------------------------------------ 
        self.user_label = QLabel('用户名:', self)
        self.pwd_label = QLabel('密   码:', self)
        self.user_line = QLineEdit(self)
        self.pwd_line = QLineEdit(self)
        self.login_button = QPushButton('登录', self)
        self.signin_button = QPushButton('注册', self)
        
        #------------------------------------------------------------------------------
        # 布局
        #------------------------------------------------------------------------------ 
        self.grid_layout = QGridLayout()
        self.h_layout = QHBoxLayout()
        self.v_layout = QVBoxLayout()
 
        self.layout_init()
 
    def layout_init(self):
        self.grid_layout.addWidget(self.user_label, 0, 0, 1, 1)
        self.grid_layout.addWidget(self.user_line, 0, 1, 1, 1)
        self.grid_layout.addWidget(self.pwd_label, 1, 0, 1, 1)
        self.grid_layout.addWidget(self.pwd_line, 1, 1, 1, 1)
        self.h_layout.addWidget(self.login_button)
        self.h_layout.addWidget(self.signin_button)
        self.v_layout.addLayout(self.grid_layout)
        self.v_layout.addLayout(self.h_layout)
 
        self.setLayout(self.v_layout)
 
 
if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = Example()
    demo.show()
    sys.exit(app.exec_())

程序首先将窗口的宽设为520，长设为200。

接着再实例化了几个控件：两个文本标签、两个单行文本输入框和两个按钮。

然后搭配使用网格布局管理器、水平布局管理器和垂直布局管理器来完成整个界面的布局。

这里有一点需要注意一下，我把布局管理专门放在了一个函数中layout_init()，然后只用在初始化函数中加上layout_init()中就行。把对不同控件的操作分开来放在相应的函数中，这样写不仅可以让代码更加清晰明了，也方便日后维护。

此时程序运行截图如下：

第二步，完善单行文本输入框和按钮功能

第二步要完成的结果截图如下：

单行文本输入框中有浅灰色的提示文字，登录按钮刚开始无法点击，只能等两个输入框中都有文本输入的时候才可以进行点击。

所以呢，首先对输入框功能进行完善。

#------------------------------------------------------------------------------
# 可编辑文本控件与事件绑定, 对输入框功能进行完善
#------------------------------------------------------------------------------
def line_edit_init(self):
    self.userQLineEdit.setPlaceholderText('请输入用户名')
    self.pwdQLineEdit.setPlaceholderText('请输入密码')
     
    self.userQLineEdit.textChanged.connect(self.check_input_func)
    self.pwdQLineEdit.textChanged.connect(self.check_input_func)

在未输入前，我们有会看到输入框上就已经有了一行浅灰色的提示文字。

就像下面这样子：

这种功能就是通过setPlaceholderText()方法来实现的。

在这里还进行了信号和槽的连接，将QLineEdit的textChanged()信号连接到一个自定义的槽self.check_input_func上。

textChanged()信号会在输入框中文本发生变化的时候发出, 所以槽函数的任务就是判断两个输入框是否都有文字了：

#------------------------------------------------------------------------------
# 登录按钮有效或者无效的判断
#------------------------------------------------------------------------------ 
def check_input_func(self):
    if self.userQLineEdit.text() and self.pwdQLineEdit.text():
        self.loginQPushButton.setEnabled(True)
    else:
        self.loginQPushButton.setEnabled(False)

如果用户框和密码框都有文本(通过text()方法获取输入框文本)，那就使登录按钮可用(setEnabled(True))，否则登录按钮不可用。

接下来对按钮进行完善：

#------------------------------------------------------------------------------
# 按钮控件与事件绑定
#------------------------------------------------------------------------------
def qpushbutton_init(self):
    self.loginQPushButton.setEnabled(False)

使刚开始显示的登录按钮不可用，只有等账号框和密码框都有文本的时候才能用。

当我们点击登录按钮的时候，账号框和密码框都有文本了。

那点击后肯定是要验证账号密码是否正确：

#------------------------------------------------------------------------------
# 按钮控件与事件绑定
#------------------------------------------------------------------------------
def qpushbutton_init(self):
    self.loginQPushButton.clicked.connect(self.check_login_func)
    self.loginQPushButton.setEnabled(False)

所以我们将登录按钮的clicked信号和一个用于检查账号密码是否正确的自定义槽函数连接起来：

首先我们在程序的最开始处定义一个全局变量USER_PWD：

#------------------------------------------------------------------------------
# 全局变量
#------------------------------------------------------------------------------
USER_PWD = {'root':'123456'}

该字典的键'root'就是当作账号，值‘123456’就当作密码。

然后定义检查账号密码的函数：

#------------------------------------------------------------------------------
# 登录功能的验证
#------------------------------------------------------------------------------
def check_login_func(self):
    if USER_PWD.get(self.userQLineEdit.text()) == self.pwdQLineEdit.text():
        QMessageBox.information(self, '提示', '登陆成功!')
    else:
        QMessageBox.critical(self, '错误提示', '用户名或者密码错误!')
     
    self.userQLineEdit.clear()
    self.pwdQLineEdit.clear()

将账号框的文本当作get()的参数来获取值，然后跟密码框的文本进行比较，若相同则显示信息框提示登录成功，否则显示账号或密码错误。最后无论成功还是失败，都会用clear()方法来清空账号框和密码框。

第二步基本实现的程序功能效果展示如下：

源代码参考如下：

# -*- coding: utf-8 -*-

#--------------------------------------------------------------------------------
# 导入相关的包
#--------------------------------------------------------------------------------
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QLineEdit, QPushButton, \
    QGridLayout, QVBoxLayout, QHBoxLayout, QMessageBox
from PyQt5.QtGui import QIcon
from PyQt5.QtCore import *

#------------------------------------------------------------------------------
# 全局变量
#------------------------------------------------------------------------------
USER_PWD = {'root':'123456'}

class Example(QWidget):
    def __init__(self):
        super(Example, self).__init__()
        self.initUI()
    
    def initUI(self):   
        #------------------------------------------------------------------------------
        # 界面窗口标题、图标、大小
        #------------------------------------------------------------------------------
        self.setWindowTitle('我与PyQt5有个约会 -- 登陆界面')
        self.setWindowIcon(QIcon("myico.ico"))
        self.setGeometry(600,300,520,200)
        
        #------------------------------------------------------------------------------
        # 增添控件
        #------------------------------------------------------------------------------ 
        self.userQLabel = QLabel('用户名:', self)
        self.pwdQLabel = QLabel('密   码:', self)
        self.userQLineEdit = QLineEdit(self)
        self.pwdQLineEdit = QLineEdit(self)
        self.loginQPushButton = QPushButton('登录', self)
        self.signinQPushButton = QPushButton('注册', self)
        
        #------------------------------------------------------------------------------
        # 布局
        #------------------------------------------------------------------------------ 
        self.grid_layout = QGridLayout()
        self.h_layout = QHBoxLayout()
        self.v_layout = QVBoxLayout()
        
        #------------------------------------------------------------------------------
        # 功能函数的调用
        #------------------------------------------------------------------------------ 
        self.line_edit_init()
        self.qpushbutton_init()
        self.layout_init()
    
    #------------------------------------------------------------------------------
    # 布局安排
    #------------------------------------------------------------------------------
    def layout_init(self):
        self.grid_layout.addWidget(self.userQLabel, 0, 0, 1, 1)
        self.grid_layout.addWidget(self.userQLineEdit, 0, 1, 1, 1)
        self.grid_layout.addWidget(self.pwdQLabel, 1, 0, 1, 1)
        self.grid_layout.addWidget(self.pwdQLineEdit, 1, 1, 1, 1)
        self.h_layout.addWidget(self.loginQPushButton)
        self.h_layout.addWidget(self.signinQPushButton)
        self.v_layout.addLayout(self.grid_layout)
        self.v_layout.addLayout(self.h_layout)
 
        self.setLayout(self.v_layout)

    #------------------------------------------------------------------------------
    # 可编辑文本控件与事件绑定, 对输入框功能进行完善
    #------------------------------------------------------------------------------
    def line_edit_init(self):
        self.userQLineEdit.setPlaceholderText('请输入用户名')
        self.pwdQLineEdit.setPlaceholderText('请输入密码')
     
        self.userQLineEdit.textChanged.connect(self.check_input_func)
        self.pwdQLineEdit.textChanged.connect(self.check_input_func)
        
    #------------------------------------------------------------------------------
    # 登录按钮有效或者无效的判断
    #------------------------------------------------------------------------------ 
    def check_input_func(self):
        if self.userQLineEdit.text() and self.pwdQLineEdit.text():
            self.loginQPushButton.setEnabled(True)
        else:
            self.loginQPushButton.setEnabled(False)
        
    #------------------------------------------------------------------------------
    # 按钮控件与事件绑定
    #------------------------------------------------------------------------------
    def qpushbutton_init(self):
        print('self.loginQPushButton.clicked.connect(self.check_login_func)')
        self.loginQPushButton.clicked.connect(self.check_login_func)
        self.loginQPushButton.setEnabled(False)
        
    #------------------------------------------------------------------------------
    # 登录功能的验证
    #------------------------------------------------------------------------------
    def check_login_func(self):
        if USER_PWD.get(self.userQLineEdit.text()) == self.pwdQLineEdit.text():
            QMessageBox.information(self, '提示', '登陆成功!')
        else:
            QMessageBox.critical(self, '错误提示', '用户名或者密码错误!')
     
        self.userQLineEdit.clear()
        self.pwdQLineEdit.clear()

#------------------------------------------------------------------------------
# 登录功能的验证
#------------------------------------------------------------------------------
if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = Example()
    demo.show()
    sys.exit(app.exec_())

第三步，完善注册界面布局及功能

接下来就是要完善注册按钮这个功能，这里我们想的是点击这个按钮后，会出现一个新的界面用于注册，即下方截图所示：

可以看出该界面一共是由三个QLabel、三个QLineEdit和一个QPushButton组成的，那首先就来完成界面布局：

# -*- coding: utf-8 -*-

#--------------------------------------------------------------------------------
# 导入相关的包
#--------------------------------------------------------------------------------
import sys
from PyQt5.QtWidgets import QApplication, QLabel, QLineEdit, QPushButton, \
    QGridLayout, QVBoxLayout, QHBoxLayout, QDialog
from PyQt5.QtGui import QIcon


class SigninPage(QDialog):
    def __init__(self):
        super(SigninPage, self).__init__()
        self.initUI()
    
    def initUI(self):  
        #------------------------------------------------------------------------------
        # 界面窗口标题、图标、大小
        #------------------------------------------------------------------------------      
        self.setWindowTitle('我与PyQt5有个约会 -- 注册界面')
        self.setWindowIcon(QIcon("myico.ico"))
        self.setGeometry(600,300,450,200)
        
        #------------------------------------------------------------------------------
        # 增添控件
        #------------------------------------------------------------------------------         
        self.signinUserQLabel = QLabel('用户名:', self)
        self.signinPwdQLabel = QLabel('输入密码:', self)
        self.signinPwd2QLabel = QLabel('再次输入密码:', self)
        self.signinUserQLineEdit = QLineEdit(self)
        self.signinPwdQLineEdit = QLineEdit(self)
        self.signinPwd2QLineEdit = QLineEdit(self)
        self.signinQPushButton = QPushButton('注册', self)
        
        #------------------------------------------------------------------------------
        # 布局
        #------------------------------------------------------------------------------ 
        self.grid_layout = QGridLayout()
        self.all_v_layout = QVBoxLayout()
 
        self.layout_init()
        
    #------------------------------------------------------------------------------
    # 布局安排
    #------------------------------------------------------------------------------
    def layout_init(self):
        self.grid_layout.addWidget(self.signinUserQLabel, 0, 0, 1, 1)
        self.grid_layout.addWidget(self.signinUserQLineEdit, 0, 1, 1, 1)
        self.grid_layout.addWidget(self.signinPwdQLabel, 1, 0, 1, 1)
        self.grid_layout.addWidget(self.signinPwdQLineEdit, 1, 1, 1, 1)
        self.grid_layout.addWidget(self.signinPwd2QLabel, 2, 0, 1, 1)
        self.grid_layout.addWidget(self.signinPwd2QLineEdit, 2, 1, 1, 1)
 
        self.all_v_layout.addLayout(self.grid_layout)
        self.all_v_layout.addWidget(self.signinQPushButton)
 
        self.setLayout(self.all_v_layout)

#------------------------------------------------------------------------------
# 登录功能的验证֤
#------------------------------------------------------------------------------
if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = SigninPage()
    demo.show()
    sys.exit(app.exec_())

这里新写一个类，并继承于QDialog。

QDialog就是指对话框，我们平时在软件中点击“打开”或“另存为”而出现的文件对话框就是其中一种。

首先，同样将注册按钮设为不可用(setEnabled(False))，并且只有当三个输入框中都有文本的时候，才会启用这个按钮。原理跟之前讲的一样：

#------------------------------------------------------------------------------
# 可编辑文本控件与事件绑定, 对输入框功能进行完善
#------------------------------------------------------------------------------   
def line_edit_init(self):
    self.signinUserQLineEdit.setPlaceholderText('请输入用户名')
    self.signinPwdQLineEdit.setPlaceholderText('请输入密码')
    self.signinPwd2QLineEdit.setPlaceholderText('请再次输入密码')

    self.signinUserQLineEdit.textChanged.connect(self.check_input_func)
    self.signinPwdQLineEdit.textChanged.connect(self.check_input_func)
    self.signinPwd2QLineEdit.textChanged.connect(self.check_input_func)

在line_edit_init()中我们将三个输入框的textChanged()信号跟自定义的check_input_func()槽函数进行连接；

#------------------------------------------------------------------------------
# 登录按钮有效或者无效的判断
#------------------------------------------------------------------------------ 
def check_input_func(self):
    if self.userQLineEdit.text() and self.pwdQLineEdit.text():
        self.loginQPushButton.setEnabled(True)
    else:
        self.loginQPushButton.setEnabled(False)

在槽函数中我们判断三个输入框是否都有文本，有的话则将按钮启用，否则禁用；

#------------------------------------------------------------------------------
# 按钮控件与事件绑定
#------------------------------------------------------------------------------            
def qpushbutton_init(self):
    self.signinQPushButton.setEnabled(False)
    self.signinQPushButton.clicked.connect(self.check_signin_func)

然后在qpushbutton_init()中先将注册按钮设为禁用状态，然后将clicked()信号和之后自定义的check_signin_func()槽函数连接起来。因为在点击注册按钮的时候我们要对输入的文本内容进行检查，看符不符合要求；

#------------------------------------------------------------------------------
# 注册功能的实现
#------------------------------------------------------------------------------
def check_signin_func(self):
    if self.signinPwdQLineEdit.text() != self.signinPwd2QLineEdit.text():
        QMessageBox.critical(self, '错误', '两次输入的密码不一致！请重新输入......')
    elif self.signinUserQLineEdit.text() not in USER_PWD:
        USER_PWD[self.signinUserQLineEdit.text()] = self.signinPwdQLineEdit.text()
        QMessageBox.information(self, '通知', '注册成功！')
        self.close()
    else:
        QMessageBox.critical(self, '错误', '该用户名已经被注册过了！')
     
    self.signinUserQLineEdit.clear()
    self.signinPwdQLineEdit.clear()
    self.signinPwd2QLineEdit.clear()

首先判断两次密码输入框输入的文本是否一致，若不相同的话，则显示错误框提示；

当然我们还要对要注册的账号进行判断，如果在字典相对应的键，则说明该账号并没有被注册过，接着将要注册的账号和密码放进字典中，并显示信息框提示注册成功。

self.close()是指关闭对话框自身，也就是在信息框按钮被按下去关闭之后，注册界面的对话框也要一起关闭。

最后一种情况就是账号已经被注册过了，于是显示错误框来进行提示。

无论哪种情况，最后都会将三个输入框的文本清空掉。

最终的效果如下：

那么最后将self.lineedit_init()和self.qpushbutton_init()放在类的初始化函数__init__()中。

源代码如下：

# -*- coding: utf-8 -*-

#--------------------------------------------------------------------------------
# 导入相关的包
#--------------------------------------------------------------------------------
import sys
from PyQt5.QtWidgets import QApplication, QLabel, QLineEdit, QPushButton, \
    QGridLayout, QVBoxLayout, QDialog, QMessageBox
from PyQt5.QtGui import QIcon

#------------------------------------------------------------------------------
# 全局变量
#------------------------------------------------------------------------------
USER_PWD = {'root':'123456'}

class SigninPage(QDialog):
    def __init__(self):
        super(SigninPage, self).__init__()
        self.initUI()
    
    def initUI(self):  
        #------------------------------------------------------------------------------
        # 界面窗口标题、图标、大小
        #------------------------------------------------------------------------------      
        self.setWindowTitle('我与PyQt5有个约会 -- 注册界面')
        self.setWindowIcon(QIcon("myico.ico"))
        self.setGeometry(600,300,450,200)
        
        #------------------------------------------------------------------------------
        # 增添控件
        #------------------------------------------------------------------------------         
        self.signinUserQLabel = QLabel('用户名:', self)
        self.signinPwdQLabel = QLabel('输入密码:', self)
        self.signinPwd2QLabel = QLabel('再次输入密码:', self)
        self.signinUserQLineEdit = QLineEdit(self)
        self.signinPwdQLineEdit = QLineEdit(self)
        self.signinPwd2QLineEdit = QLineEdit(self)
        self.signinQPushButton = QPushButton('注册', self)
        
        #------------------------------------------------------------------------------
        # 布局
        #------------------------------------------------------------------------------ 
        self.grid_layout = QGridLayout()
        self.all_v_layout = QVBoxLayout()
        
        #------------------------------------------------------------------------------
        # 功能函数的调用
        #------------------------------------------------------------------------------ 
        self.line_edit_init()
        self.qpushbutton_init()
        self.layout_init()
        
    #------------------------------------------------------------------------------
    # 布局安排
    #------------------------------------------------------------------------------
    def layout_init(self):
        self.grid_layout.addWidget(self.signinUserQLabel, 0, 0, 1, 1)
        self.grid_layout.addWidget(self.signinUserQLineEdit, 0, 1, 1, 1)
        self.grid_layout.addWidget(self.signinPwdQLabel, 1, 0, 1, 1)
        self.grid_layout.addWidget(self.signinPwdQLineEdit, 1, 1, 1, 1)
        self.grid_layout.addWidget(self.signinPwd2QLabel, 2, 0, 1, 1)
        self.grid_layout.addWidget(self.signinPwd2QLineEdit, 2, 1, 1, 1)
 
        self.all_v_layout.addLayout(self.grid_layout)
        self.all_v_layout.addWidget(self.signinQPushButton)
 
        self.setLayout(self.all_v_layout)
 
    #------------------------------------------------------------------------------
    # 可编辑文本控件与事件绑定, 对输入框功能进行完善
    #------------------------------------------------------------------------------   
    def line_edit_init(self):
        self.signinUserQLineEdit.setPlaceholderText('请输入用户名')
        self.signinPwdQLineEdit.setPlaceholderText('请输入密码')
        self.signinPwd2QLineEdit.setPlaceholderText('请再次输入密码')
        
        self.signinUserQLineEdit.textChanged.connect(self.check_input_func)
        self.signinPwdQLineEdit.textChanged.connect(self.check_input_func)
        self.signinPwd2QLineEdit.textChanged.connect(self.check_input_func)
        
    #------------------------------------------------------------------------------
    # 登录按钮有效或者无效的判断
    #------------------------------------------------------------------------------
    def check_input_func(self):
        if self.signinUserQLineEdit.text() and self.signinPwdQLineEdit.text() and self.signinPwd2QLineEdit.text():
            self.signinQPushButton.setEnabled(True)
        else:
            self.signinQPushButton.setEnabled(False)
            
    #------------------------------------------------------------------------------
    # 按钮控件与事件绑定
    #------------------------------------------------------------------------------            
    def qpushbutton_init(self):
        self.signinQPushButton.setEnabled(False)
        self.signinQPushButton.clicked.connect(self.check_signin_func)
        
    #------------------------------------------------------------------------------
    # 注册功能的实现
    #------------------------------------------------------------------------------
    def check_signin_func(self):
        if self.signinPwdQLineEdit.text() != self.signinPwd2QLineEdit.text():
            QMessageBox.critical(self, '错误', '两次输入的密码不一致！请重新输入......')
        elif self.signinUserQLineEdit.text() not in USER_PWD:
            USER_PWD[self.signinUserQLineEdit.text()] = self.signinPwdQLineEdit.text()
            QMessageBox.information(self, '通知', '注册成功！')
            self.close()
        else:
            QMessageBox.critical(self, '错误', '该用户名已经被注册过了！')
     
        self.signinUserQLineEdit.clear()
        self.signinPwdQLineEdit.clear()
        self.signinPwd2QLineEdit.clear()

#------------------------------------------------------------------------------
# 登录功能的验证֤
#------------------------------------------------------------------------------
if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = SigninPage()
    demo.show()
    sys.exit(app.exec_())

第四步，整合登录界面和注册界面

但是此时运行程序点击登录界面上的注册按钮的话，注册界面是显示不出来的，所以我们要将登录界面注册按钮的clicked()信号和一个自定义的用来显示注册界面的槽函数连接起来：

    def initUI(self):   
        #------------------------------------------------------------------------------
        # 界面窗口标题、图标、大小
        #------------------------------------------------------------------------------
        self.setWindowTitle('我与PyQt5有个约会 -- 登陆界面')
        self.setWindowIcon(QIcon("myico.ico"))
        self.setGeometry(600,300,520,200)
        
        #------------------------------------------------------------------------------
        # 增添控件
        #------------------------------------------------------------------------------ 
        self.userQLabel = QLabel('用户名:', self)
        self.pwdQLabel = QLabel('密   码:', self)
        self.userQLineEdit = QLineEdit(self)
        self.pwdQLineEdit = QLineEdit(self)
        self.loginQPushButton = QPushButton('登录', self)
        self.signinQPushButton = QPushButton('注册', self)
        
        #------------------------------------------------------------------------------
        # 布局
        #------------------------------------------------------------------------------ 
        self.grid_layout = QGridLayout()
        self.h_layout = QHBoxLayout()
        self.v_layout = QVBoxLayout()
        
        #------------------------------------------------------------------------------
        # 功能函数的调用
        #------------------------------------------------------------------------------ 
        self.line_edit_init()
        self.qpushbutton_init()
        self.layout_init()
        
        self.signin_page = SigninPage()     # 实例化SigninPage()

首先我们在Example的初始化函数中先实例化了SigninPage；

#------------------------------------------------------------------------------
# 按钮控件与事件绑定
#------------------------------------------------------------------------------
def qpushbutton_init(self):
    self.loginQPushButton.setEnabled(False) 
    self.loginQPushButton.clicked.connect(self.check_login_func)   
    self.signinQPushButton.clicked.connect(self.show_signin_page_func)

接着在处理按钮的函数中将注册按钮的clicked信号和show_signin_page_func()槽函数进行连接；

#------------------------------------------------------------------------------
# 处理按钮的函数中将注册按钮的clicked信号和show_signin_page_func()槽函数进行绑定
#------------------------------------------------------------------------------
def show_signin_page_func(self):
    self.signin_page.exec_()

在槽函数中，我们用exec_方法来执行注册界面。为什么要使用exec_而不是show()？下面来详细解释下这两个方法的区别：

若使用exec_()的话，那么显示出来的注册界面就是模态的，意思就是当前只能对该注册界面进行操作，只有关闭了该界面才能对其他界面进行操作；若使用show()的话，那注册界面就是非模态的，则在显示了注册界面后，还能同时对登录界面进行操作(QDialog有exec_()方法，而QWidget没有)。

运行软件，功能展示效果如下：

上面为了方便演示，所以密码框输入的时候都没有用原点替代，我们可以对输入框使用setEchoMode(QLineEdit.Password)方法来完成此功能。

效果如下：

最终完整的源代码如下所示：

# -*- coding: utf-8 -*-

#--------------------------------------------------------------------------------
# 导入相关的包
#--------------------------------------------------------------------------------
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QLineEdit, QPushButton, \
    QGridLayout, QVBoxLayout, QHBoxLayout, QMessageBox, QDialog
from PyQt5.QtGui import QIcon

#------------------------------------------------------------------------------
# 全局变量
#------------------------------------------------------------------------------
USER_PWD = {'root':'123456'}

#------------------------------------------------------------------------------
# 注册界面
#------------------------------------------------------------------------------
class SigninPage(QDialog):
    def __init__(self):
        super(SigninPage, self).__init__()
        self.initUI()
    
    def initUI(self):  
        #------------------------------------------------------------------------------
        # 界面窗口标题、图标、大小
        #------------------------------------------------------------------------------      
        self.setWindowTitle('我与PyQt5有个约会 -- 注册界面')
        self.setWindowIcon(QIcon("myico.ico"))
        self.setGeometry(600,300,450,200)
        
        #------------------------------------------------------------------------------
        # 增添控件
        #------------------------------------------------------------------------------         
        self.signinUserQLabel = QLabel('用户名:', self)
        self.signinPwdQLabel = QLabel('输入密码:', self)
        self.signinPwd2QLabel = QLabel('再次输入密码:', self)
        self.signinUserQLineEdit = QLineEdit(self)
        self.signinPwdQLineEdit = QLineEdit(self)
        self.signinPwdQLineEdit.setEchoMode(QLineEdit.Password)
        self.signinPwd2QLineEdit = QLineEdit(self)
        self.signinPwd2QLineEdit.setEchoMode(QLineEdit.Password)
        self.signinQPushButton = QPushButton('注册', self)
        
        #------------------------------------------------------------------------------
        # 布局
        #------------------------------------------------------------------------------ 
        self.grid_layout = QGridLayout()
        self.all_v_layout = QVBoxLayout()
        
        #------------------------------------------------------------------------------
        # 功能函数的调用
        #------------------------------------------------------------------------------ 
        self.line_edit_init()
        self.qpushbutton_init()
        self.layout_init()  
        
    #------------------------------------------------------------------------------
    # 布局安排
    #------------------------------------------------------------------------------
    def layout_init(self):
        self.grid_layout.addWidget(self.signinUserQLabel, 0, 0, 1, 1)
        self.grid_layout.addWidget(self.signinUserQLineEdit, 0, 1, 1, 1)
        self.grid_layout.addWidget(self.signinPwdQLabel, 1, 0, 1, 1)
        self.grid_layout.addWidget(self.signinPwdQLineEdit, 1, 1, 1, 1)
        self.grid_layout.addWidget(self.signinPwd2QLabel, 2, 0, 1, 1)
        self.grid_layout.addWidget(self.signinPwd2QLineEdit, 2, 1, 1, 1)
 
        self.all_v_layout.addLayout(self.grid_layout)
        self.all_v_layout.addWidget(self.signinQPushButton)
 
        self.setLayout(self.all_v_layout)
 
    #------------------------------------------------------------------------------
    # 可编辑文本控件与事件绑定, 对输入框功能进行完善
    #------------------------------------------------------------------------------   
    def line_edit_init(self):
        self.signinUserQLineEdit.setPlaceholderText('请输入用户名')
        self.signinPwdQLineEdit.setPlaceholderText('请输入密码')
        self.signinPwd2QLineEdit.setPlaceholderText('请再次输入密码')
        
        self.signinUserQLineEdit.textChanged.connect(self.check_input_func)
        self.signinPwdQLineEdit.textChanged.connect(self.check_input_func)
        self.signinPwd2QLineEdit.textChanged.connect(self.check_input_func)
        
    #------------------------------------------------------------------------------
    # 登录按钮有效或者无效的判断
    #------------------------------------------------------------------------------
    def check_input_func(self):
        if self.signinUserQLineEdit.text() and self.signinPwdQLineEdit.text() and self.signinPwd2QLineEdit.text():
            self.signinQPushButton.setEnabled(True)
        else:
            self.signinQPushButton.setEnabled(False)
            
    #------------------------------------------------------------------------------
    # 按钮控件与事件绑定
    #------------------------------------------------------------------------------            
    def qpushbutton_init(self):
        self.signinQPushButton.setEnabled(False)
        self.signinQPushButton.clicked.connect(self.check_signin_func)
        
    #------------------------------------------------------------------------------
    # 注册功能的实现
    #------------------------------------------------------------------------------
    def check_signin_func(self):
        if self.signinPwdQLineEdit.text() != self.signinPwd2QLineEdit.text():
            QMessageBox.critical(self, '错误', '两次输入的密码不一致！请重新输入......')
        elif self.signinUserQLineEdit.text() not in USER_PWD:
            USER_PWD[self.signinUserQLineEdit.text()] = self.signinPwdQLineEdit.text()
            QMessageBox.information(self, '通知', '注册成功！')
            self.close()
        else:
            QMessageBox.critical(self, '错误', '该用户名已经被注册过了！')
     
        self.signinUserQLineEdit.clear()
        self.signinPwdQLineEdit.clear()
        self.signinPwd2QLineEdit.clear()



class Example(QWidget):
    def __init__(self):
        super(Example, self).__init__()
        self.initUI()
    
    def initUI(self):   
        #------------------------------------------------------------------------------
        # 界面窗口标题、图标、大小
        #------------------------------------------------------------------------------
        self.setWindowTitle('我与PyQt5有个约会 -- 登陆界面')
        self.setWindowIcon(QIcon("myico.ico"))
        self.setGeometry(600,300,520,200)
        
        #------------------------------------------------------------------------------
        # 增添控件
        #------------------------------------------------------------------------------ 
        self.userQLabel = QLabel('用户名:', self)
        self.pwdQLabel = QLabel('密   码:', self)
        self.userQLineEdit = QLineEdit(self)
        self.pwdQLineEdit = QLineEdit(self)
        self.pwdQLineEdit.setEchoMode(QLineEdit.Password)
        self.loginQPushButton = QPushButton('登录', self)
        self.signinQPushButton = QPushButton('注册', self)
        
        #------------------------------------------------------------------------------
        # 布局
        #------------------------------------------------------------------------------ 
        self.grid_layout = QGridLayout()
        self.h_layout = QHBoxLayout()
        self.v_layout = QVBoxLayout()
        
        #------------------------------------------------------------------------------
        # 功能函数的调用
        #------------------------------------------------------------------------------ 
        self.line_edit_init()
        self.qpushbutton_init()
        self.layout_init()
        
        self.signin_page = SigninPage()     # 实例化SigninPage()
    #------------------------------------------------------------------------------
    # 布局安排
    #------------------------------------------------------------------------------
    def layout_init(self):
        self.grid_layout.addWidget(self.userQLabel, 0, 0, 1, 1)
        self.grid_layout.addWidget(self.userQLineEdit, 0, 1, 1, 1)
        self.grid_layout.addWidget(self.pwdQLabel, 1, 0, 1, 1)
        self.grid_layout.addWidget(self.pwdQLineEdit, 1, 1, 1, 1)
        self.h_layout.addWidget(self.loginQPushButton)
        self.h_layout.addWidget(self.signinQPushButton)
        self.v_layout.addLayout(self.grid_layout)
        self.v_layout.addLayout(self.h_layout)
 
        self.setLayout(self.v_layout)

    #------------------------------------------------------------------------------
    # 可编辑文本控件与事件绑定, 对输入框功能进行完善
    #------------------------------------------------------------------------------
    def line_edit_init(self):
        self.userQLineEdit.setPlaceholderText('请输入用户名')
        self.pwdQLineEdit.setPlaceholderText('请输入密码')
     
        self.userQLineEdit.textChanged.connect(self.check_input_func)
        self.pwdQLineEdit.textChanged.connect(self.check_input_func)
        
    #------------------------------------------------------------------------------
    # 登录按钮有效或者无效的判断
    #------------------------------------------------------------------------------ 
    def check_input_func(self):
        if self.userQLineEdit.text() and self.pwdQLineEdit.text():
            self.loginQPushButton.setEnabled(True)
        else:
            self.loginQPushButton.setEnabled(False)
        
    #------------------------------------------------------------------------------
    # 按钮控件与事件绑定
    #------------------------------------------------------------------------------
    def qpushbutton_init(self):
        self.loginQPushButton.setEnabled(False) 
        self.loginQPushButton.clicked.connect(self.check_login_func)   
        self.signinQPushButton.clicked.connect(self.show_signin_page_func)
        
    #------------------------------------------------------------------------------
    # 处理按钮的函数中将注册按钮的clicked信号和show_signin_page_func()槽函数进行绑定
    #------------------------------------------------------------------------------
    def show_signin_page_func(self):
        self.signin_page.exec_()
 
    #------------------------------------------------------------------------------
    # 登录功能的验证
    #------------------------------------------------------------------------------
    def check_login_func(self):
        if USER_PWD.get(self.userQLineEdit.text()) == self.pwdQLineEdit.text():
            QMessageBox.information(self, '提示', '登陆成功!')
        else:
            QMessageBox.critical(self, '错误提示', '用户名或者密码错误!')
     
        self.userQLineEdit.clear()
        self.pwdQLineEdit.clear()

#------------------------------------------------------------------------------
# 登录功能的验证
#------------------------------------------------------------------------------
if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = Example()
    demo.show()
    sys.exit(app.exec_())

最后一步，小结

1. setPlaceholderText()方法用于在输入框显示浅灰色的提示文本；

2. exec_()方法可以让窗口成为模态窗口，而调用show()方法，窗口是非模态的。模态窗口将程序控制权占据，只有对当前窗口关闭后才能操作其他窗口；

3. QDialog有exec_()方法，而QWidget没有；

4. 可以用setEchoMode(QLineEdit.Password)将普通输入框中的文字变成原点，变成隐式的，看不到具体的。

这一节，就到这里吧，神奇的登录界面小程序，你学会了吗？

有志者，事竟成，破釜沉舟，百二秦关终属楚；

苦心人，天不负，卧薪尝胆，三千越甲可吞吴。

樊晓鑫

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
我与PyQt5有个约会系列教程（11）：神奇的登录界面小程序

写在最前面上节课，我们介绍了对话框等知识点的大体概括，相信大家已经掌握的差不多了。接下来呢，我们综合以前章节所学，来综合运用，写一个登录界面小程序。登陆界面是大家常用的一种习惯方式，例如QQ、微信、淘宝、支付宝、网银、美团、京东、饿了么等等，耳详能熟的软件或者网站，你都能看登陆界面，各式各样，五花八门，但他们都具备一个共同特点，就是保护个人隐私信息。所以别看登陆界面简单不咋地，却有很大的学问。接下来，就让我们来研究一下登陆界面。好的，那我们开始吧。第一步，登录界面布局首先完成.
复制链接

扫一扫