使用 Qt Designer

Qt Designer是一款針對 Qt 開發者的跨平台介面開發工具，可以在 Windows、Linux 及 Mac OS 等作業系統運行，這篇教學會介紹如何安裝以及使用 Qt Designer。

快速導覽：

• 下載並安裝 Qt Designer
• 開始使用 Qt Designer
• 產生 .ui 檔案
• 轉換 .ui 檔案為 .py 程式碼檔案

下載並安裝 Qt Designer

前往 Qt Designer 下載頁面，挑選作業系統對應的軟體下載安裝。

下載頁面：Qt Designer Download

開始使用 Qt Designer

安裝 Qt Designer 後就可以開啟 Qt Designer，開啟後可先選擇 Widget，可以開啟完全空白的視窗頁面。

開啟後的 Qt Designer 會出現許多設定面板，中間 Form 為主要的視窗界面，可以從左側將元件或版型 ( Layout、Spacers、Buttons 或 Widgets...等 )，透過「滑鼠拖拉」的方式放到視窗裡，然後就可以透過 Property Editor 面板設定元件的屬性。

產生 .ui 檔案

從左側的元件面板，拖拉一些元件到視窗裡，範例中放入一個 Label 和一個 PushButton。

完成後，就可以將其儲存為 .ui 檔案。

轉換 .ui 檔案為 .py 程式碼檔案

回到輸入指令的畫面，輸入下列指令，就能將 .ui 檔案轉換為 .py 的程式碼檔案。

pyuic5 -x qt_test.ui -o qt_test.py

接著使用編輯器 ( Anaconda 或 VSCode...等 )，開啟轉換後的 .py 檔案，就能看到如下方的程式碼，執行後就可以看見 Python 搭配 PyQt5 做出來的程式介面。

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(320, 240)
        self.pushButton = QtWidgets.QPushButton(Form)
        self.pushButton.setGeometry(QtCore.QRect(100, 130, 113, 32))
        self.pushButton.setObjectName("pushButton")
        self.label = QtWidgets.QLabel(Form)
        self.label.setGeometry(QtCore.QRect(70, 70, 171, 51))
        font = QtGui.QFont()
        font.setPointSize(20)
        self.label.setFont(font)
        self.label.setAlignment(QtCore.Qt.AlignCenter)
        self.label.setObjectName("label")

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Form"))
        self.pushButton.setText(_translate("Form", "PushButton"))
        self.label.setText(_translate("Form", "TextLabel"))

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Form = QtWidgets.QWidget()
    ui = Ui_Form()
    ui.setupUi(Form)
    Form.show()
    sys.exit(app.exec_())

PyQt5 參考資料

• https://pypi.org/project/PyQt5/
• https://www.riverbankcomputing.com/software/pyqt/

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～