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 功能。

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

1. Qt Translations Directory: D:Anaconda3envspyqt5Libsite-packagesPyQt5Qttranslations
2. Qt Tools: D:Anaconda3envspyqt5Libsite-packagesqt5_applicationsQtbin

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

範例程式

將 ui 轉 py 的程式如下

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

# Form implementation generated from reading ui file 'D:YJerictestdia.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 介面了，這樣就可以專注開發程式功能。基本上就先記錄到這，大部分功能實現，其實在網路上都能找到範例，當發現一個元件之後，最好是再去看官方文件了，畢竟官方文件絕對比任何一個參考書還詳細，所以從官方文件中，了解這個類別有什麼方法可以使用，可以節省更多時間在找資料上。

參考

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