Ps:水平有限,欢迎建议和挑错
我们在此之前,学习了PyQt的主窗口(QMainwindow),按钮(Qpushbutton),标签栏(QLabel),文本框编辑框(LineEdit)4个组件。
我们可以尝试做一个由这些组件组成的小项目。同时有这4个组件的,常见的一种界面就是登录框。
网上有许多教程,是关于登录框的。
我们今天也做一个自己的登录框。
素材
首先我们这次登录框需要一些素材,平面设计素材,为了让我们的登录框看起来更好看。
创建主窗口
创建一个主窗口,命名为login.py
from PyQt5 import QtCore, QtGui, QtWidgets
class Ui_MainWindow(object):
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(386, 127)
self.centralWidget = QtWidgets.QWidget(MainWindow)
self.centralWidget.setObjectName("centralWidget")
MainWindow.setCentralWidget(self.centralWidget)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
ui = Ui_MainWindow()
ui.setupUi(MainWindow)
MainWindow.show()
sys.exit(app.exec_())
美化一下
添加logo图片与背景图
from PyQt5.QtGui import QIcon
MainWindow.setWindowIcon(QIcon('logo.png'))
MainWindow.setStyleSheet("background-image:url(Background.jpg)")
到这步的所有代码:
from PyQt5 import QtCore, QtGui, QtWidgets
class Ui_MainWindow(object):
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(386, 127)
MainWindow.setWindowIcon(QIcon('logo.png'))
MainWindow.setStyleSheet("background-image:url(Background.jpg)")
self.centralWidget = QtWidgets.QWidget(MainWindow)
self.centralWidget.setObjectName("centralWidget")
MainWindow.setCentralWidget(self.centralWidget)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "一颗数据小白菜"))
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
ui = Ui_MainWindow()
ui.setupUi(MainWindow)
MainWindow.show()
sys.exit(app.exec_())
添加组件
添加2个Qlabel,显示帐号、密码
添加2个LineEdit,提示输入和接收密码帐号
添加2个Qpushbutton,绑定事件触发
self.lineEdit = QtWidgets.QLineEdit(self.centralWidget)
self.lineEdit.setGeometry(QtCore.QRect(250, 20, 100, 20))
self.lineEdit.setText("")
self.lineEdit.setObjectName("lineEdit")
self.lineEdit_2 = QtWidgets.QLineEdit(self.centralWidget)
self.lineEdit_2.setGeometry(QtCore.QRect(250, 50, 100, 20))
self.lineEdit_2.setText("")
#密码输入框调整为密码模 https://www.jianshu.com/p/3915e033c87a 点击介绍密码模式
self.lineEdit_2.setEchoMode(QtWidgets.QLineEdit.Password)
self.lineEdit_2.setObjectName("lineEdit_2")
self.label = QtWidgets.QLabel(self.centralWidget)
self.label.setGeometry(QtCore.QRect(200, 24, 24, 12))
self.label.setTextFormat(QtCore.Qt.AutoText)
self.label.setObjectName("label")
self.label_2 = QtWidgets.QLabel(self.centralWidget)
self.label_2.setGeometry(QtCore.QRect(200, 54, 24, 12))
self.label_2.setObjectName("label_2")
self.pushButton = QtWidgets.QPushButton(self.centralWidget)
self.pushButton.setGeometry(QtCore.QRect(190, 90, 75, 23))
self.pushButton.setObjectName("pushButton")
self.pushButton_2 = QtWidgets.QPushButton(self.centralWidget)
self.pushButton_2.setGeometry(QtCore.QRect(290, 90, 75, 23))
self.pushButton_2.setObjectName("pushButton_2")
self.lineEdit.setPlaceholderText(_translate("MainWindow", "请输入帐号"))
self.lineEdit_2.setPlaceholderText(_translate("MainWindow", "请输入密码"))
self.label.setText(_translate("MainWindow", "帐号"))
self.label_2.setText(_translate("MainWindow", "密码"))
self.pushButton.setText(_translate("MainWindow", "确定"))
self.pushButton_2.setText(_translate("MainWindow", "取消"))
组件大小位置,需要仔细调整,我这个是已经调整好的。
到这步的所有代码:
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtGui import QIcon
class Ui_MainWindow(object):
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(386, 127)
MainWindow.setWindowIcon(QIcon('logo.png'))
MainWindow.setStyleSheet("background-image:url(Background.jpg)")
self.centralWidget = QtWidgets.QWidget(MainWindow)
self.centralWidget.setObjectName("centralWidget")
self.lineEdit = QtWidgets.QLineEdit(self.centralWidget)
self.lineEdit.setGeometry(QtCore.QRect(250, 20, 100, 20))
self.lineEdit.setText("")
self.lineEdit.setObjectName("lineEdit")
self.lineEdit_2 = QtWidgets.QLineEdit(self.centralWidget)
self.lineEdit_2.setGeometry(QtCore.QRect(250, 50, 100, 20))
self.lineEdit_2.setText("")
self.lineEdit_2.setEchoMode(QtWidgets.QLineEdit.Password)
self.lineEdit_2.setObjectName("lineEdit_2")
self.label = QtWidgets.QLabel(self.centralWidget)
self.label.setGeometry(QtCore.QRect(200, 24, 24, 12))
self.label.setTextFormat(QtCore.Qt.AutoText)
self.label.setObjectName("label")
self.label_2 = QtWidgets.QLabel(self.centralWidget)
self.label_2.setGeometry(QtCore.QRect(200, 54, 24, 12))
self.label_2.setObjectName("label_2")
self.pushButton = QtWidgets.QPushButton(self.centralWidget)
self.pushButton.setGeometry(QtCore.QRect(190, 90, 75, 23))
self.pushButton.setObjectName("pushButton")
self.pushButton_2 = QtWidgets.QPushButton(self.centralWidget)
self.pushButton_2.setGeometry(QtCore.QRect(290, 90, 75, 23))
self.pushButton_2.setObjectName("pushButton_2")
MainWindow.setCentralWidget(self.centralWidget)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "一颗数据小白菜"))
self.lineEdit.setPlaceholderText(_translate("MainWindow", "请输入帐号"))
self.lineEdit_2.setPlaceholderText(_translate("MainWindow", "请输入密码"))
self.label.setText(_translate("MainWindow", "帐号"))
self.label_2.setText(_translate("MainWindow", "密码"))
self.pushButton.setText(_translate("MainWindow", "确定"))
self.pushButton_2.setText(_translate("MainWindow", "取消"))
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
ui = Ui_MainWindow()
ui.setupUi(MainWindow)
MainWindow.show()
sys.exit(app.exec_())
所有组件都已经完成,接下来就是定义事件了。
密码验证
我们假设帐号为admin。密码为123456
我们来定义一个逻辑函数,验证帐号密码
1.获取输入帐号密码
login_user = self.lineEdit.text()
login_password = self.lineEdit_2.text()
2.判断输入帐号密码
我们先准备新建一个主窗口,如果帐号密码是对的,就调用这个主窗口,显示这个主窗口,如果密码是错的,就弹出警告。
另一个主窗口代码如下,命名为hello.py,保存在login.py同一级目录
from PyQt5 import QtCore, QtGui, QtWidgets
class hello_mainWindow(object):
def setupUi(self, mainWindow):
mainWindow.setObjectName("mainWindow")
mainWindow.setWindowModality(QtCore.Qt.WindowModal)
mainWindow.resize(624, 511)
self.retranslateUi(mainWindow)
QtCore.QMetaObject.connectSlotsByName(mainWindow)
def retranslateUi(self, mainWindow):
_translate = QtCore.QCoreApplication.translate
mainWindow.setWindowTitle(_translate("mainWindow", "hello word"))
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
mainWindow = QtWidgets.QMainWindow()
ui = hello_mainWindow()
ui.setupUi(mainWindow)
mainWindow.show()
sys.exit(app.exec_())
同时在login.py文件中import这个hello窗口
from hello import *
下面是判断逻辑,写在 login.py 文件中
def word_get(self):
login_user = self.lineEdit.text()
login_password = self.lineEdit_2.text()
print(login_user,login_password)
if login_user == 'admin' and login_password == '123456':
ui_hello.show()
MainWindow.close()
else:
QMessageBox.warning(self,
"警告",
"用户名或密码错误!",
QMessageBox.Yes)
self.lineEdit.setFocus()
这段代码运行时,会判断密码帐号是否正确,正确就会打开hello窗口,并且关闭登录框,如果不对,则会弹出警告框。
3.绑定确定按钮事件
self.pushButton.clicked.connect(self.word_get)
但是会出现:
‘Ui_MainWindow‘ object has no attribute ‘show‘的错误,这时候我们要对代码进行修改。
====login.py====
class Ui_MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super(Ui_MainWindow,self).__init__()
self.setupUi(self)
self.retranslateUi(self)
====hello.py====
class hello_mainWindow(QtWidgets.QMainWindow):
def __init__(self):
super(hello_mainWindow,self).__init__()
self.setupUi(self)
这时候:
login.py整个代码为:
from PyQt5 import QtCore, QtGui, QtWidgets, Qt
from PyQt5.QtGui import QIcon
from hello import *
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
class Ui_MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super(Ui_MainWindow,self).__init__()
self.setupUi(self)
self.retranslateUi(self)
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(386, 127)
MainWindow.setWindowIcon(QIcon('logo.png'))
MainWindow.setStyleSheet("background-image:url(Background.jpg)")
self.centralWidget = QtWidgets.QWidget(MainWindow)
self.centralWidget.setObjectName("centralWidget")
self.lineEdit = QtWidgets.QLineEdit(self.centralWidget)
self.lineEdit.setGeometry(QtCore.QRect(250, 20, 100, 20))
self.lineEdit.setText("")
self.lineEdit.setObjectName("lineEdit")
self.lineEdit_2 = QtWidgets.QLineEdit(self.centralWidget)
self.lineEdit_2.setGeometry(QtCore.QRect(250, 50, 100, 20))
self.lineEdit_2.setText("")
self.lineEdit_2.setEchoMode(QtWidgets.QLineEdit.Password)
self.lineEdit_2.setObjectName("lineEdit_2")
self.label = QtWidgets.QLabel(self.centralWidget)
self.label.setGeometry(QtCore.QRect(200, 24, 24, 12))
self.label.setTextFormat(QtCore.Qt.AutoText)
self.label.setObjectName("label")
self.label_2 = QtWidgets.QLabel(self.centralWidget)
self.label_2.setGeometry(QtCore.QRect(200, 54, 24, 12))
self.label_2.setObjectName("label_2")
self.pushButton = QtWidgets.QPushButton(self.centralWidget)
self.pushButton.setGeometry(QtCore.QRect(190, 90, 75, 23))
self.pushButton.setObjectName("pushButton")
self.pushButton_2 = QtWidgets.QPushButton(self.centralWidget)
self.pushButton_2.setGeometry(QtCore.QRect(290, 90, 75, 23))
self.pushButton_2.setObjectName("pushButton_2")
MainWindow.setCentralWidget(self.centralWidget)
self.pushButton.clicked.connect(self.word_get)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "一颗数据小白菜"))
self.lineEdit.setPlaceholderText(_translate("MainWindow", "请输入帐号"))
self.lineEdit_2.setPlaceholderText(_translate("MainWindow", "请输入密码"))
self.label.setText(_translate("MainWindow", "帐号"))
self.label_2.setText(_translate("MainWindow", "密码"))
self.pushButton.setText(_translate("MainWindow", "确定"))
self.pushButton_2.setText(_translate("MainWindow", "取消"))
def word_get(self):
login_user = self.lineEdit.text()
login_password = self.lineEdit_2.text()
if login_user == 'admin' and login_password == '123456':
ui_hello.show()
MainWindow.close()
else:
QMessageBox.warning(self,
"警告",
"用户名或密码错误!",
QMessageBox.Yes)
self.lineEdit.setFocus()
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
ui = Ui_MainWindow()
ui_hello = hello_mainWindow()
ui.setupUi(MainWindow)
MainWindow.show()
sys.exit(app.exec_())
hello.py文件整个代码为:
from PyQt5 import QtCore, QtGui, QtWidgets
class hello_mainWindow(QtWidgets.QMainWindow):
def __init__(self):
super(hello_mainWindow,self).__init__()
self.setupUi(self)
self.retranslateUi(self)
def setupUi(self, mainWindow):
mainWindow.setObjectName("mainWindow")
mainWindow.setWindowModality(QtCore.Qt.WindowModal)
mainWindow.resize(624, 511)
self.retranslateUi(mainWindow)
QtCore.QMetaObject.connectSlotsByName(mainWindow)
def retranslateUi(self, mainWindow):
_translate = QtCore.QCoreApplication.translate
mainWindow.setWindowTitle(_translate("mainWindow", "hello word"))
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
mainWindow = QtWidgets.QMainWindow()
ui = hello_mainWindow()
ui.setupUi(mainWindow)
mainWindow.show()
sys.exit(app.exec_())
4.绑定取消按钮事件
self.pushButton_2.clicked.connect(MainWindow.close)
点击取消,退出登录框
总结
最终代码为:
====login.py
from PyQt5 import QtCore, QtGui, QtWidgets, Qt
from PyQt5.QtGui import QIcon
from hello import *
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
class Ui_MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super(Ui_MainWindow,self).__init__()
self.setupUi(self)
self.retranslateUi(self)
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(386, 127)
MainWindow.setWindowIcon(QIcon('logo.png'))
MainWindow.setStyleSheet("background-image:url(Background.jpg)")
self.centralWidget = QtWidgets.QWidget(MainWindow)
self.centralWidget.setObjectName("centralWidget")
self.lineEdit = QtWidgets.QLineEdit(self.centralWidget)
self.lineEdit.setGeometry(QtCore.QRect(250, 20, 100, 20))
self.lineEdit.setText("")
self.lineEdit.setObjectName("lineEdit")
self.lineEdit_2 = QtWidgets.QLineEdit(self.centralWidget)
self.lineEdit_2.setGeometry(QtCore.QRect(250, 50, 100, 20))
self.lineEdit_2.setText("")
self.lineEdit_2.setEchoMode(QtWidgets.QLineEdit.Password)
self.lineEdit_2.setObjectName("lineEdit_2")
self.label = QtWidgets.QLabel(self.centralWidget)
self.label.setGeometry(QtCore.QRect(200, 24, 24, 12))
self.label.setTextFormat(QtCore.Qt.AutoText)
self.label.setObjectName("label")
self.label_2 = QtWidgets.QLabel(self.centralWidget)
self.label_2.setGeometry(QtCore.QRect(200, 54, 24, 12))
self.label_2.setObjectName("label_2")
self.pushButton = QtWidgets.QPushButton(self.centralWidget)
self.pushButton.setGeometry(QtCore.QRect(190, 90, 75, 23))
self.pushButton.setObjectName("pushButton")
self.pushButton_2 = QtWidgets.QPushButton(self.centralWidget)
self.pushButton_2.setGeometry(QtCore.QRect(290, 90, 75, 23))
self.pushButton_2.setObjectName("pushButton_2")
MainWindow.setCentralWidget(self.centralWidget)
self.pushButton.clicked.connect(self.word_get)
self.pushButton_2.clicked.connect(MainWindow.close)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "一颗数据小白菜"))
self.lineEdit.setPlaceholderText(_translate("MainWindow", "请输入帐号"))
self.lineEdit_2.setPlaceholderText(_translate("MainWindow", "请输入密码"))
self.label.setText(_translate("MainWindow", "帐号"))
self.label_2.setText(_translate("MainWindow", "密码"))
self.pushButton.setText(_translate("MainWindow", "确定"))
self.pushButton_2.setText(_translate("MainWindow", "取消"))
def word_get(self):
login_user = self.lineEdit.text()
login_password = self.lineEdit_2.text()
if login_user == 'admin' and login_password == '123456':
ui_hello.show()
MainWindow.close()
else:
QMessageBox.warning(self,
"警告",
"用户名或密码错误!",
QMessageBox.Yes)
self.lineEdit.setFocus()
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
ui = Ui_MainWindow()
ui_hello = hello_mainWindow()
ui.setupUi(MainWindow)
MainWindow.show()
sys.exit(app.exec_())
====hello.py
from PyQt5 import QtCore, QtGui, QtWidgets
class hello_mainWindow(QtWidgets.QMainWindow):
def __init__(self):
super(hello_mainWindow,self).__init__()
self.setupUi(self)
self.retranslateUi(self)
def setupUi(self, mainWindow):
mainWindow.setObjectName("mainWindow")
mainWindow.setWindowModality(QtCore.Qt.WindowModal)
mainWindow.resize(624, 511)
self.retranslateUi(mainWindow)
QtCore.QMetaObject.connectSlotsByName(mainWindow)
def retranslateUi(self, mainWindow):
_translate = QtCore.QCoreApplication.translate
mainWindow.setWindowTitle(_translate("mainWindow", "hello word"))
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
mainWindow = QtWidgets.QMainWindow()
ui = hello_mainWindow()
ui.setupUi(mainWindow)
mainWindow.show()
sys.exit(app.exec_())
效果如下: