【PyQt5筆記】使用 designer 開發 python GUI 界面

Qt 官方文檔：https://doc.qt.io/archives/qt-4.8/qtgui-module.html
本文參考了：PyQt5（designer）入門教程

PyQt5、pyqt5-tools 安裝

首先安裝 PyQt5 模塊：

pip install PyQt5

Qt Designer 在 Python3.5 版本從 PyQt5 轉移到了 tools，因此還需要安裝 pyqt5-tools：

pip install pyqt5-tools

安裝完畢，Win + S 搜索：designer，應該可以搜到（一開始可能沒提示，要打全）。

如果找不到，那就去找 pyqt5_tools 這個模塊的路徑，... > pyqt5_tools > Qt > bin 這個路徑可以打開 designer.exe。

如果有問題請看後面 安裝可能遇到的問題。

安裝可能遇到的問題

我遇到的問題我也記錄了一下。。。方便後人查閱：

PyQt5：This application failed to start because it could not find or load the Qt platform plugin

Qt Creator 簡單介紹

打開 designer，會彈出 New Form 界面，選擇 Main Window 然後點擊 Create 即可。

創建工程後界面如下：

界面構成介紹

簡單介紹下整個界面的構成：

• 左側的 Widget Box 是各種可以自由拖動的組件
  
• 中間的 MainWindow - untitled 窗體是畫布，可以在上面放組件
  
• 右上方的 Object Inspector 可以查看當前 UI 的結構
  
• 右側中部的 Property Editor 可以設置當前選中組件的屬性
  
• 右下方的 Resource Browser 可以添加各種素材，比如圖片，背景等等，暫時無視。
  

大致瞭解了每個板塊之後，就可以正式開始編寫 UI 了。

開發一個最簡單的 GUI 程序

編寫 GUI 有兩種方法：

• Qt Designer 進行拖動佈局
• 使用代碼進行佈局

不僅僅是 Qt Designer，在可以拖動佈局的情況下，是完全不推薦費時費力去手寫 GUI 代碼的。

拖動佈局出一個界面

利用左邊的組件，在中間的畫布上拖動出這麼一個界面：

點擊 hello 這個按鈕，在右邊將它的 objectName 修改爲 hellobutton，以後我們在代碼中就可以通過 hellobutton 來調用這個組件，對它進行一系列操作了。（看後面）

預覽界面：菜單欄 Form — Preview… 或者 快捷鍵 Ctrl + S

保存並將界面轉換爲 .py 文件

菜單欄 File — Save As，將 界面文件(.ui) 保存到某個位置。

利用 pyuic5 工具生成 Python 代碼，使用格式：pyuic5 -o name.py name.ui，
由於我們的界面文件叫做：hello.ui，因此使用如下：

pyuic5 -o hello.py hello.ui

可以看到 hello.py 已經生成：

運行編寫的 GUI 程序

直接運行剛剛生成的 hello.py 是沒用的，因爲生成的文件並沒有程序入口。

因此我們在同一個目錄下另外創建一個程序叫做 main.py，並輸入如下內容。

注意：第四行的 import hello，引入我們的 hello.py，如果是別的名字，請自行修改。

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow

import hello

if __name__ == '__main__':
    app = QApplication(sys.argv)
    MainWindow = QMainWindow()
    ui = hello.Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

然後運行 main.py，就可以看到剛剛編寫的 GUI 了。

python main.py

組件自適應、UI 與 邏輯分離

默認情況下，組件並不會自適應縮放，因此我們需要回到 Qt Designer 中進行一些額外的設置。

點擊畫布空白處，然後在上方工具欄找到 grid layout 或者 form layout，我們點擊 grid layout，再按 Ctrl + R 預覽，會發現已經可以自適應了。

順帶一提，下圖這兩個圖標用於對齊組件，非常實用。

---

因爲我們已經將 UI（hello.py / hello.ui）跟邏輯（main.py）分離，因此：

1. 保存一下當前界面的 UI 文件
2. 再通過 pyuic5 -o hello.py hello.ui 生成 py 文件

即可完成對 UI 的更新，無需改動邏輯部分（main.py）。

簡單的事件處理

剛剛寫的 hello.ui 中，我們設置的按鈕沒有實際作用，因爲我們並沒有告訴這個按鈕應該做什麼。

給組件設置 id

我們前面令 按鈕 的 id 爲 helloButton，然後我們可以在 main.py 中獲取這個按鈕。

通過 id 設置觸發函數

Qt 中有 “信號和槽(signal and slot)” 這個概念，不過目前無需深究，也無需在 Designer 中去設置對應按鈕的 信號和槽，直接在 main.py 中 MainWindow.show() 後面加入下面這行代碼。

ui.hellobutton.clicked.connect(click_success)

這行代碼給我們的組件設定另一個觸發函數：

• hellobutton 就是剛剛設定的按鈕的 id
• clicked 就是 信號，因爲是點擊，所以我們這裏用 clicked
• click_success 就是對應要調用的 槽，注意這裏函數並不寫成 click_success()

實現觸發函數

剛剛設置了按鈕的觸發並綁定了一個函數 click_success，我們就要在 main.py 中實現它。

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow

import hello

def click_hello():
    print("點擊了hellobutton按鈕!!!!!")

if __name__ == '__main__':
    app = QApplication(sys.argv)
    MainWindow = QMainWindow()
    ui = hello.Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    ui.hellobutton.clicked.connect(click_hello)
    sys.exit(app.exec_())

運行編寫的 GUI 程序

UI 跟 邏輯 分離的好處就在這裏，我們不用去管 HelloWorld.py ，直接運行修改完的 main.py。

點擊按鈕，控制檯中就會有輸出了。

複雜一點的程序：匯率轉換器

拖動佈局出界面

function.partial 傳參

在上一節，我們介紹瞭如何讓按鈕響應點擊操作，但是並沒有接受任何參數，而且只是在控制檯輸出。這次我們的程序要接收輸入的參數，再顯示會頁面上，必然會涉及到傳參，正常傳參是不行的，那麼要如何進行傳參呢？

對於傳參，有兩種解決方案：

• 使用 lambda
• 使用 functool.partial

下面我們使用 partial。

partial 的用法如下所示：第一個參數是函數名，後面的參數是接收的參數。

partial(function, arg1, arg2, ......)

要使用 partial 傳參，我們就要在程序（main.py）的頭部加上下面這行。

from functools import partial

然後我們把上一節中的按鈕觸發那行代碼修改成下面這樣即可：
函數名爲 convert，接收一個參數 ui。

ui.hellobutton.clicked.connect(partial(convert, ui))

編寫 convert 函數

我們給 按鈕 設定 ID 爲 convertButton，左文本框 設定 ID 爲 leftLine，給 右文本框 設定 ID 爲 rightLine。

首先，我們要獲取用戶輸入的數字，獲取文本使用的是 text() 方法，因此讀取用戶輸入的代碼如下：

input = ui.leftLine.text()

接着進行匯率轉換，注意這裏要進行類型轉換：

result = float(input) * 6.7

最後讓右邊的文本框顯示結果：

ui.rightLine.setText(str(result))

convert 函數完整代碼：

def convert(ui):
    input = ui.leftLine.text()
    result = float(input) * 6.7
    ui.rightLine.setText(str(result))

運行編寫的 GUI 程序