【PyQt5】PyQt5 安裝 以及使用 designer 開發 python GUI 界面

PyQt5

• 首先安裝 Pyhon！
• PyQt5、pyqt5-tools 安裝
• • 安裝可能遇到的問題
• Qt Creator 簡單介紹
• • 界面構成介紹
• 開發一個最簡單的 GUI 程式
• • 拖動布局出一個界面
  • 儲存并将界面轉換為 .py 檔案
  • 運作編寫的 GUI 程式
  • 元件自适應、UI 與 邏輯分離
• 簡單的事件處理
• • 給元件設定 id
  • 通過 id 設定觸發函數
  • 實作觸發函數
  • 運作編寫的 GUI 程式
• 複雜一點的程式：匯率轉換器
• • 拖動布局出界面
  • function.partial 傳參
  • 編寫 convert 函數
  • 運作編寫的 GUI 程式

Qt 官方文檔：https://doc.qt.io/archives/qt-4.8/qtgui-module.html

本文參考了：PyQt5（designer）入門教程

首先安裝 Pyhon！

安裝途徑有兩個：

• Python官網

  

• 微軟商店搜尋

  Python

  

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()

後面加入下面這行代碼。

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

• 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

傳參，我們就要在程式（

main.py

）的頭部加上下面這行。

from functools import partial
           

然後我們把上一節中的按鈕觸發那行代碼修改成下面這樣即可：

函數名為

convert

，接收一個參數

ui

。

編寫 convert 函數

我們給 按鈕 設定 ID 為

convertButton

，左文本框 設定 ID 為

leftLine

，給 右文本框 設定 ID 為

rightLine

。

首先，我們要擷取使用者輸入的數字，擷取文本使用的是

text()

方法，是以讀取使用者輸入的代碼如下：

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

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

convert

函數完整代碼：

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

運作編寫的 GUI 程式