Qt Designer

學習內容：

• 使用 Qt Designer 設計簡單的 GUI。
• 添加元件（PushButton）並設定屬性。
• 使用 PyQt6 程式載入並連接 UI。

教學錄影

核心概念：

1. Qt Designer： Qt Designer 是一個專門設計 GUI 的工具，能快速構建視覺化的應用介面，並導出 .ui 文件供程式使用。

2. PyQt6： PyQt6 提供了載入 .ui 文件的方法，讓程式可以控制介面中的元件。

3. 信號與槽： PyQt 使用信號與槽（Signal and Slot）機制，連接 GUI 的按鈕事件與程式功能。

操作步驟：

1. 使用 Qt Designer 設計 UI

1. 開啟 Qt Designer：在命令列輸入 pyqt6-tools designer 啟動。
2. 選擇 Widget：
   • 在彈出的窗口中選擇 Widget，然後點擊 Create。
3. 添加 PushButton：
   • 從左側的工具欄找到 PushButton，拖放到主窗口。
4. 設定文字：
   • 雙擊按鈕並將文字設為 Quit。
5. 設定屬性：
   • 在右側的屬性編輯器中找到 objectName，將其設為 quitButton。
6. 預覽:

   • 按下 Ctrl+R 預覽執行結果。

     

   • 視窗出現可按視窗關閉鍵關閉視窗。

7. 保存文件：
   • 將設計完成的介面保存為 uitest.ui。

2. 撰寫程式

以下是載入 uitest.ui 並實現按鈕退出功能的完整程式碼。

from PyQt6.QtWidgets import QApplication, QWidget, QPushButton
from PyQt6 import uic
import sys

class UI01(QWidget):
    def __init__(self):
        super().__init__()
        # 載入 UI 文件
        uic.loadUi('uitest.ui', self)

        # 連接按鈕 quitButton 到退出功能
        self.quitButton.clicked.connect(self.close)

# 主程式
if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = UI01()
    window.show()
    sys.exit(app.exec())

3. 實踐檢查

測試目標：

1. 按下 Quit 按鈕時，視窗應正常關閉。
2. 如果視窗未關閉：
   • 確認按鈕的 objectName 是否正確設為 quitButton。
   • 確認 uitest.ui 文件是否存在於程式的工作目錄中。

練習

在 Qt Designer 中添加一個 Label，顯示提示文字（如 "請按下 Quit 按鈕關閉視窗"）。