PyQt5登录界面c/c++weixin45733764的博客-

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