最近在学习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
class Ui_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
喜欢的话记得三连哦，欢迎评论。
