Qt Designer 是一個(gè) GUI 設(shè)計(jì)器,能可視化設(shè)計(jì)出界面。PyQT5 通過 pyuic5 工具將 Qt Designer 生成的 xxx.ui 文件轉(zhuǎn)換成 python 代碼,大大節(jié)省手工編寫界面代碼的工作量。
本篇介紹如何在 PyCharm 中集成 Qt Designer 工具,包括 QT Designer 的配置, pyuic5 的配置和調(diào)用界面代碼的方法。
pyqt5 可以使用 pip 工具來安裝:
pip install pyqt5
安裝了 pyqt5 之后,在 python 安裝目錄下面的 Scripts 文件夾中,有一個(gè) pyuic5.exe 文件,這個(gè)可執(zhí)行文件用于將 Qt Designer 生成的 ui 文件轉(zhuǎn)換為 python 代碼。
安裝 Qt Designer
在 https://build-system.fman.io/qt-designer-download 這個(gè)網(wǎng)址可以下載和安裝獨(dú)立的 Qt Designer 安裝版,根據(jù)操作系統(tǒng)選擇合適的安裝文件進(jìn)行安裝。
在 PyCharm 中配置 Qt Designer
Qt Designer 安裝后,在安裝目錄下面有一個(gè) designer.exe 文件。打開該程序,以拖拽的方式設(shè)計(jì)界面元素。設(shè)計(jì)完成后保存為 xxx.ui 文件。ui 文件為 xml 格式,用于描述窗體和控件的屬性。
在 PyCharm 中配置 Qt Designer,目的是在開發(fā)的時(shí)候,在 PyCharm 中直接操作 Qt Designer,同時(shí)能方便的將 ui 文件保存到 Python 工程指定的文件夾下。通過菜單 File -> Settings 打開如下的配置界面,點(diǎn)擊右鍵 “+” 號(hào)配置 Qt Designer:
左邊是配置的路徑,右面是配置的參數(shù):
Program: designer.exe 的路徑
Working Directory: 設(shè)置保存的 UI 文件位置,$FileDir$ 表示文件所在目錄。
這個(gè)配置適合調(diào)用 Qt Designer 新建窗口的情況。如果要對(duì)已經(jīng)創(chuàng)建的 ui 文件進(jìn)行編輯,為了方便,可以再新建一個(gè)配置如下:
測(cè)試一下。比如在 Python 工程中新建一個(gè) designer 文件夾,選中 designer 文件夾

通過菜單 Tools -> External Tools 菜單打開 qt designer:
注意這里的 QT Designer Create 和 QT Designer Edit 都是我剛才配置的外部工具。在 Qt Designer 中新建一個(gè) Main Window:
在 Main Window 中拖拽幾個(gè)控件。因?yàn)楸疚闹饕v解 Qt Designer 的用法,所以對(duì)控件的細(xì)節(jié)不展開。
然后將界面保存為 MainWindow.ui,路徑為 designer 文件夾下面。選中 MainWindow.ui,通過菜單 Tools -> External Tools -> QT Desinger Edit,MainWindow.ui 文件被 Qt Designer 打開。Qt Designer 的配置沒有問題。
配置 pyuic5
pyuic5.exe 需要安裝 pyqt5 才有,是一個(gè)命令行工具,為了方便,可以將 pyuic5 所在的路徑添加到環(huán)境變量中。然后使用下面的命令將 ui 文件轉(zhuǎn)換為 python 代碼:
pyuic5 MainWindow.ui -o MainWindow.py
同樣地,為了減少手工的操作,可以在 PyCharm 中將 pyuic5 配置為外部工具:
這里主要說一下 Arguments 參數(shù),我們需要一個(gè)宏來實(shí)現(xiàn)文件名的靈活性,所以 Arguments 設(shè)置如下:
$FileName$ -o $FileNameWithoutExtension$.py
參數(shù)比較直觀,輸入是完整的文件名,輸出為相同的文件名,將擴(kuò)展名替換為 py。完成這個(gè)配置后,選中 MainWindow.ui,通過菜單 Tools -> External Tools -> PyUIC5,自動(dòng)將 ui 文件轉(zhuǎn)換為 python 代碼。
如何調(diào)用界面代碼
ui 轉(zhuǎn)換的 python 代碼隨著對(duì) ui 的變更,每次都會(huì)重新生成,所以不要在 MainWIndow.py 中編寫代碼。我們需要另外新建一個(gè) python 文件,并在其中編寫代碼來調(diào)用界面代碼。
我們看到,qt designer 自動(dòng)生成的代碼實(shí)現(xiàn)了一個(gè)名為 UI_MainWindow 的類,這個(gè)類繼承自 object,在該類的 setupUi() 方法中有一個(gè)名為 MainWindow 的參數(shù),我們需要將真正的 QMainWindow 對(duì)象傳給這個(gè)方法,來實(shí)現(xiàn)我們自己的主窗口。
from designer.MainWindow import Ui_MainWindow
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow
if __name__ == '__main__':
# application 對(duì)象
app = QApplication(sys.argv)
# QMainWindow對(duì)象
mainwindow = QMainWindow()
# 這是qt designer實(shí)現(xiàn)的Ui_MainWindow類
ui_components = Ui_MainWindow()
# 調(diào)用setupUi()方法,注冊(cè)到QMainWindwo對(duì)象
ui_components.setupUi(mainwindow)
# 顯示
mainwindow.show()
sys.exit(app.exec_())