一文詳解Python圖形界面框架：PyQt5

使用Python開發(fā)圖形界面的軟件其實(shí)并不多，相對(duì)于GUI界面，可能Web方式的應(yīng)用更受人歡迎。但對(duì)于像我一樣對(duì)其他編程語言你如C#或WPF來說未必不是一個(gè)好的工具。

常見GUI框架

• PyQt5^[1]：Qt^[2]是一個(gè)跨平臺(tái)的 C++圖形用戶界面庫。QT一度被諾基亞擁，后出售給芬蘭的軟件公司Digia Oyj。PyQt5是基于Digia公司Qt5的Python接口，由一組Python模塊構(gòu)成。PyQt5本身擁有超過620個(gè)類和6000函數(shù)及方法。在可以運(yùn)行于多個(gè)平臺(tái)，包括：Unix, Windows, and Mac OS。
• Pyside6^[3]：Pyside是QT公司官方提供的Python包，上一版本為Pyside2，對(duì)應(yīng)的是QT5，最新版命名規(guī)則進(jìn)行了調(diào)整，更改為Pyside6，對(duì)應(yīng)的是QT6版本。由于官方出品的比較看好，缺點(diǎn)是發(fā)布比較晚，網(wǎng)上的資料沒有PyQt5多。
• Tkinter^[4]：Python內(nèi)置的GUI框架，使用TCL實(shí)現(xiàn)，Python中內(nèi)嵌了TCL解釋器，使用它的時(shí)候不用安裝額外的擴(kuò)展包，直接import，跨平臺(tái)。不足之處在于UI布局全靠代碼實(shí)現(xiàn)，只有15種常用部件，顯示效果簡陋。
• PySimpleGUI^[5]：PySimpleGUI 是 Tkinter 一層包裝。使用 PySimpleGUI 實(shí)現(xiàn)自定義 GUI 所需的代碼量要比使用 Tkinter 直接編寫相同的 GUI 要少得多。
• WxPython^[6]：wxPython是Python語言對(duì)流行的wxWidgets跨平臺(tái)GUI工具庫的綁定。用得比較廣泛，跨平臺(tái)，C++編寫，文檔少，用戶可能就需要根據(jù)編程內(nèi)容對(duì)不同平臺(tái)中的GUI代碼做一些調(diào)整。遇到問題不好解決，代碼布局控件，不直觀。
• Wax^[7]：基于wxPython ，為克服wxPython的問題而制作的一個(gè)包。
• Kivy^[8]：主要針對(duì)多點(diǎn)觸控程序，智能手機(jī)平板等，也可以在沒有觸屏功能的系統(tǒng)上，全平臺(tái)支持（Windows, Linux, Mac OS X, Android and iOS.）使用Python和cython編寫，中文支持差，需要自己下載中文庫并且制定路徑。
• BeeWare^[9]：Write once. Deploy everywhere.需要與Kivy配合使用。
• Toga^[10]：一個(gè)使用Python開發(fā)原生APP的GUI工具包。Toga由一個(gè)具有共享接口的基礎(chǔ)組件庫組成，以簡化與平臺(tái)無關(guān)的GUI開發(fā)。Toga適用于Mac OS、Windows、Linux（GTK）以及Android和iOS等移動(dòng)平臺(tái)。
• Eel^[11]：一個(gè)輕量的 Python 庫，用于制作簡單的類似于 Electron（但是比它更輕量） 的離線 HTML/JS GUI 應(yīng)用程序，并具有對(duì) Python 功能（capabilities）和庫的完全訪問權(quán)限。
• Flexx^[12]：一個(gè)純 Python 工具包，用來創(chuàng)建圖形化界面應(yīng)用程序。其使用 Web 技術(shù)進(jìn)行界面的渲染。你可以用 Flexx 來創(chuàng)建桌面應(yīng)用，同時(shí)也可以導(dǎo)出一個(gè)應(yīng)用到獨(dú)立的 HTML 文檔。因?yàn)槭褂眉?Python 開發(fā)，所以 Flexx 是跨平臺(tái)的。只需要有 Python 和瀏覽器就可以運(yùn)行。
• pywebview^[13]是圍繞 webview 組件的輕量型跨平臺(tái)包裝器（wrapper），它允許在其自己的本機(jī) GUI 窗口中顯示 HTML 內(nèi)容。它使您可以在桌面應(yīng)用程序中使用 Web 技術(shù)，同時(shí)盡最大可能隱藏使用瀏覽器構(gòu)建GUI的事實(shí)。
• enaml^[14]：一種能夠讓你用最小的努力就可以實(shí)現(xiàn)高質(zhì)量GUI界面的的Python框架，也是一種獨(dú)特的編程語言。enaml將聲明性語言與基于約束的布局系統(tǒng)結(jié)合在一起，使用戶可以輕松地定義靈活布局的UI。enaml應(yīng)用程序可以在任何支持Python和Qt的平臺(tái)上運(yùn)行。

個(gè)人想法：太多學(xué)不完，先學(xué)PyQt5，原因是資料多，學(xué)友余力再學(xué)pyside6，最后看下PySimpleGUI，看能否解決一些簡單問題。

PyQt5簡介

PyQt是Qt框架的Python語言實(shí)現(xiàn)，由Riverbank Computing開發(fā)，是最強(qiáng)大的GUI庫之一。PyQt提供了一個(gè)設(shè)計(jì)良好的窗口控件集合，每一個(gè)PyQt控件都對(duì)應(yīng)一個(gè)Qt控件，因此PyQt的API接口與Qt的API接口很接近，但PyQt不再使用QMake系統(tǒng)和Q_OBJECT宏。

PyQt5提供GPL版和商業(yè)版證書，自由開發(fā)者可以使用免費(fèi)的GPL許可，如果需要將PyQt用于商業(yè)應(yīng)用，則必須購買商業(yè)許可。

PyQt5特性如下：

• 基于高性能的Qt的GUI控件集。
• 能夠跨平臺(tái)運(yùn)行在Linux、Window和Mac OS系統(tǒng)上。
• 使用信號(hào)槽機(jī)制進(jìn)行通信。
• 對(duì)Qt庫進(jìn)行完全封裝。
• 可以使用成熟的IDE進(jìn)行界面設(shè)計(jì)，并自動(dòng)生成可執(zhí)行的Python代碼。
• 提供一整套種類齊全的窗口控件。

PyQt5是由一系列Python模塊組成，有超過620個(gè)類，6000個(gè)函數(shù)和方法，主要模塊如下：

• QtCore：包含了核心的非 GUI 的功能。主要和時(shí)間、文件與文件夾、各種數(shù)據(jù)、流、URLs、mime 類文件、進(jìn)程與線程一起使用。
• QtGui：包含了窗口系統(tǒng)、事件處理、2D 圖像、基本繪畫、字體和文字類。
• QtWidgets：包含了一系列創(chuàng)建桌面應(yīng)用的 UI 元素。
• QtMultimedia：包含了處理多媒體的內(nèi)容和調(diào)用攝像頭 API 的類。
• QtBluetooth：包含了查找和連接藍(lán)牙的類。
• QtNetwork：包含了網(wǎng)絡(luò)編程的類，這些工具能讓 TCP/IP 和 UDP 開發(fā)變得更加方便和可靠。
• QtPositioning：包含了定位的類，可以使用衛(wèi)星、WiFi 甚至文本。
• Enginio：包含了通過客戶端進(jìn)入和管理 Qt Cloud 的類。
• QtWebSockets：包含了 WebSocket 協(xié)議的類。
• QtWebKit：包含了一個(gè)基 WebKit2 的 web 瀏覽器。
• QtWebKitWidgets：包含了基于 QtWidgets 的 WebKit1 的類。
• QtXml：包含了處理 xml 的類，提供了 SAX 和 DOM API 的工具。
• QtSvg：提供了顯示 SVG 內(nèi)容的類，Scalable Vector Graphics (SVG) 是一種是一種基于可擴(kuò)展標(biāo)記語言 (XML)，用于描述二維矢量圖形的圖形格式（這句話來自于維基百科）。
• QtSql：提供了處理數(shù)據(jù)庫的工具。
• QtTest：提供了測(cè)試 PyQt5 應(yīng)用的工具。

PyQt5的安裝

由于后期要使用fbs進(jìn)行打包，fbs對(duì)Python 3.7以后的版本可能存在兼容問題，所以我選擇了Python 3.6.8進(jìn)行了整個(gè)環(huán)境的搭建。主要內(nèi)容為：Python + PyCharm + PyQt5

安裝PyQt5

pip?install?pyqt5

pip?install?pyqt5-tools

其中pyqt5-tools為Qt Designer拖拽式的界面設(shè)計(jì)工具。安裝過程中可能會(huì)報(bào)如下錯(cuò)誤：

qt5-tools?5.15.2.1.2?has?requirement?click~=7.0,?but?you'll?have?click?8.0.1?which?is?incompatible.

解決方案：

pip?install?click~=7.0

Qt Designer的配置

Qt Designer 是通過拖拽的方式放置控件，并實(shí)時(shí)查看控件效果進(jìn)行快速UI設(shè)計(jì)。

整個(gè)畫面的構(gòu)成：

• 左側(cè)的“Widget Box”就是各種可以自由拖動(dòng)的組件
• 中間的“MainWindow – untitled”窗體就是畫布
• 右上方的”O(jiān)bject Inspector”可以查看當(dāng)前ui的結(jié)構(gòu)
• 右側(cè)中部的”Property Editor”可以設(shè)置當(dāng)前選中組件的屬性
• 右下方的”Resource Browser”可以添加各種素材，比如圖片，背景等等

最終生成.ui文件（實(shí)質(zhì)上是XML格式的文件），可直接使用，也可以通過pyuic5工具轉(zhuǎn)換成.py文件。

QtDisigner配置

在Pycharm中，依次打開 File – Settings – Tools – External Tools，點(diǎn)擊 + Create Tool，配置如下：

Name:?QtDisigner

Program?:?D:\Program?Files\Python36\Lib\site-packages\qt5_applications\Qt\bin\designer.exe?#?請(qǐng)根據(jù)實(shí)際修改

Working?directory:?$FileDir$

PyUIC配置

PyUIC主要是把Qt Designer生成的.ui文件換成.py文件。

在Pycharm中，依次打開 File – Settings – Tools – External Tools，點(diǎn)擊 + Create Tool，配置如下：

Name:?PyUIC

Program?:?D:\Program?Files\Python36\python.exe?#?當(dāng)前Python目錄，請(qǐng)根據(jù)實(shí)際修改

Arguments:?-m?PyQt5.uic.pyuic?$FileName$?-o?$FileNameWithoutExtension$.py

Working?directory:?$FileDir$

PyRCC配置

PyRCC主要是把編寫的.qrc資源文件換成.py文件。

在Pycharm中，依次打開 File – Settings – Tools – External Tools，點(diǎn)擊 + Create Tool，配置如下：

Name:?PyRCC

Program:?D:\Program?Files\Python36\pyrcc5.exe?#?當(dāng)前rcc工具目錄，請(qǐng)根據(jù)實(shí)際修改

Arguments:?$FileName$?-o?$FileNameWithoutExtension$_rc.py

Working?directory:?$FileDir$

PyQt5使用示例

創(chuàng)建一個(gè)空白的界面：

import?sys

from?PyQt5.QtWidgets?import?QApplication,?QMainWindow,?QLabel

app?=?QApplication(sys.argv)

win?=?QMainWindow()

win.setGeometry(400,?400,?400,?300)

win.setWindowTitle("Pyqt5?Tutorial")

win.show()

sys.exit(app.exec_())

其中：

• Qapplication()：每個(gè)GUI都必須包含一個(gè)Qapplication，argv表示獲取命令行參數(shù)，如果不用獲取，則可以使用[]代替。
• QMainWindow()：類似一個(gè)容器（窗口）用來包含按鈕、文本、輸入框等widgets。arg標(biāo)識(shí)可以獲取命令行執(zhí)行時(shí)的參數(shù)。
• SetGeometry是用來定義 QMainWindow() 窗口的尺寸， 語法：setGeometry(x, y, width, height )，其中x,y為屏幕上的坐標(biāo)點(diǎn)。
• show()：用來顯示窗口
• exit(app.exec_())：設(shè)置窗口一直運(yùn)行指導(dǎo)使用關(guān)閉按鈕進(jìn)行關(guān)閉

PyQt5支持的常見Widgets有：

從上到下，從左到右依次為：Qlabel、QcomboBox、QcheckBox、QradioButton、QpushButton、QtableWidget、QlineEdit、Qslider、QProgressBar

對(duì)于使用Pyqt5設(shè)置文本內(nèi)容，我們使用Qlabel：

import?sys

from?PyQt5.QtWidgets?import?QApplication,?QMainWindow,?QLabel

app?=?QApplication(sys.argv)

win?=?QMainWindow()

win.setGeometry(400,?400,?400,?300)

win.setWindowTitle("Pyqt5?Tutorial")

\#?Label?Text

label?=?QLabel(win)

label.resize(200,?100)

label.setText("Hi?this?is?Pyqt5")

label.move(100,?100)

win.show()

sys.exit(app.exec_())

按鈕與事件：

import?sys

from?PyQt5.QtWidgets?import?QApplication,?QMainWindow,?QPushButton

def?click():

????print("Hy?Button?is?clicked!")

app?=?QApplication(sys.argv)

win?=?QMainWindow()

win.setGeometry(400,?400,?400,?300)

win.setWindowTitle("Pyqt5?Tutorial")

\#?Button

button?=?QPushButton(win)

button.resize(200,?100)

button.setText("Hi!?Click?Me")

button.move(100,?100)

button.clicked.connect(click)

win.show()

sys.exit(app.exec_())

button.clicked.connect() 在按鈕點(diǎn)擊后執(zhí)行特定的事件。

PyQt5實(shí)戰(zhàn)

實(shí)戰(zhàn)項(xiàng)目：簡易的天氣查詢軟件

1、使用Qt Designer設(shè)計(jì)一個(gè)界面

用到的控件有Button, GroupBox, Label,ComboBox,TextEdit，同時(shí)定義了兩個(gè)按鈕queryBtn及clearBtn，分別用來查詢及清空天氣數(shù)據(jù)。我們需要綁定槽函數(shù)，方法如下：

• 在Qt Designer右下角選擇 信號(hào)/槽編輯器，點(diǎn)擊+號(hào)新增
• 分別選擇queryBtn及clearBtn，選擇信號(hào) clicked(), 接收者 Dialog 及槽 accept()，（槽函數(shù)這里不知道如何定義，后期在代碼里再進(jìn)行修改）

以上完成后保存為Weather.ui文件。

2、轉(zhuǎn)換.ui文件為.py文件

PyQt5支持直接使用.ui文件：

import?sys

from?PyQt5?import?QtWidgets,?uic

app?=?QtWidgets.QApplication(sys.argv)

window?=?uic.loadUi("mainwindow.ui")

window.show()

app.exec()

但是為了更好的自定義及修改上面的槽函數(shù)，可以使用External Tools – PyUIC，即可生成Weather.py，實(shí)際運(yùn)行命令如下：

D:\Program?Files\Python36\python.exe?-m?PyQt5.uic.pyuic?Weather.ui?-o?Weather.py

其中，我們需要把兩個(gè)按鈕綁定的槽函數(shù)：

\#?self.queryBtn.clicked.connect(Dialog.accept)

\#?self.clearBtn.clicked.connect(Dialog.accept)

\#?修改為：

self.queryBtn.clicked.connect(Dialog.queryWeather)

self.clearBtn.clicked.connect(Dialog.clearText)

最終的Weather.py內(nèi)容如下：

\#?-*-?coding:?utf-8?-*-

\#?Form?implementation?generated?from?reading?ui?file?'Weather.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

class?Ui_Dialog(object):

????def?setupUi(self,?Dialog):

????????Dialog.setObjectName("Dialog")

????????Dialog.resize(600,?600)

????????self.groupBox?=?QtWidgets.QGroupBox(Dialog)

????????self.groupBox.setGeometry(QtCore.QRect(30,?20,?551,?511))

????????self.groupBox.setObjectName("groupBox")

????????self.label_2?=?QtWidgets.QLabel(self.groupBox)

????????self.label_2.setGeometry(QtCore.QRect(20,?30,?31,?16))

????????self.label_2.setObjectName("label_2")

????????self.comboBox?=?QtWidgets.QComboBox(self.groupBox)

????????self.comboBox.setGeometry(QtCore.QRect(70,?30,?87,?22))

????????self.comboBox.setObjectName("comboBox")

????????self.comboBox.addItem("")

????????self.comboBox.addItem("")

????????self.comboBox.addItem("")

????????self.textEdit?=?QtWidgets.QTextEdit(self.groupBox)

????????self.textEdit.setGeometry(QtCore.QRect(20,?70,?491,?411))

????????self.textEdit.setObjectName("textEdit")

????????self.queryBtn?=?QtWidgets.QPushButton(Dialog)

????????self.queryBtn.setGeometry(QtCore.QRect(490,?560,?93,?28))

????????self.queryBtn.setObjectName("queryBtn")

????????self.clearBtn?=?QtWidgets.QPushButton(Dialog)

????????self.clearBtn.setGeometry(QtCore.QRect(30,?560,?93,?28))

????????self.clearBtn.setObjectName("clearBtn")

????????self.retranslateUi(Dialog)

????????self.clearBtn.clicked.connect(Dialog.clearText)

????????self.queryBtn.clicked.connect(Dialog.queryWeather)

????????QtCore.QMetaObject.connectSlotsByName(Dialog)

????def?retranslateUi(self,?Dialog):

????????_translate?=?QtCore.QCoreApplication.translate

????????Dialog.setWindowTitle(_translate("Dialog",?"Dialog"))

????????self.groupBox.setTitle(_translate("Dialog",?"城市天氣預(yù)報(bào)"))

????????self.label_2.setText(_translate("Dialog",?"城市"))

????????self.comboBox.setItemText(0,?_translate("Dialog",?"北京"))

????????self.comboBox.setItemText(1,?_translate("Dialog",?"蘇州"))

????????self.comboBox.setItemText(2,?_translate("Dialog",?"上海"))

????????self.queryBtn.setText(_translate("Dialog",?"查詢"))

????????self.clearBtn.setText(_translate("Dialog",?"清空"))

3、調(diào)用MainDialog

在MainDialog中調(diào)用界面類Ui_Dialog，然后在其中中添加查詢天氣的業(yè)務(wù)邏輯代碼，這樣就做到了界面顯示和業(yè)務(wù)邏輯的分離。新增demo.py文件， 在MainDialog類中定義了兩個(gè)槽函數(shù)queryWeather()和clearText(),以便在界面文件Weather.ui中定義的兩個(gè)按鈕(queryBtn 和clearBtn) 觸發(fā)clicked 信號(hào)與這兩個(gè)槽函數(shù)進(jìn)行綁定。

完整代碼如下：

import?sys

import?Weather

from?PyQt5.QtWidgets?import?QApplication,?QDialog

import?requests

class?MainDialog(QDialog):

????def?__init__(self,?parent=None):

????????super(QDialog,?self).__init__(parent)

????????self.ui?=?Weather.Ui_Dialog()

????????self.ui.setupUi(self)

????def?queryWeather(self):

????????cityName?=?self.ui.comboBox.currentText()

????????cityCode?=?self.getCode(cityName)

????????r?=?requests.get(

????????????"https://restapi.amap.com/v3/weather/weatherInfo?key=f4fd5b287b6d7d51a3c60fee24e42002&city={}".format(

????????????????cityCode))

????????if?r.status_code?==?200:

????????????data?=?r.json()['lives'][0]

????????????weatherMsg?=?'城市：{}\n天氣：{}\n溫度：{}\n風(fēng)向：{}\n風(fēng)力：{}\n濕度：{}\n發(fā)布時(shí)間：{}\n'.format(

????????????????data['city'],

????????????????data['weather'],

????????????????data['temperature'],

????????????????data['winddirection'],

????????????????data['windpower'],

????????????????data['humidity'],

????????????????data['reporttime'],

????????????)

????????else:

????????????weatherMsg?=?'天氣查詢失敗，請(qǐng)稍后再試！'

????????self.ui.textEdit.setText(weatherMsg)

????def?getCode(self,?cityName):

????????cityDict?=?{"北京":?"110000",

????????????????????"蘇州":?"320500",

????????????????????"上海":?"310000"}

????????**return**?cityDict.get(cityName,?'101010100')

????def?clearText(self):

????????self.ui.textEdit.clear()

if?__name__?==?'__main__':

????myapp?=?QApplication(sys.argv)

????myDlg?=?MainDialog()

????myDlg.show()

????sys.exit(myapp.exec_())

運(yùn)行demo.py并執(zhí)行查詢后的效果：

4、將代碼打包成exe文件

將.py文件打包成可執(zhí)行的exe在Python中稱為freezing，常用的工具有：PyInstaller, py2exe, cx_Freeze, bbfreze, py2app等。功能對(duì)比：

• py2exe：軟件更新已經(jīng)不活躍，因此也就略過。
• pyinstaller：明確支持win8、win10、理論上支持win7,，支持apple Macos, linux。pyinsaller可以打包成文件夾形式內(nèi)含exe入口執(zhí)行文件的形式，也可以是一個(gè)單獨(dú)的exe文件。
• fbs^[15]：基于PyInstaller，使用起來更加方便

這里選擇了fbs來打包。fbs的安裝方法：

pip?install?fbs

使用方法，在命令行中輸入：

fbs?startproject

執(zhí)行完成后需要輸入一些APP的名稱等。完成后會(huì)生成如下目錄：

將剛才編寫的PyQt5的代碼（demo.py和Weather.py）拖到src/main/python文件夾下，刪除原有的main.py，并將demo.py修改為main.py。然后打開 main.py，在文件頭部添加如下代碼：

from?fbs_runtime.application_context.PyQt5?import?ApplicationContext

完成后執(zhí)行：

fbs?freeze

即可實(shí)現(xiàn)打包。生成的exe可執(zhí)行文件在\target\MyApp文件下。

參考資料