PyQt5制作一个简单的登录界面

最近在学习GUI设计，分享做的一些小项目。
这篇文我们讲一下如何制作一个简单的登录界面。

目录

一、效果图

如下:

二、简述制作过程：

1、QtDesigner里绘制UI界面并设置属性
布局根据个人喜好，部件颜色、字体、背景属性在styleSheet里设置。

2、材料转换（将.ui文件转.py,.qrc文件转_rc.py）
通过PyUIC和PyRcc即可完成。

这个没安装的可以参考这篇文章：
Pycharm 中配置pyqt5.designer，pyuic,pyrcc

3、对部件自定义函数并关联
源码注释的很详细，有不理解的地方欢迎在文末加我的vx讨论。

三、源码及材料：

1、源码：

# -*- coding: utf-8-*-

# Form implementation generated from reading ui file 'denglujiemian2.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtWidgets import QMessageBox
from PyQt5.QtGui import QPixmap,QIcon

classUi_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(708,761)
        MainWindow.setStyleSheet("")
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setStyleSheet("background-image: url(:/png/beijing1.png);")
        self.centralwidget.setObjectName("centralwidget")
#################################################################################################
# pushButton的属性
#################################################################################################
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(540,540,131,51))
        self.pushButton.setStyleSheet("font: 9pt \"造字工房悦黑体验版细体\";\n""image: url(:/ico/login.ico);\n""background-color: rgb(255, 255, 0);\n""color: rgb(255, 0, 0);")
        self.pushButton.setObjectName("pushButton")
        self.pushButton.setIcon(QIcon(QPixmap("login.ico")))
#################################################################################################
#pushButton_2的属性
#################################################################################################
        self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_2.setGeometry(QtCore.QRect(540,610,131,51))
        self.pushButton_2.setStyleSheet("font: 9pt \"造字工房悦黑体验版细体\";\n""image: url(:/ico/exit.ico);\n""color: rgb(255, 0, 0);\n""background-color: rgb(255, 255, 0);")
        self.pushButton_2.setObjectName("pushButton_2")
        self.pushButton_2.setIcon(QIcon(QPixmap("exit.ico")))
#################################################################################################
# label的属性
#################################################################################################
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(450,389,51,31))
        self.label.setStyleSheet("font: 9pt \"造字工房悦黑体验版细体\";\n""color: rgb(255, 255, 0);")
        self.label.setObjectName("label")
#################################################################################################
#label_2的属性
#################################################################################################
        self.label_2 = QtWidgets.QLabel(self.centralwidget)
        self.label_2.setGeometry(QtCore.QRect(460,440,41,21))
        self.label_2.setStyleSheet("font: 9pt \"造字工房悦黑体验版细体\";\n""color: rgb(255, 255, 0);")
        self.label_2.setObjectName("label_2")
#################################################################################################
#lineEdit的属性
#################################################################################################
        self.lineEdit = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit.setGeometry(QtCore.QRect(510,390,181,31))
        self.lineEdit.setStyleSheet("color: rgb(255, 255, 0);")
        self.lineEdit.setObjectName("lineEdit")
#################################################################################################
# lineEdit_2的属性
#################################################################################################
        self.lineEdit_2 = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit_2.setGeometry(QtCore.QRect(510,430,181,31))
        self.lineEdit_2.setStyleSheet("color: rgb(255, 255, 0);")
        self.lineEdit_2.setObjectName("lineEdit_2")
        self.lineEdit_2.setEchoMode(QtWidgets.QLineEdit.Password)
        self.lineEdit_2.setValidator(QtGui.QIntValidator(10000000,99999999))
#################################################################################################
# radioButton的属性
#################################################################################################
        self.radioButton = QtWidgets.QRadioButton(self.centralwidget)
        self.radioButton.setGeometry(QtCore.QRect(480,480,81,19))
        self.radioButton.setStyleSheet("color: rgb(255, 255, 0);\n""font: 9pt \"造字工房悦黑体验版细体\";")
        self.radioButton.setObjectName("radioButton")
        self.radioButton.setChecked(True)
#################################################################################################
#radioButton_2的属性
#################################################################################################
        self.radioButton_2 = QtWidgets.QRadioButton(self.centralwidget)
        self.radioButton_2.setGeometry(QtCore.QRect(590,480,91,19))
        self.radioButton_2.setStyleSheet("font: 9pt \"造字工房悦黑体验版细体\";\n""color: rgb(255, 255, 0);")
        self.radioButton_2.setObjectName("radioButton_2")
#################################################################################################
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0,0,708,26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)
#################################################################################################
#将pushButton和pushButton_2通过clicked连接自定义函数login()
#################################################################################################
        self.retranslateUi(MainWindow)
        self.pushButton.clicked.connect(self.login)
        self.pushButton_2.clicked.connect(MainWindow.close)
#################################################################################################
#将radioButton和radioButton_2通过clicked连接自定义函数select（）
#################################################################################################
        self.radioButton.toggled.connect(self.select)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)
        self.radioButton_2.clicked.connect(MainWindow.show)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)
#################################################################################################
#自定义函数，点击登录时弹出一个提示窗口，显示用户名和密码
#################################################################################################
    def login(self):from PyQt5.QtWidgets import QMessageBox
        QMessageBox.information(MainWindow,"登录信息","用户名: "+ self.lineEdit.text()+"密码: "+ self.lineEdit_2.text(), QMessageBox.Ok)

#################################################################################################
#自定义函数，选择不同身份登录时弹出一个提示窗口，显示登录身份
#################################################################################################
    def select(self):if self.radioButton.isChecked():
            QMessageBox.information(MainWindow,"提示","您选择的是 管理员 登录",QMessageBox.Ok)
        elif self.radioButton_2.isChecked():
            QMessageBox.information(MainWindow,"提示","您选择的是 普通用户 登录",QMessageBox.Ok)
#################################################################################################
#翻译函数
#################################################################################################
    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow","登录系统"))
        self.pushButton.setText(_translate("MainWindow","登录"))
        self.pushButton_2.setText(_translate("MainWindow","退出"))
        self.label.setText(_translate("MainWindow","用户名："))
        self.label_2.setText(_translate("MainWindow","密码："))
        self.radioButton.setText(_translate("MainWindow","管理员"))
        self.radioButton_2.setText(_translate("MainWindow","普通用户"))
#################################################################################################
#窗口函数
#################################################################################################
import dlbj1_rc
import sys
if __name__ =='__main__':
   app = QtWidgets.QApplication(sys.argv)
   MainWindow = QtWidgets.QMainWindow() # 创建窗体对象
   ui =Ui_MainWindow() # 创建PyQt设计的窗体对象
   ui.setupUi(MainWindow) # 调用PyQt窗体的方法对窗体对象进行初始化设置
   MainWindow.show() # 显示窗体
   sys.exit(app.exec_()) # 程序关闭时退出进程

2、图片素材：

百度网盘链接：
图片素材
提取码：1024

喜欢的话记得三连哦，欢迎评论。