最近在學(xué)習(xí)GUI設(shè)計，分享做的一些小項目。
這篇文我們講一下如何制作一個簡單的登錄界面。
一、效果圖
如下:
二、簡述制作過程：
1、QtDesigner里繪制UI界面并設(shè)置屬性
布局根據(jù)個人喜好，部件顏色、字體、背景屬性在styleSheet里設(shè)置。
2、材料轉(zhuǎn)換（將.ui文件轉(zhuǎn).py,.qrc文件轉(zhuǎn)_rc.py）
通過PyUIC和PyRcc即可完成。
這個沒安裝的可以參考這篇文章：
Pycharm 中配置pyqt5.designer，pyuic,pyrcc
3、對部件自定義函數(shù)并關(guān)聯(lián)
源碼注釋的很詳細，有不理解的地方歡迎在文末加我的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連接自定義函數(shù)login()
#################################################################################################
self.retranslateUi(MainWindow)
self.pushButton.clicked.connect(self.login)
self.pushButton_2.clicked.connect(MainWindow.close)
#################################################################################################
#將radioButton和radioButton_2通過clicked連接自定義函數(shù)select（）
#################################################################################################
self.radioButton.toggled.connect(self.select)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
self.radioButton_2.clicked.connect(MainWindow.show)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
#################################################################################################
#自定義函數(shù)，點擊登錄時彈出一個提示窗口，顯示用戶名和密碼
#################################################################################################
def login(self):
from PyQt5.QtWidgets import QMessageBox
QMessageBox.information(MainWindow, "登錄信息","用戶名: " + self.lineEdit.text() + "密碼: " + self.lineEdit_2.text(), QMessageBox.Ok)
#################################################################################################
#自定義函數(shù)，選擇不同身份登錄時彈出一個提示窗口，顯示登錄身份
#################################################################################################
def select(self):
if self.radioButton.isChecked():
QMessageBox.information(MainWindow,"提示","您選擇的是 管理員 登錄",QMessageBox.Ok)
elif self.radioButton_2.isChecked():
QMessageBox.information(MainWindow,"提示","您選擇的是 普通用戶 登錄",QMessageBox.Ok)
#################################################################################################
#翻譯函數(shù)
#################################################################################################
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "登錄系統(tǒng)"))
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", "普通用戶"))
#################################################################################################
#窗口函數(shù)
#################################################################################################
import dlbj1_rc
import sys
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow() # 創(chuàng)建窗體對象
ui = Ui_MainWindow() # 創(chuàng)建PyQt設(shè)計的窗體對象
ui.setupUi(MainWindow) # 調(diào)用PyQt窗體的方法對窗體對象進行初始化設(shè)置
MainWindow.show() # 顯示窗體
sys.exit(app.exec_()) # 程序關(guān)閉時退出進程
2、圖片素材：
百度網(wǎng)盤鏈接：
圖片素材
提取碼：1024文章來源：http://www.zghlxwxcb.cn/news/detail-434905.html
喜歡的話記得三連哦，歡迎評論。文章來源地址http://www.zghlxwxcb.cn/news/detail-434905.html
到了這里，關(guān)于PyQt5制作一個簡單的登錄界面的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
