PyQt5登录界面

0 目的

网上质量差的水贴太多，对初学者很不友好。
系统性分享PyQt5登录界面的博文很少。
作者非计算机类专业（电力系统专业），于2020年4月初学PyQt5以应对项目界面需求，历时1月已能系统性制作中大型界面。鉴于从网上的相关博文收获了一些知识，在此以回馈社会，与君共勉，今后在博士学业之余也会陆续更新博文。

1 登录界面需求

需求1：隐藏输入密码。
需求2：未输入账号、IP和端口时存在提示字，输入时消失。
需求3：登录界面大小不可改变。
需求4：将在登录界面上输入的IP和端口内容传递至主界面。
需求5：点击登录按钮时，若账号和密码不匹配则弹出警告框，若IP和端口栏为空则弹出警告框。
需求6：点击退出按钮或关闭时程序退出。

2 登录界面设计

1）在Qt Creator中设计的登录界面如下图：
登录界面的变量名为Dialog，其输入框和按钮的变量名如下：用户名——userNameLineEdit；密码——passwordLineEdit；IP——IPLineEdit；端口——portLineEdit；登录——OKPushButton；退出——ExitPushButton。

在Qt Creator中，passwordLineEdit的属性设置区域的QLineEdit的echoMode中选择Password可实现需求1。
在Qt Creator中，userNameLineEdit、IPLineEdit和portLineEdit的属性设置区域的QLineEdit的placeholderText中输入相关提示可实现需求2。
关于点击退出按钮则退出界面的需求：在Qt Creator中，信号与槽区域设置发射者及其信号为ExitPushButton和clicked()，接收者及其信号为Dialog和close()。
2）为了个性化设计警告框，需在Qt Creator中设计，如下图所示：

警告框仅包含一个label组件，变量名为label。
3）为突出重点，主界面设计如下，且将接收的IP和端口内容显示于主界面的两个label组件中，二者变量名分别为IPLabel和portLabel。

3 程序设计

1）第一步
制作好三个ui文件后，通过bat文件转换为py文件，bat文件代码如下：

echo off
copy .\mainApplication.ui mainApplication.ui
pyuic5 -o ui_mainApplication.py mainApplication.ui
copy .\logOn.ui logOn.ui
pyuic5 -o ui_logOn.py logOn.ui
copy .\logOnWarn.ui logOnWarn.ui
pyuic5 -o ui_logOnWarn.py logOnWarn.ui
copy .\res.qrc \res.qrc
pyrcc5 res.qrc -o res_rc.py

可得ui_logOn.py、ui_logOnWarn.py和ui_mainApplication.py三个文件，其内容我们无需关心，系统自动生成，在程序中调用即可。
2）第二步
创建告警框py文件logOnWarn.py，其内容如下：

import sys
from PyQt5.QtWidgets import QDialog
from PyQt5.QtCore import Qt

from ui_logOnWarn import Ui_Dialog


class LogOnWarnDialog(QDialog):
    def __init__(self, message='警告', parent=None):
        super().__init__(parent)
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)
        self.setWindowFlags(Qt.MSWindowsFixedSizeDialogHint)    # 固定窗口大小
        self.ui.label.setText(message)

创建登录界面py文件logOn.py，其内容如下：

import sys
from PyQt5.QtWidgets import QDialog
from PyQt5.QtCore import Qt, pyqtSlot

from ui_logOn import Ui_Dialog
from logOnWarn import LogOnWarnDialog


class LogOnDialog(QDialog):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)
        self.setWindowFlags(Qt.MSWindowsFixedSizeDialogHint)    # 固定窗口大小

        self.__systemUserName = "admin"             # 登录账号
        self.__systemPassword = "123456"            # 登录密码

    def sendData(self):    # 以元祖形式返回数据至主界面
        return self.ui.IPLineEdit.text(), self.ui.portLineEdit.text()

    def closeEvent(self, event):
        sys.exit()

    @pyqtSlot()
    def on_OKPushButton_clicked(self):
        userName = self.ui.userNameLineEdit.text()
        password = self.ui.passwordLineEdit.text()
        IP = self.ui.IPLineEdit.text()
        port = self.ui.portLineEdit.text()
        if (port == "") or (IP == ""):
            alarmMessage = LogOnWarnDialog("IP或端口不能为空")
            alarmMessage.exec()
        if (userName == self.__systemUserName) and (password == self.__systemPassword):
            self.accept()
        else:
            alarmMessage = LogOnWarnDialog("账号或密码错误")
            alarmMessage.exec()

创建主界面py文件mainApplication.py，其内容如下：

import sys
from PyQt5.QtWidgets import QWidget, QApplication, QDialog
from PyQt5.QtCore import Qt, QEvent

from ui_mainApplication import Ui_Widget
from logOn import LogOnDialog


class MyApplication(QWidget):
    def __init__(self, IP, port, parent=None):
        super().__init__(parent)
        self.ui = Ui_Widget()
        self.ui.setupUi(self)
        self.ui.IPLabel.setText("IP："+IP)              # 设置主界面IP标签
        self.ui.portLabel.setText("端口："+port)        # 设置主界面端口标签


if __name__ == "__main__":
    application = QApplication(sys.argv)
    # 弹出登录框
    logOnDialog = LogOnDialog()
    ret = logOnDialog.exec()                            # 模态方式显示
    if ret == QDialog.Accepted:
        IPRec, portRec = logOnDialog.sendData()         # 接收来自界面的IP和端口
        myApplication = MyApplication(IPRec, portRec)
        myApplication.showMaximized()                   # 最大化显示
        sys.exit(application.exec_())
    else:
        sys.exit(application.exec_())

4 结果

运行主界面程序，结果如下面一系列图所示：

5 需特别注意的点

账号密码设置置于登录界面py程序中，可便于理解修改。
在登录界面py程序中应在closeEvent中添加sys.exit()，否则将导致在右上角关闭时不能停止运行。
上述程序还包含了资源添加和多对话框数据传递，读者可自行体会。
因界面设计及其程序较为简单，未专设QSS文件，已在Qt Creator对各组件进行了QSS设置。
此系列代码和文件免费向有兴趣读者开放，可见https://download.csdn.net/download/weixin_45733764/12421041

卢咕鸡

原创文章 1 获赞 1 访问量 52

关注私信