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