Debby's blog

這篇 post 的主要目標是快速掌握使用 qt designer 設計 GUI 的流程

因此對於各個 UI 元件就沒多加著墨了~

1. 開啟 Qt Designer

開啟後會跳出下面那個小視窗

選擇第一個按"建立"

這時就會出現一個基本的視窗畫面

2. 將需要的 components 拉至視窗中 (在此這步先略過)

3. 將編輯好的 .ui 檔案儲存 

以下圖為例

我將剛剛拉好的 UI 介面存成 shift_test.ui

4.將 .ui 檔轉成 .py 檔

剛剛拉好的介面需要轉成 python 檔後才能執行

因此我們需要用到下面的指令
指令: pyuic5 shift_test.ui > shift_test.py

這時我們可以看看 shift_test.py的內容

裡面有個叫 Ui_Dialog 的 class

這是等等會需要用到的

5. python 主程式 (ex: app.py)

剛剛產生的 shift_test.py 其實只是在定義各個元件和其屬性而已

要能真的讓程式執行我們需要寫一個主要的 .py 檔

以下是範例 code : 

import sys
from PyQt5.QtWidgets import QDialog, QApplication
from shift_test import Ui_Dialog

class AppWindow(QDialog):
    def __init__(self):
        super().__init__()
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)
        self.show()

app = QApplication(sys.argv)
w = AppWindow()
w.show()
sys.exit(app.exec_())

這邊記得要 import 剛剛產生的 shift_test.py 中的 Ui_Dialog class (第三行)

存檔後就可以執行了

指令: python app.py

這時就會看到剛剛拉的那個 UI 介面跳出來了

點 OK 或是 Cancel 都可以結束程式

Done!