[PyQt5] 基本教學(1) 安裝 PyQt5，印出 Hello World!

Last Updated on 2021-04-11 by Clay

在 Python 當中，如果你想要快速製作出一個好看的界面，想必你會率先想到的要使用 Tkinter、PyGame、PyQt5 ...... 諸如此類的開發框架。

當然以上的都是非常好用的開發框架！（因為我都必須依靠他們 XD），不過今天我想要紀錄的便是其中相當著名的 PyQt5。不過雖然我推薦它，但這也不代表其他的開發框架不好，其實大家都可以試試看、找到自己覺得用起來最順手的。

之所以研究 PyQt5，最早是因為開始使用 Python 進行一些簡單的用戶界面的程式，所以開始慢慢啃各式各樣的 PyQt5 教學。因此，我也順便把學習的心得筆記放上來，好讓我之後可以方便查閱 XD

今天主要先介紹怎麼配置安裝環境，本次心得筆記的記述可能著重在 PyCharm 這個 IDE 上，習慣使用其他 IDE 的朋友就參考參考了。

如果想學習 Python 基本語法的朋友，不妨參閱我寫的： Python 基本教學

下載 & 安裝

首先我們必須安裝以下兩個套件：

pip3 install PyQt5
pip3 install pyqt5-tools

其中 PyQt5 便是我們要安裝的套件名稱；pyqt5-tools 裡面則是包含了圖形界面開發程式 QtDesigner.exe。

這裡建議不要裝在 PyCharm 專案的虛擬環境裡，而是直接裝在系統上。因為 PyCharm 的虛擬環境是綁專案的，所以若是要像下方那樣設定快捷啟動，那就要避免 QtDesinger.exe 的路徑改變。而萬一直接裝在某一個專案的虛擬環境裡面的話，很容易不小心忘記，最後在專案已經完成了之後就直接整個砍掉了。

安裝好了之後，要確認自己知道安裝的路徑，好讓我們等一下可以設定 PyCharm 的快速啟動

設定 PyCharm 中 Qt Designer 的快速啟動

都安裝好後，我們為了以後能快速啟動，而需要去 PyCharm 裡設定 external tool。

點擊右上方 File -> Settings -> Tools -> External Tools，之後便會來到這個畫面。

你的畫面裡面應該不會有我事先設定好的三個工具 —— 當然啦，因為你還沒有設定嘛！在這裡我來紀錄一下如何設定。（我很怕我將來忘記）

按 External Tools 左上角的 + 號，會跳出一個視窗。

可以參考我的資料格式來填，雖然我在此是以 Windows 作業系統舉例，但無論哪個作業系統只要路徑對應該都可以成功的：

• Name: Qt Designer (名稱隨意)
• Program: C:\Users\"你的 user 名稱"\PycharmProjects\"當前專案名稱"\venv\Lib\site-packages\pyqt5_tools\designer.exe
• Working directory: $ProjectFileDir$

你的 designer.exe 的路徑可能會和我的不同！記得要填入自己的哦！

Working directory 填入的是指『當前專案資料夾』，所以就算以後開一個新的專案，應當也可以正常運作。

下面再設定另一個重要的工具 PyUIC：

你同樣可以參考我的填：

• Name: PyUIC
• Program: C:\Users\" 你的 user 名稱 "\PycharmProjects\ "當前專案名稱" \venv\Scripts\pyuic5.exe
• Arguments: $FileName$ -o $FileNameWithoutExtension$.py
• Working directory: $ProjectFileDir$

這邊一樣重複提醒：你的 pyuic5.exe 很有可能和我的路徑不同，要記得填入你自己的哦！

另外，Arguments 方面，僅僅只是設定我們轉換的檔案名稱。

沒錯！剛剛我還沒解說這個 PyUIC 的功能。

首先 Qt Designer 產生的界面檔案並不是 Python 的 .py 檔，我們需要使用 PyUIC 來自動轉換 .ui 檔成 .py 檔，這樣我們才好實現後面程式邏輯的部份。

打開 PyCharm 上方的 Tools -> External Tools，有沒有看到 Qt Designer 和 PyUIC 呢？如果有，那麼我們就大功告成啦！

點擊 Qt Designer，啟動我們設計界面的程式。

Hello World!

如果到這一步都沒有問題，那我們來測試這個界面工具是否能順利產生 Python 撰寫的界面吧！

從左邊的 Tool Box 拉出 Label 這個元件，將其放置到我們設計圖的視窗中。

然後我們存檔，存檔路徑就選當前 PyCharm 我們正開著的專案底下吧。

會產生像這樣子的 ui 檔。然後我們對著它按右鍵，再次選擇 External Tools -> PyUIC，然後就會自動轉換出全新的 Python 檔案啦！

不過這裡要注意一下！你要轉換的 .ui 檔應該放在 Project 的根目錄底下，不要像我這樣放在 UI 資料夾裡，我是轉換好才移動過去的。

我們可以簡單地來看下產生的檔案：

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

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

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(0, 0, 791, 561))
        self.label.setObjectName("label")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 25))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

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

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.label.setText(_translate("MainWindow", "TextLabel"))

我們可以看到自動生成的檔案裡面定義了我們的 MainWindow、label、menubar、statusbar ......等等的元件。

為了測試界面功能，我們暫時只需要注意 label 是否有被定義。

然後，我們開啟一個新的 Python 檔案，這是為了讓我們的邏輯程式與界面分離。

from PyQt5 import QtWidgets, QtGui, QtCore
from UI.Label import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.ui.label.setText('Hello World!')


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

值得注意的是，UI.Label 是我剛生成的那份檔案的路徑，我匯入它剛才定義的 class Ui_MainWindow。

緊接著，我自己新建立了一個 class MainWindow，繼承了原先的界面類別。這樣做的好處是我可以隨意定義我所控制的每個元件的屬性、功能，而不會影響到界面的程式。

也可以說，將來如果需要改動界面，那只需要從 Designer 那邊改，而不需要動到我們的程式。反過來說，若是我們的程式直接寫在界面檔案裡的話，那麼我們每次只要一改動界面外觀，重新透過 PyUIC 轉換成界面檔，我們之前所寫過的功能會被全部洗掉，很不方便。

self.ui.label.setText('Hello World!') 這邊我們設定好了 label 會顯示什麼樣子的文字。底下執行的部份，使用 show() 來顯示視窗。

我們的成品：

那麼，我們 PyQt5 的初步筆記就到這裡，希望大家可以多試試一些其他的元件。我若有再測試更多的內容，也會再寫成筆記放上來。（最主要是因為我真的會查自己的網站 XDD）

References

• https://www.riverbankcomputing.com/static/Docs/PyQt5/index.html?highlight=qicon

Read More

• [PyQt5] 基本教學(1) 安裝 PyQt5，印出 Hello World!
• [PyQt5] 基本教學(2) QLabel, QLineEdit, QPushButtom
• [PyQt5] 基本教學(3) QMainWindow, QIcon, QPixmap, QPalette
• [PyQt5] 基本教學(4) 菜單、工具欄
• [PyQt5] 基本教學(5) 進度條、滑動條、旋轉鈕
• [PyQt5] 基本教學(6) 下拉選單、BoxLayout
• [PyQt5] 基本教學(7) hide, show, 自動適應窗口大小
• [PyQt5] 基本教學(8) QTimer, QlcdNumber
• [PyQt5] 基本教學(9) QCalendar，使用 Python 輕鬆創造日曆元件
• [PyQt5] 基本教學(10) 使用鍵盤輸入指令、判斷滑鼠點擊位置
• [PyQt5] 基本教學(11) 使用 QColorDialog 調色盤來進行顏色的設定