PyCharm如何使用Qt Designer

Qt Designer 是一個 GUI 設計器，能可視化設計出界面。PyQT5 通過 pyuic5 工具將 Qt Designer 生成的 xxx.ui 文件轉換成 python 代碼，大大節省手工編寫界面代碼的工作量。

本篇介紹如何在 PyCharm 中集成 Qt Designer 工具，包括 QT Designer 的配置， pyuic5 的配置和調用界面代碼的方法。

pyqt5 可以使用 pip 工具來安裝：

pip install pyqt5

安裝了 pyqt5 之後，在 python 安裝目錄下面的 Scripts 文件夾中，有一個 pyuic5.exe 文件，這個可執行文件用於將 Qt Designer 生成的 ui 文件轉換爲 python 代碼。

安裝 Qt Designer

在 https://build-system.fman.io/qt-designer-download 這個網址可以下載和安裝獨立的 Qt Designer 安裝版，根據操作系統選擇合適的安裝文件進行安裝。

在 PyCharm 中配置 Qt Designer

Qt Designer 安裝後，在安裝目錄下面有一個 designer.exe 文件。打開該程序，以拖拽的方式設計界面元素。設計完成後保存爲 xxx.ui 文件。ui 文件爲 xml 格式，用於描述窗體和控件的屬性。

在 PyCharm 中配置 Qt Designer，目的是在開發的時候，在 PyCharm 中直接操作 Qt Designer，同時能方便的將 ui 文件保存到 Python 工程指定的文件夾下。通過菜單 File -> Settings 打開如下的配置界面，點擊右鍵 “+” 號配置 Qt Designer:

左邊是配置的路徑，右面是配置的參數：
Program： designer.exe 的路徑
Working Directory: 設置保存的 UI 文件位置，$FileDir$ 表示文件所在目錄。

這個配置適合調用 Qt Designer 新建窗口的情況。如果要對已經創建的 ui 文件進行編輯，爲了方便，可以再新建一個配置如下：

測試一下。比如在 Python 工程中新建一個 designer 文件夾，選中 designer 文件夾

通過菜單 Tools -> External Tools 菜單打開 qt designer:

注意這裏的 QT Designer Create 和 QT Designer Edit 都是我剛纔配置的外部工具。在 Qt Designer 中新建一個 Main Window:

在 Main Window 中拖拽幾個控件。因爲本文主要講解 Qt Designer 的用法，所以對控件的細節不展開。

然後將界面保存爲 MainWindow.ui，路徑爲 designer 文件夾下面。選中 MainWindow.ui，通過菜單 Tools -> External Tools -> QT Desinger Edit，MainWindow.ui 文件被 Qt Designer 打開。Qt Designer 的配置沒有問題。

配置 pyuic5

pyuic5.exe 需要安裝 pyqt5 纔有，是一個命令行工具，爲了方便，可以將 pyuic5 所在的路徑添加到環境變量中。然後使用下面的命令將 ui 文件轉換爲 python 代碼：

pyuic5 MainWindow.ui -o MainWindow.py

同樣地，爲了減少手工的操作，可以在 PyCharm 中將 pyuic5 配置爲外部工具：

這裏主要說一下 Arguments 參數，我們需要一個宏來實現文件名的靈活性，所以 Arguments 設置如下：

$FileName$ -o $FileNameWithoutExtension$.py

參數比較直觀，輸入是完整的文件名，輸出爲相同的文件名，將擴展名替換爲 py。完成這個配置後，選中 MainWindow.ui，通過菜單 Tools -> External Tools -> PyUIC5，自動將 ui 文件轉換爲 python 代碼。

如何調用界面代碼

ui 轉換的 python 代碼隨着對 ui 的變更，每次都會重新生成，所以不要在 MainWIndow.py 中編寫代碼。我們需要另外新建一個 python 文件，並在其中編寫代碼來調用界面代碼。

我們看到，qt designer 自動生成的代碼實現了一個名爲 UI_MainWindow 的類，這個類繼承自 object，在該類的 setupUi() 方法中有一個名爲 MainWindow 的參數，我們需要將真正的 QMainWindow 對象傳給這個方法，來實現我們自己的主窗口。

from designer.MainWindow import Ui_MainWindow
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow

if __name__ == '__main__':
    # application 對象
    app = QApplication(sys.argv)
    
    # QMainWindow對象
    mainwindow = QMainWindow()
    
    # 這是qt designer實現的Ui_MainWindow類
    ui_components = Ui_MainWindow()
    # 調用setupUi()方法，註冊到QMainWindwo對象
    ui_components.setupUi(mainwindow)

    # 顯示
    mainwindow.show()

    sys.exit(app.exec_())