本篇目的：學會使用 QT designer 做出介面，並在 python 中呼叫它

前言

本專欄前面的 Day 3~ Day 8 皆是在說明如何做出整理 data 的腳本。這套腳本雖然是一個功能完整的骨架，但只有懂得人才能去使用它。俗話說 "人要衣裝，佛要金裝，App 要 UI 裝“，我們若要讓所有人都能正確使用這套骨架，就必須替它套上一層皮膚，也就是 UI。

本專欄即將進入第二部分 “建構 UI 並與 Python 腳本搭配"。早期建構 UI 時必須從 code 中想像它是甚麼樣子，但現在有非常方便的視覺化界面可供使用。本文會提供 QT designer 的基礎操作，讓我們可以方便的建構出第一個 UI。

什麼狀況下該搭配 UI 介面

不可否認若是我們的腳本只有單人、單次的使用，直接在 cmd 中執行會是較快較方便的選擇。但若我們想實踐的功能很複雜、有以下狀況，建議還是作出 UI 並封裝成 exe 檔：

• 需要大量的自定義參數：分析 wafer 少不了大量的 SPEC、bin 設定，每個產品的設定還不太一樣。使用 UI + 儲存/載入參數的功能可以有效管理這些設定

• 需要引導使用者正確使用腳本：UI 介面可透過限制輸入內容、下拉式選單等避免異常設定。若你的腳本要讓 OP 操作一定少不了這一關，就算你不想做、製造部門也會壓著你做

• 需要分段與重複呼叫：由於 function 的執行是透過 UI 內的元件觸發，因此我們可以分段或重複執行讀檔、運算、繪圖流程，可以減少不必要的讀寫流程 (例如運算時讀一次檔、然後繪圖時又讀一次檔)。

• 需要圖或表的及時回饋與修正：我們可以透過作出會即時回饋的 UI 介面，快速驗證資料呈現的效果 (例如 mapping 圖的區間)。

• 需要耳根清靜：相信我們都遇過同事說 "幫忙順手算一下啦” 的情景，這時候我們就把腳本打包請他自行作業吧

• 需要向上管理 ：我們的大多數主管應該都看不懂 code，但做出省時的工具應該要被納入績效內，這時候就做成 exe 檔並且直接演示吧

QT designer 的初嘗試

如同 Day 2 所說明，本篇專欄會選用 PySide6 作為製作專案的模組。PySide6 在安裝時也一並安裝了 QT designer，本段落會簡單介紹它的用法。

如何開啟 QT designer 與建立第一個視窗

1. 到以下路徑開啟 QT designer

   您的虛擬環境路徑\.venv\Lib\site-packages\PySide6
   

2. 因為我們這次是要建立一個有標題列 (就是右上角有一/ 口/ X) 的視窗，因此請選擇 Main Window，這時候我們就成功叫出第一個主視窗 (Main Window) 了
   

如何在視窗中加入物件

按住我們想要的元件並放入視窗中即可

如何匯出 UI code 並實際叫出 UI 視窗

1. 點選表單→檢視 python 程式碼

2. 點選左上方的儲存並存成 py 檔。這個檔案建議放在專案的 UI 資料夾中，並命名為 UI.py

3. 在專案資料夾建立一個 main.py ，並輸入以下內容

   import sys
   from PySide6.QtWidgets import *
   
   from UI.mainUI import *
   
   
   class MyMainWindow(QMainWindow, Ui_MainWindow):
       def __init__(self, parent=None):
   
           super(MyMainWindow, self).__init__(parent)
   
           # 設定寫在 UI.py 的物件到主視窗去
           # 可以去 UI.py 看看 setupUi 的實際內容
           self.setupUi(self) 
   
   
   if __name__ == "__main__":
   
       # 建立QApplication物件，管理UI內各種widget的行為
       app = QApplication(sys.argv)
   
       # 將UI實體化
       myWin = MyMainWindow()
   
       # 顯示UI
       myWin.show()
   
       # app.exec()開啟app
       # exec():使app 進入loop並保持開啟，直到exit()被呼叫
       sys.exit(app.exec())
   

4. 在 cmd 執行 main.py 就可以看見 UI 介面跳出

To be continued →

了解 QT designer 內常用元件的對應用途