Skip to content

[PyQt5] 在 Mac OS 中安裝 Qt Designer 方法筆記

Last Updated on 2023-05-28 by Clay

Qt Designer 是一個專用於 Python PyQt5 圖形化介面框架的輔助程式，簡單來說，就是有一個圖形化介面，輔助我們拉出自己想要的程式介面，十分方便好用。

在 Windows 和 Linux 中的安裝教學我都寫過，感覺也都比較單純，唯有 Mac OS 上一直聽說只能裝比較龐大的 Qt Creator，讓我有些望而卻步。

為什麼會這樣說呢？這是因為 Qt Creator 主要是給 C++ 中的 Qt 使用的工具，如果只是要寫 Python 版本的 PyQt，大可節省下這許多空間（幾十 GB 的樣子？），裝輕量版的 Qt Designer 即可。

安裝 Qt Designer

在 Mac OS 中，若要安裝 Qt Designer，可以透過以下網址：https://build-system.fman.io/qt-designer-download

下載之後，雙擊下載檔案便可安裝。但在執行 Qt Designer 時，多半會碰到以下問題導致無法開啟：

“Qt Designer” cannot be opened because the developer cannot be verified.

這似乎是沒有驗證所造成的問題，是否要使用還是要自己權衡一下。不過我個人是不會猶豫的！一來我確實需要 Qt Designer、二來這個下載網址的 Github 足足有近三千的 Star！

好，那以下開始講解如何強制開啟吧！

首先點擊右上角的蘋果圖示、選擇 System Preferences ... => Security & Privacy => General。

這時，應該會看到以下畫面：

選擇 Open Anyway。

這樣一來，就能正常啟動 Qt Designer 啦！不過各個元件居然分開的！這應該是正常的吧 XDDD (Linux、Windows 都是一體成型的)

安裝完成以後，再來跑個簡單的範例確認吧。

測試用範例程式

總之，先用 Qt Designer 隨便拉個介面，我就用以下這個隨便拉的介面測試：

然後我將它儲存下來，叫做 test.ui（Qt Designer 儲存的檔案都是 .ui 的格式）。

如果環境中沒有 PyQt5，記得使用以下指令安裝：

pip3 install pyqt5

接著，在剛才儲存 test.ui 檔案的資料夾中，使用終端機輸入以下指令：

python3 -m PyQt5.uic.pyuic test.ui -o test.py

這是使用 PyQt5 套件中的 PyUIC 將 .ui 格式的檔案轉換成 Python 可以執行的 .py 檔案。打開轉換好的 test.py，應該會看到以下程式：

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'test.ui'
#
# Created by: PyQt5 UI code generator 5.15.1
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again. Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(437, 334)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.plainTextEdit = QtWidgets.QPlainTextEdit(self.centralwidget)
        self.plainTextEdit.setGeometry(QtCore.QRect(20, 10, 401, 231))
        self.plainTextEdit.setObjectName("plainTextEdit")
        self.textEdit = QtWidgets.QTextEdit(self.centralwidget)
        self.textEdit.setGeometry(QtCore.QRect(20, 250, 321, 31))
        self.textEdit.setObjectName("textEdit")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(340, 240, 91, 51))
        self.pushButton.setObjectName("pushButton")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 437, 22))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

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

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton.setText(_translate("MainWindow", "Enter"))


然後再寫個檔案跑跑看（記得要匯入 test 這份程式）：

# coding: utf-8
import sys
from PyQt5.QtWidgets import *
from test import Ui_MainWindow


class MainWindow(QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)


if __name__ == '__main__':
    app = QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())



Output:

看起來跟我上面拉出來的圖一模一樣 XDDD
不過我真的成功啦！

References

Read More

Tags:

Leave a Reply