PyQt - 使用 Qt Designer

理解 Qt Designer

Qt Designer 是 Qt 框架提供的一個強大的視覺化工具，用於快速有效地設計和構建使用者介面 (UI)。它提供了一個拖放介面，用於新增和配置各種小部件，例如按鈕、標籤、文字欄位等。當與 PyQt5 結合使用時，Qt Designer 可以簡化 UI 設計和生成 Python 程式碼的過程，從而顯著減少開發時間和工作量。

Qt Designer 通常包含在 Qt 框架安裝中。要將 Qt Designer 與 PyQt5 一起使用，請確保已在系統上安裝 PyQt5。您可以透過執行以下命令從命令列啟動 Qt Designer：

designer

Qt Designer 視窗如下所示：

建立新的 UI

要在 Qt Designer 中建立新的 UI，首先選擇“檔案”選單並選擇“新建窗體”。您可以根據要設計的 UI 型別，從各種模板中進行選擇，例如“帶底部按鈕的對話方塊”、“主視窗”、“控制元件”等。

設計 UI

建立窗體後，您可以透過將小部件從部件框拖放到窗體上來開始設計使用者介面 (UI)。Qt Designer 提供了一系列可根據您的需求進行個性化和組織的小部件。您可以使用滑鼠或 Qt Designer 中的佈局工具來調整大小、移動和對齊小部件。

生成 Python 程式碼

設計完 UI 後，您可以從 Qt Designer 生成 Python 程式碼，以將 UI 與 PyQt5 應用程式整合。在 Qt Designer 中，選擇“檔案”選單並選擇“另存為...”將 UI 檔案 (.ui) 儲存到您的專案目錄。

設計的窗體將儲存為 demo.ui。此 ui 檔案包含設計中小部件及其屬性的 XML 表示形式。此設計透過使用 pyuic5 命令列實用程式轉換為 Python 等效項。此實用程式是 Qt 工具包 uic 模組的包裝器。pyuic5 的使用方法如下：

pyuic5 -x demo.ui -o demo.py

在上述命令中，-x 開關會向生成的 Python 指令碼（來自 XML）新增少量額外的程式碼，使其成為一個可獨立執行的應用程式。

if __name__ == "__main__":
   import sys
   app = QtGui.QApplication(sys.argv)
   Dialog = QtGui.QDialog()
   ui = Ui_Dialog()
   ui.setupUi(Dialog)
   Dialog.show()
   sys.exit(app.exec_())

輸出

以上程式碼產生以下輸出：

使用者可以在輸入欄位中輸入資料，但點選“新增”按鈕不會產生任何操作，因為它沒有與任何函式關聯。對使用者生成的響應做出反應稱為事件處理。

使用 Qt Designer 的優勢

Qt Designer 是一個用於為使用 Qt 框架構建的應用程式設計圖形使用者介面 (GUI) 的強大工具。以下是使用 Qt Designer 的一些優勢：

• 視覺化設計 - Qt Designer 提供了一個視覺化介面來設計 GUI，允許開發人員將 UI 元件（如按鈕、標籤、文字框等）拖放到畫布上。這種視覺化設計方法使建立複雜的佈局變得容易，而無需手動編寫程式碼。
• 快速原型設計 - 憑藉其拖放介面，Qt Designer 促進了快速原型設計，使開發人員能夠快速建立 UI 設計的模型並有效地對其進行迭代。
• 平臺獨立性 - Qt 是一個跨平臺框架，使用 Qt Designer 設計的 GUI 本質上是平臺獨立的。這意味著使用 Qt Designer 建立的 UI 在不同的作業系統（包括 Windows、macOS、Linux 等）上將具有相同的外觀和行為。
• 與 Qt 框架整合 - Qt Designer 與 Qt 框架無縫整合，允許開發人員使用訊號和槽輕鬆地將 UI 元件連線到應用程式邏輯。這種整合簡化了開發過程，並促進了 UI 設計和應用程式邏輯的清晰分離。
• 自定義控制元件支援 - Qt Designer 支援使用自定義控制元件，使開發人員能夠透過整合第三方或自定義設計的 UI 元件來擴充套件其應用程式的功能。
• 國際化 (i18n) 支援 - Qt Designer 透過提供輕鬆將 UI 元素翻譯成不同語言的工具來促進國際化。這允許開發人員以最小的努力建立多語言應用程式。
• 促進 MVC 架構 - Qt 遵循模型-檢視-控制器 (MVC) 架構，Qt Designer 透過促進 UI 設計 (檢視) 與應用程式邏輯 (控制器/模型) 的分離來鼓勵遵守此模式。這種分離增強了程式碼的可維護性和可擴充套件性。
• UI 檔案序列化 - Qt Designer 將 UI 設計儲存在基於 XML 的 .ui 檔案中，這些檔案可以輕鬆地序列化和反序列化。這種檔案格式是人類可讀的，並且可以進行版本控制，從而促進團隊成員之間的協作並實現對 UI 設計檔案的有效管理。
• 與 Qt Creator 整合 - Qt Designer 整合到 Qt Creator 中，Qt Creator 是 Qt 開發的官方 IDE。這種整合為設計 UI、編寫應用程式邏輯、除錯和測試提供了無縫的工作流程，所有這些都在單個開發環境中完成。
• 社群和資源 - Qt 擁有一個充滿活力的社群，以及大量線上文件、教程和資源。開發人員可以利用這些資源快速學習 Qt Designer，解決問題，並瞭解有關 Qt UI 設計最佳實踐和技巧的最新資訊。