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
- [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 調色盤來進行顏色的設定