最近在學習GUI設計，分享做的一些小項目。
這篇文我們講一下如何制作一個簡單的登錄界面。

目錄

• • 一、效果圖
  • 二、簡述制作過程：
  • 三、源碼及材料：
  • • 1、源碼：
    • 2、圖片素材：

一、效果圖

如下:

二、簡述制作過程：

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,QIconclass 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 QMessageBoxQMessageBox.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.translateMainWindow.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

喜歡的話記得三連哦，歡迎評論。

總結

以上是生活随笔為你收集整理的PyQt5制作一个简单的登录界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。