PyQt5：使用 Eric6 進行 PyQt5 的開發

前言
讀研究所時，遇到的第一個工作就是把之前學長所做的東西給別人操作，既然提到操作，勢必就要製作一個介面給別人使用，當時其實也剛學 Python 不久，懵懵懂懂的我就誤打誤撞學習 PyQt5 來完成當時的工作。

除了網路的資料外，我自己也從一本參考書學到許多技巧，叫做 "Python GUI 程式設計 PyQt5 實戰"。其實這本書還沒進實驗室就買了，當時我還在用線上課程來學 Python 呢，只是沒想到居然進了研究所就要製作介面，而且直到我畢業之前都還需要介面製作，既然都做了那麼久，趁著又空閒的時間記錄一下學習過程吧。

安裝及配置

通常我新的實驗項目都會使用 Anaconda 建一個虛擬環境，藉此分開每個項目的環境，這邊我就先建一個名稱為 pyqt5 的虛擬環境並且進入環境中。

一、打開 CMD 或是 Anaconda Prompt，然後輸入以下指令

conda create -n pyqt5 python=3.7
activate pyqt5

二、接著安裝 PyQt5、pyqt5-tools 及 eric6，其中 pyqt5-tools 是用來安裝 Qt Designer，而 eric6 算是整合 Qt 功能的編輯器，相信也會有人說可以使用 PyCharm，但我覺得 eric6 用起來更流暢，就看自己習慣用什麼來寫程式了，不過我自己都會用就是了。
注：關於 PyCharm 的配置可以看 [PyQt5] 基本教學(1) 安裝 PyQt5，印出 ......略

pip install PyQt5
pip install eric-ide

這邊秀下我所使用的版本

eric-ide           21.3
PyQt5              5.15.1
pyqt5-tools        5.15.1.3.0.2
QScintilla         2.12.0

有時候版本對不到，在安裝 pyqt5-tools 會出現錯誤，並不是直接無腦安裝就好啊XD

三、都裝好之後我們先輸入 eric6，來開啟編輯器，然後設定幾個東西好整合你的 Qt 功能。

Eric6 IDE 的畫面

先在工具列找到 Setting >> Preference 開啟設定畫面，然後找到 Qt，要設定兩個路徑：

Qt Translations Directory: D:\Anaconda3\envs\pyqt5\Lib\site-packages\PyQt5\Qt\translations
Qt Tools: D:\Anaconda3\envs\pyqt5\Lib\site-packages\qt5_applications\Qt\bin

這樣就可以使用 Qt Designer 來新增 Form 了。

建立 eric6 的專案資料夾。

利用 eric6 來開啟 Qt Designer 設計介面並建立 ui 檔及轉成 py 檔。

從上面的影片中可以發現，要使用開發之前，要先建立一個專案，然後在專案裡面建立 ui 檔，而這個檔案會用 Qt Designer 來開啟，開出來的畫面就是讓你設計 GUI 的地方，最後再將建立好的 ui 檔轉成 py 檔。

範例程式
注：這邊使用的程式與影片無關，所以跑出來的介面與影片會有所不同。

將 ui 轉 py 的程式如下

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

# Form implementation generated from reading ui file 'D:\YJ\eric\test\dia.ui'
#
# Created by: PyQt5 UI code generator 5.15.1
#
# 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(400, 300)
        Dialog.setSizeGripEnabled(True)
        self.pushButton = QtWidgets.QPushButton(Dialog)
        self.pushButton.setGeometry(QtCore.QRect(90, 210, 75, 23))
        self.pushButton.setObjectName("pushButton")
        self.pushButton_2 = QtWidgets.QPushButton(Dialog)
        self.pushButton_2.setGeometry(QtCore.QRect(230, 210, 75, 23))
        self.pushButton_2.setObjectName("pushButton_2")
        self.label = QtWidgets.QLabel(Dialog)
        self.label.setGeometry(QtCore.QRect(76, 100, 231, 31))
        self.label.setObjectName("label")

        self.retranslateUi(Dialog)
        QtCore.QMetaObject.connectSlotsByName(Dialog)

    def retranslateUi(self, Dialog):
        _translate = QtCore.QCoreApplication.translate
        Dialog.setWindowTitle(_translate("Dialog", "Dialog"))
        self.pushButton.setText(_translate("Dialog", "Yes"))
        self.pushButton_2.setText(_translate("Dialog", "no"))
        self.label.setText(_translate("Dialog", "TextLabel"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Dialog = QtWidgets.QDialog()
    ui = Ui_Dialog()
    ui.setupUi(Dialog)
    Dialog.show()
    sys.exit(app.exec_())

可以看到轉出來的程式裡面定義了我們的 Dialog、Label、Button ......等等的元件。

然後另外建一個程式來讀取這個檔案，就可以將介面及功能分開撰寫程式碼了。

from PyQt5 import QtCore, QtGui, QtWidgets
from Ui_dia import Ui_Dialog
import sys

class MainWindow(QtWidgets.QDialog):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)
        self.ui.label.setText('This is test GUI!!!')


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())

結語

基本上有了 eric6 以及 Qt Designer 就可以快速建立 PyQt 的 GUI 介面了，這樣就可以專注開發程式功能。基本上就先記錄到這，大部分功能實現，其實在網路上都能找到範例，當發現一個元件之後，最好是再去看官方文件了，畢竟官方文件絕對比任何一個參考書還詳細，所以從官方文件中，了解這個類別有什麼方法可以使用，可以節省更多時間在找資料上。

參考

Python GUI 程式設計 PyQt5 實戰
The Eric Python IDE (python-projects.org)
QLabel — Qt for Python
[PyQt5] 基本教學(1) 安裝 PyQt5，印出 Hello World! - Clay-Technology World (clay-atlas.com)

搜尋此網誌

Jacky's Blog