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，分別用來查詢及清空天氣資料，我們需要系結槽函式，方法如下：

在Qt Designer右下角選擇信號/槽編輯器，點擊+號新增
分別選擇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、參考資料

https://www.riverbankcomputing.com/static/Docs/PyQt5/
http://code.py40.com/face
《PyQt5快速開發與實戰 PDF》網盤地址提取碼：k3xx

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/177294.html

標籤：Python

上一篇：QuantLib 金融計算——自己動手封裝 Python 介面（3）

下一篇：Python中的命名空間是什么？