PyQt完整入門教程

1、GUI開發框架簡介

19年來，一直在做Android ROM相關測試，也有了一定的積累；20年，計划把之前完整的測試方案、腳本、工具進行整合復用。
第一期計划是開發一個GUI的測試工具，近期也進行了相關調研。

1.1 通用開發框架

• electorn：基於node-js，跨平台，開發成本低，運行效率低
• qt：基於C++，跨平台，效率高，開發成本高
• javafx：基於java，主要用於跨平台桌面程序開發
• flutter：基於dart語言，谷歌開源移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面

1.2 Python方案

• PyQT：PyQt5是Qt v5的Python版本，功能強大復雜，提供QT Designer設計UI （GPL V3協議，開源，商用收費）
• Pyside: PySide2是來自QT for Python項目的官方Python模塊 （LGPL協議，閉源商用）
• Tkinter：Python標准庫，Tk GUI 工具包的接口 ，布局通過代碼實現，簡單易用，但開發效率低
• WxPython：開源免費，提供wxFormbuilder，壓縮版PyQT

因為現有腳本絕大多數是基於Python開發，同時調研了上述框架的官方支持力度及網絡資料豐富程度，最終還是選用了最流行最強大的PyQt 。

本文主要詳細介紹下PyQt5完整入門教程，包含環境配置，使用Qt Disinger設計UI，最終完成一個天氣預報的GUI實例開發。

環境為：Windows 10 + Python 3.8 + PyCharm 2019.2

2、PyQt環境配置

2.1 PyQt5 及 pyqt5-tools 安裝

PyQt當前最新版本為PyQt5 5.14.1

直接pip安裝即可：

pip install PyQt5
pip install pyqt5-tools

建議使用國內源，進行快速安裝：

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyqt5
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyqt5-tools

2.2 PyCharm配置環境

啟動PyCharm后，新建一個PyQt5空項目后，需要配置Qt Designer、pyuic、pyrcc工具，相關配置方法如下：

2.2.1 Qt Designer

Qt Designer 是通過拖拽的方式放置控件，並實時查看控件效果進行快速UI設計。

最終生成.ui文件（實質上是XML格式的文件），可以通過pyuic5工具轉換成.py文件。

在Pycharm中，依次打開 File - Settings - Tools - External Tools，點擊 + Create Tool，配置如下：

Name: QtDisigner
Program : C:\Python38\Lib\site-packages\pyqt5_tools\Qt\bin\designer.exe # 當前designer目錄，請根據實際修改
Working directory: $FileDir$

2.2.2 Qt Designer 漢化

默認Qt Designer是英文版的，可以使用翻譯文件進行漢化，下載地址：百度網盤，提取碼：kxvx

下載文件 designer_zh_CN.qm后， 拷貝至本地pyqt5_tools的translations文件夾下即可，示例目錄：

C:\Python38\Lib\site-packages\pyqt5_tools\Qt\bin\translations

在PyCharm主界面，依次點擊 Tools - External Tools - QtDisigner，即可啟動中文界面的Qt Disigner

2.2.3 PyUIC配置

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

在Pycharm中，依次打開 File - Settings - Tools - External Tools，點擊 + Create Tool，配置如下：

Name: PyUIC
Program : C:\Python38\python.exe # 當前Python目錄，請根據實際修改
Arguments: -m PyQt5.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py
Working directory: $FileDir$

2.2.4 PyRCC配置

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

在Pycharm中，依次打開 File - Settings - Tools - External Tools，點擊 + Create Tool，配置如下：

Name: PyRCC
Program : C:\Python38\Scripts\pyrcc5.exe # 當前rcc工具目錄，請根據實際修改
Arguments: $FileName$ -o $FileNameWithoutExtension$_rc.py
Working directory: $FileDir$

3、實例開發

下面我們以一個簡單的城市天氣預報為例，演示使用PyQt5開發一個GUI程序的基本流程。

3.1 獲取天氣數據

主要邏輯是通過Http接口調用免費的API接口獲取相關城市天氣數據，詳見天氣API說明

如測試一下請求天津的天氣，鏈接為：http://t.weather.sojson.com/api/weather/city/101030100

返回成功狀態（status）為：200 ，失敗為非200，返回數據為json數據，直接解析獲取即可。

3.1 設計界面UI

打開Qt Designer，可參考下圖設計Weather.ui:

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

1. 在Qt Designer右下角選擇 信號/槽編輯器，點擊+號新增
2. 分別選擇queryBtn及clearBtn，選擇信號 clicked(), 接收者 Dialog 及槽 accept() （我沒找到綁定自定義槽函數的方法...）

最后選擇保存為 Weather.ui文件。

3.2 轉換.ui文件為.py文件

在PyCharm中選中Weather.ui文件后，右鍵選擇 External Tools - PyUIC，即可生成Weather.py，實際運行命令如下：

C:\Python38\python.exe -m PyQt5.uic.pyuic Weather.ui -o Weather.py

其中，我們需要把兩個按鈕綁定的槽函數：

        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內容如下：

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

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


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_Dialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName("Dialog")
        Dialog.resize(400, 300)
        self.groupBox = QtWidgets.QGroupBox(Dialog)
        self.groupBox.setGeometry(QtCore.QRect(0, 0, 391, 241))
        self.groupBox.setObjectName("groupBox")
        self.textEdit = QtWidgets.QTextEdit(self.groupBox)
        self.textEdit.setGeometry(QtCore.QRect(20, 50, 351, 181))
        self.textEdit.setObjectName("textEdit")
        self.comboBox = QtWidgets.QComboBox(self.groupBox)
        self.comboBox.setGeometry(QtCore.QRect(100, 20, 91, 20))
        self.comboBox.setObjectName("comboBox")
        self.comboBox.addItem("")
        self.comboBox.addItem("")
        self.comboBox.addItem("")
        self.label = QtWidgets.QLabel(self.groupBox)
        self.label.setGeometry(QtCore.QRect(30, 20, 61, 21))
        self.label.setObjectName("label")
        self.queryBtn = QtWidgets.QPushButton(Dialog)
        self.queryBtn.setGeometry(QtCore.QRect(40, 250, 75, 23))
        self.queryBtn.setMaximumSize(QtCore.QSize(75, 16777215))
        self.queryBtn.setObjectName("queryBtn")
        self.clearBtn = QtWidgets.QPushButton(Dialog)
        self.clearBtn.setGeometry(QtCore.QRect(250, 250, 75, 23))
        self.clearBtn.setMaximumSize(QtCore.QSize(75, 16777215))
        self.clearBtn.setObjectName("clearBtn")
        
        self.retranslateUi(Dialog)
        self.queryBtn.clicked.connect(Dialog.queryWeather)
        self.clearBtn.clicked.connect(Dialog.clearText)
        QtCore.QMetaObject.connectSlotsByName(Dialog)
    
    def retranslateUi(self, Dialog):
        _translate = QtCore.QCoreApplication.translate
        Dialog.setWindowTitle(_translate("Dialog", "Dialog"))
        self.groupBox.setTitle(_translate("Dialog", "城市天氣預報"))
        self.comboBox.setItemText(0, _translate("Dialog", "北京"))
        self.comboBox.setItemText(1, _translate("Dialog", "上海"))
        self.comboBox.setItemText(2, _translate("Dialog", "天津"))
        self.label.setText(_translate("Dialog", "城市"))
        self.queryBtn.setText(_translate("Dialog", "查詢"))
        self.clearBtn.setText(_translate("Dialog", "清空"))

3.3 調用MainDialog

在MainDialog中調用界面類Ui_Dialog，然后在其中中添加查詢天氣的業務邏輯代碼，這樣就做到了界面顯示和業務邏輯的分離。

新增demo.py文件， 在MainDialog類中定義了兩個槽函數queryWeather()和clearText(),以便在界面文件Weather.ui中定義的兩個按鈕(queryBtn 和clearBtn) 觸發clicked 信號與這兩個槽函數進行綁定。

完整代碼如下:

# coding:utf-8

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("http://t.weather.sojson.com/api/weather/city/{}".format(cityCode))
        
        print(r.json())
        
        if r.json().get('status') == 200:
            weatherMsg = '城市：{}\n日期：{}\n天氣：{}\nPM 2.5：{} {}\n溫度：{}\n濕度：{}\n風力：{}\n\n{}'.format(
                r.json()['cityInfo']['city'],
                r.json()['data']['forecast'][0]['ymd'],
                r.json()['data']['forecast'][0]['type'],
                int(r.json()['data']['pm25']),
                r.json()['data']['quality'],
                r.json()['data']['wendu'],
                r.json()['data']['shidu'],
                r.json()['data']['forecast'][0]['fl'],
                r.json()['data']['forecast'][0]['notice'],
            )
        else:
            weatherMsg = '天氣查詢失敗，請稍后再試！'
        
        self.ui.textEdit.setText(weatherMsg)
    
    def getCode(self, cityName):
        cityDict = {"北京": "101010100",
                    "上海": "101020100",
                    "天津": "101030100"}
        
        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_())

最終運行顯示效果如下：

完整demo地址：https://github.com/lovesoo/test_demo/tree/master/PyQt5

4、參考資料

1. https://www.riverbankcomputing.com/static/Docs/PyQt5/

2. http://code.py40.com/face

3. 《PyQt5快速開發與實戰 PDF》 網盤地址 提取碼：k3xx