Ps:水平有限,欢迎建议和挑错
我们在此之前,学习了PyQt的主窗口(QMainwindow),按钮(Qpushbutton),标签栏(QLabel),文本框编辑框(LineEdit)4个组件。
我们可以尝试做一个由这些组件组成的小项目。同时有这4个组件的,常见的一种界面就是登录框。
网上有许多教程,是关于登录框的。
我们今天也做一个自己的登录框。
素材
首先我们这次登录框需要一些素材,平面设计素材,为了让我们的登录框看起来更好看。
Background.jpg
logo.png
创建主窗口
创建一个主窗口,命名为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)")
image.png
到这步的所有代码:
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.