PyCharm如何使用Qt Designer

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_())
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容