PyQt完整入門教程 | 例程附代碼

1、GUI開發(fā)框架簡介

pyqt是個(gè)好東西，可以做完整的測試方案、腳本、工具進(jìn)行整合復(fù)用等等，本文將以一個(gè)實(shí)例和大家一起分享。先給自己挖個(gè)坑開個(gè)頭，以后就不得不分享了。

1.1 通用開發(fā)框架

• electorn：基于node-js，跨平臺，開發(fā)成本低，運(yùn)行效率低

• qt：基于C++，跨平臺，效率高，開發(fā)成本高

• javafx：基于java，主要用于跨平臺桌面程序開發(fā)

• flutter：基于dart語言，谷歌開源移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面

1.2 Python方案

• PyQT：PyQt5是Qt v5的Python版本，功能強(qiáng)大復(fù)雜，提供QT Designer設(shè)計(jì)UI （GPL V3協(xié)議，開源，商用收費(fèi)）

• Pyside: PySide2是來自QT for Python項(xiàng)目的官方Python模塊 （LGPL協(xié)議，閉源商用）

• Tkinter：Python標(biāo)準(zhǔn)庫，Tk GUI 工具包的接口 ，布局通過代碼實(shí)現(xiàn)，簡單易用，但開發(fā)效率低

• WxPython：開源免費(fèi)，提供wxFormbuilder，壓縮版PyQT

因?yàn)楝F(xiàn)有腳本絕大多數(shù)是基于Python開發(fā)，同時(shí)調(diào)研了上述框架的官方支持力度及網(wǎng)絡(luò)資料豐富程度，最終還是選用了最流行最強(qiáng)大的PyQt 。

本文主要詳細(xì)介紹下PyQt5完整入門教程，包含環(huán)境配置，使用Qt Disinger設(shè)計(jì)UI，最終完成一個(gè)天氣預(yù)報(bào)的GUI實(shí)例開發(fā)。

環(huán)境為：Windows 10 + Python 3.8 + PyCharm 2019.2

2、PyQt環(huán)境配置

2.1 PyQt5 及 pyqt5-tools 安裝

PyQt當(dāng)前版本為PyQt5 5.14.1

直接pip安裝即可：

pip install PyQt5
pip install pyqt5-tools

建議使用國內(nèi)源，進(jìn)行快速安裝：

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配置環(huán)境

啟動PyCharm后，新建一個(gè)PyQt5空項(xiàng)目后，需要配置Qt Designer、pyuic、pyrcc工具，相關(guān)配置方法如下：

2.2.1 Qt Designer

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

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

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

Name: QtDisigner
Program : C:\Python38\Lib\site-packages\pyqt5_tools\Qt\bin\designer.exe # 當(dāng)前designer目錄，請根據(jù)實(shí)際修改
Working directory: $FileDir$

2.2.2 Qt Designer 漢化

默認(rèn)Qt Designer是英文版的，可以使用翻譯文件進(jìn)行漢化，下載地址：百度網(wǎng)盤，提取碼：kxvx

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

C:\Python38\Lib\site-packages\pyqt5_tools\Qt\bin\translations在PyCharm主界面，依次點(diǎn)擊 Tools - External Tools - QtDisigner，即可啟動中文界面的Qt Disigner

2.2.3 PyUIC配置

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

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

Name: PyUIC
Program : C:\Python38\python.exe # 當(dāng)前Python目錄，請根據(jù)實(shí)際修改
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，點(diǎn)擊 + Create Tool，配置如下：

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

3、實(shí)例開發(fā)

下面我們以一個(gè)簡單的城市天氣預(yù)報(bào)為例，演示使用PyQt5開發(fā)一個(gè)GUI程序的基本流程。

3.1 獲取天氣數(shù)據(jù)

主要邏輯是通過Http接口調(diào)用免費(fèi)的API接口獲取相關(guān)城市天氣數(shù)據(jù)，詳見天氣API說明

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

返回成功狀態(tài)（status）為：200 ，失敗為非200，返回?cái)?shù)據(jù)為json數(shù)據(jù)，直接解析獲取即可。

3.1 設(shè)計(jì)界面UI

打開Qt Designer，可參考下圖設(shè)計(jì)Weather.ui:

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

1. 在Qt Designer右下角選擇 信號/槽編輯器，點(diǎn)擊+號新增

2. 分別選擇queryBtn及clearBtn，選擇信號 clicked(), 接收者 Dialog 及槽 accept() （我沒找到綁定自定義槽函數(shù)的方法...）

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

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

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

C:\Python38\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)

修改為自定義函數(shù)：

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.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", "城市天氣預(yù)報(bào)"))
        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 調(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 信號與這兩個(gè)槽函數(shù)進(jìn)行綁定。

完整代碼如下:

# 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風(fēng)力：{}\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_())

最終運(yùn)行顯示效果如下：

4、參考資料

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

http://code.py40.com/face

原文：https://www.cnblogs.com/lovesoo/p/12491361.html