1. 程式人生 > 實用技巧 >御麗詩妃,利用Python的PyQt5編寫GUI介面教學,QT5還是比較難的

御麗詩妃,利用Python的PyQt5編寫GUI介面教學,QT5還是比較難的

御麗詩妃,本內容來源於網路,著作權歸屬原作者。利用Python的PyQt5編寫GUI介面教學,QT5還是比較難的

地表嘴強程式設計師 2020-08-18 21:40:49

由於學校課程的專案,最近最近在學習如何利用Python語言和SQL Server編寫一個讀者圖書借閱、查詢管理的小程式。以此為契機吧,自己便開始了學習之路~
這篇文章主要介紹自己如何使用PyQt5編寫GUI介面。

自己使用到的工具

  • VS Code
  • PyQt5依賴包
  • Qt Designer

Python幾種常見的GUI庫

Tkinter
Tkinter是Python自帶的量輕級的簡單GUI庫,使用也較為簡單。但是Tkinter之適用於基礎和小型程式的開發,介面的美觀程度也相對有限。

在網上找到了比較全面介紹Tkinter的使用教程:
https://www.cnblogs.com/shwee/p/9427975.html
https://www.runoob.com/python/python-gui-tkinter.html
PyQt5
PyQt5算是比較成熟的GUI庫了,PyQt從著名的由C++編寫的Qt庫移植封裝到Python而來。同時,利用PyQt5開發GUI比較美觀,同時利用Qt Designer可以拖動一些控制元件,實現GUI視覺化的快速開發,可通過pyuic5工具轉化為.py檔案。在這裡,自己選擇了PyQt5開發前端介面。

安裝PyQt5和Qt Designer

安裝過程較為簡單,只需在命令列視窗輸入兩行命令(在國內可以使用清華大學tuna映象站,下載依賴包更快):

pip install PyQt5 -i https://pypi.tuna.tsinghua.edu.cn/simple  #安裝PyQt5
pip install PyQt5-tools -i https://pypi.tuna.tsinghua.edu.cn/simple # 安裝Qt Designer

如圖:


**PS:若使用Anaconda,會省去很多環境配置步驟,這裡只需安裝PyQt5-tools即可,命令同上。**如果想使用Anaconda,這裡有詳盡的配置及使用方法:Anaconda詳細安裝及使用教程(帶圖文)

PS:為了今後開啟方便,可以建立一個快捷方式哦~


Qt Designer介面如下:


關於Qt Designer的使用方法,可以自行找找度娘,使用方法很多啦~~這裡放一個教程:PyQt5速成教程

匯出為.py檔案 當我們按照自己的需求,設計好了相關的介面後,便可以匯入成.py檔案啦~

設計儲存後,桌面上會有一個.ui檔案,這個就是Qt Designer生成的XML格式的檔案。

這裡,我們使用pyuic5這個外掛轉換檔案格式。轉到這個資料夾目錄後,在命令列視窗輸入如下格式命令:

pyuic5 - o 目標檔名.py 原始檔名.ui
1

如我的這樣做的:


此時,會發現,資料夾多了一個轉換後的同名.py檔案:


開啟SetupUi.py檔案,發現裡面程式碼很長,但是已經自動生成了,這樣少了很多敲程式碼的步驟呢~

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

# Form implementation generated from reading ui file 'SetupUi.ui'
#
# Created by: PyQt5 UI code generator 5.13.0
#
# WARNING! All changes made in this file will be lost!


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_mainWindow(object):
def setupUi(self, mainWindow):
mainWindow.setObjectName("mainWindow")
mainWindow.resize(561, 491)
mainWindow.setAnimated(False)
self.centralwidget = QtWidgets.QWidget(mainWindow)
self.centralwidget.setObjectName("centralwidget")
self.verticalLayout = QtWidgets.QVBoxLayout(self.centralwidget)
self.verticalLayout.setObjectName("verticalLayout")
self.tabWidget = QtWidgets.QTabWidget(self.centralwidget)
self.tabWidget.setObjectName("tabWidget")
self.tab = QtWidgets.QWidget()
self.tab.setObjectName("tab")
self.formLayout = QtWidgets.QFormLayout(self.tab)
self.formLayout.setObjectName("formLayout")
self.label1 = QtWidgets.QLabel(self.tab)
self.label1.setObjectName("label1")
self.formLayout.setWidget(0, QtWidgets.QFormLayout.FieldRole, self.label1)
self.graphicsView = QtWidgets.QGraphicsView(self.tab)
brush = QtGui.QBrush(QtGui.QColor(0, 0, 0))
brush.setStyle(QtCore.Qt.NoBrush)
self.graphicsView.setBackgroundBrush(brush)
self.graphicsView.setObjectName("graphicsView")
self.formLayout.setWidget(3, QtWidgets.QFormLayout.FieldRole, self.graphicsView)
self.buttonBox = QtWidgets.QDialogButtonBox(self.tab)
self.buttonBox.setStatusTip("")
self.buttonBox.setAccessibleName("")
self.buttonBox.setOrientation(QtCore.Qt.Horizontal)
self.buttonBox.setStandardButtons(QtWidgets.QDialogButtonBox.Close|QtWidgets.QDialogButtonBox.Ok)
self.buttonBox.setCenterButtons(False)
self.buttonBox.setObjectName("buttonBox")
self.formLayout.setWidget(4, QtWidgets.QFormLayout.FieldRole, self.buttonBox)
self.frame = QtWidgets.QFrame(self.tab)
self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
self.frame.setObjectName("frame")
self.formLayout.setWidget(5, QtWidgets.QFormLayout.LabelRole, self.frame)
self.tabWidget.addTab(self.tab, "")
self.tab_2 = QtWidgets.QWidget()
self.tab_2.setObjectName("tab_2")
self.tabWidget.addTab(self.tab_2, "")
self.verticalLayout.addWidget(self.tabWidget)
mainWindow.setCentralWidget(self.centralwidget)
self.menubar = QtWidgets.QMenuBar(mainWindow)
self.menubar.setGeometry(QtCore.QRect(0, 0, 561, 23))
self.menubar.setObjectName("menubar")
self.menu_options = QtWidgets.QMenu(self.menubar)
self.menu_options.setObjectName("menu_options")
self.menu_about = QtWidgets.QMenu(self.menubar)
self.menu_about.setObjectName("menu_about")
mainWindow.setMenuBar(self.menubar)
self.statusbar = QtWidgets.QStatusBar(mainWindow)
self.statusbar.setObjectName("statusbar")
mainWindow.setStatusBar(self.statusbar)
self.action = QtWidgets.QAction(mainWindow)
self.action.setCheckable(False)
self.action.setWhatsThis("")
self.action.setShortcutContext(QtCore.Qt.WindowShortcut)
self.action.setObjectName("action")
self.action_2 = QtWidgets.QAction(mainWindow)
self.action_2.setShortcutContext(QtCore.Qt.ApplicationShortcut)
self.action_2.setMenuRole(QtWidgets.QAction.QuitRole)
self.action_2.setObjectName("action_2")
self.menu_options.addAction(self.action_2)
self.menu_about.addAction(self.action)
self.menubar.addAction(self.menu_options.menuAction())
self.menubar.addAction(self.menu_about.menuAction())

self.retranslateUi(mainWindow)
self.tabWidget.setCurrentIndex(0)
QtCore.QMetaObject.connectSlotsByName(mainWindow)

def retranslateUi(self, mainWindow):
_translate = QtCore.QCoreApplication.translate
mainWindow.setWindowTitle(_translate("mainWindow", "MainWindow"))
self.tabWidget.setToolTip(_translate("mainWindow", "<html><head/><body><p><br/></p></body></html>"))
self.label1.setText(_translate("mainWindow", "學生圖書管理系統"))
self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), _translate("mainWindow", "Tab 1"))
self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), _translate("mainWindow", "Tab 2"))
self.menu_options.setTitle(_translate("mainWindow", "選項"))
self.menu_about.setTitle(_translate("mainWindow", "關於"))
self.action.setText(_translate("mainWindow", "關於作者"))
self.action_2.setText(_translate("mainWindow", "退出"))

使用VS Code編寫基礎程式

使用VS Code開啟這個資料夾,秉承介面和其他操作分離的原則,我們可以新建一個.py檔案,如命名為ConnetDatabase.py,從而呼叫剛才生成的介面模組,新建一個MyWindow的子類,繼承於QMainWindow和Ui_mainWindow父類,並初始化,編寫建構函式即可。

最後,建立一個名為`import sys

from PyQt5.QtWidgets import QApplication, QMainWindow  #匯入PyQt相關模組

from SetupUi import * #匯入之前新生成的視窗模組

class MyWindow(QMainWindow, Ui_mainWindow):
def __init__(self, parent=None):
super(MyWindow, self).__init__(parent)
self.setupUi(self)


if __name__ == '__main__':
app = QApplication(sys.argv)
myWin = MyWindow() #建立物件
myWin.show() #顯示視窗
sys.exit(app.exec_())`的物件,啟動即可。

執行後的效果如圖:

至此,基本的視窗建立成功,便可以開始寫後端的具體程式碼實現了~