Skip to content

[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


Read More

Leave a Reply