痞子衡嵌入式：超級好用的可視化PyQt GUI構建工具(Qt Designer)

wxPython框架雖然成熟穩定，但是相對最近更火的PyQt框架來說，還是顯得古老了一些，控制項風格不符合現代審美觀，因此痞子衡決定學習一下PyQt的用法，感受下PyQt做出來的界面效果到底如何。根據wxPython學習經驗，當然首先要從PyQt的可視化GUI構建工具Qt Designer開始下手，因... ...

　　大家好，我是痞子衡，是正經搞技術的痞子。今天痞子衡給大家介紹的是PyQt GUI構建工具Qt Designer。

　　痞子衡開博客至今已有好幾年，一直以嵌入式開發相關主題的文章為主線，偶爾穿插一些其他技術或工具的介紹，前段時間因為要做一個跟恩智浦MCU啟動相關的上位機工具 NXP-MCUBootUtility，網上搜索對比了幾個Python下的GUI框架，最終選擇了wxPython這個成熟穩定的GUI庫，從而接觸到wxFormBuilder這個配套wxPython使用的GUI構建工具。苦於網上關於該構建工具的中文資料不多，所以根據自己使用經驗寫了一篇極易上手的可視化wxPython GUI構建工具(wxFormBuilder)，沒想到該篇博客很受歡迎，居然目前是痞子衡博客里閱讀量最高的一篇博客，而且也是搜索 wxFormBuilder 關鍵字出來的中文結果排名第二位的鏈接，真是萬萬沒想到。

　　wxPython框架雖然成熟穩定，但是相對最近更火的PyQt框架來說，還是顯得古老了一些，控制項風格不符合現代審美觀，因此痞子衡決定學習一下PyQt的用法，感受下PyQt做出來的界面效果到底如何。根據wxPython學習經驗，當然首先要從PyQt的可視化GUI構建工具Qt Designer開始下手，因此便有了本篇博客。

一、Qt Designer工具背景

　　Qt Designer從名字上來看顯然就是久負盛名的跨平臺GUI庫Qt的配套設計工具。Qt庫本身是C++語言實現的；Riverbank公司用Python語言對Qt做了一層封裝，封裝後便成了Python版GUI庫PyQt（目前最新的版本是PyQt5）；下麵是這兩個GUI庫的官方主頁：

Qt項目官方網站: https://www.qt.io/

PyQt項目官方主頁: https://www.riverbankcomputing.com/software/pyqt/intro

　　Qt的各種UI控制項功能均是通過class來實現的，這個鏈接 https://doc.qt.io/qt-5/classes.html 列出了Qt里的所有class。PyQt5其用法基本與Qt一致，這個鏈接 https://www.riverbankcomputing.com/static/Docs/PyQt5/module_index.html#ref-module-index 列出了PyQt5里所有的Modules，其中用於設計界面最常用的便是 QtWidgets 模塊。

　　在Qt官網的Tools下麵可以看到所有Qt相關的工具，在UI design tools下麵可以找到Qt Designer，可見Qt Designer是用於設計GUI界面的工具之一。由於痞子衡介紹的PyQt5下的GUI構建工具，因此本文的Qt Designer並不是直接在Qt官網下載安裝的，具體安裝方法詳見下一章節。

二、Qt Designer快速上手

　　使用Qt Designer去設計GUI界面可以不用掌握PyQt5里的各個控制項class的具體用法，你只需要在Qt Designer軟體里添加這些控制項即可，下麵痞子衡將簡介Qt Designer的用法：

2.1軟體安裝

　　簡單瞭解PyQt5的module和class便可以開始設計GUI界面，首先得安裝Qt Designer，在安裝完Python3之後（痞子衡安裝的是Python 3.6），藉助\Python36\Scripts\下的pip.exe工具來分別安裝PyQt5和Qt Designer，命令見如下主頁：

PyQt5安裝: https://pypi.org/project/PyQt5/

Qt Designer安裝: https://pypi.org/project/pyqt5-tools/

　　安裝完成之後打開\Python36\Lib\site-packages\pyqt5_tools\designer.exe，這便是Qt Designer。

2.2軟體界面

　　打開Qt Designer可見到如下界面，界面主要分為四大區：項目區、控制項區、編輯區、屬性區。軟體使用起來非常簡單，就是在【控制項區】里點擊添加需要的控制項，這些控制項的效果會在【編輯區】里實時顯示，併在【屬性區】這些控制項的屬性，【項目區】用於顯示控制項間的層級關係。

2.3基礎佈局

　　讓我們開始創建一個GUI的基礎框架，基礎框架包括：Container（局部外圍輪廓）、Layout（內部控制項區）、menubar（頂部菜單欄）、statusbar（底部狀態欄）。
　　第一步是添加一個Container（此處選擇常用的Frame），這是GUI的輪廓基礎，有了Frame之後還需要在Frame里添加Layout（此處選擇豎排樣式），用於規範後續控制項的排列樣式。預設GUI即有menubar和statusbar。

2.4多種控制項

　　基礎佈局搞定之後，接下來便是在Layout里添加控制項，PyQt5支持的控制項非常豐富，其中比較常用的是如下幾個：各種Button（按鈕）、Label（靜態顯示文本框）、Text Edit（輸入輸出文本框）、Check Box（選中框）、各種Slider（滑動條）等。由於前面痞子衡選擇的是verticalLayout，因此你會看到控制項們都是豎著排的。

2.5控制項屬性

　　添加了所有控制項之後，下一步便是分別設置控制項的屬性，進一步調整控制項。痞子衡以Push Button屬性為例，痞子衡勾選瞭如下3項比較重要的屬性設置，分別是objectName（button在後續python代碼的對象名，一般需要按其功能修改，修改後使得代碼閱讀/修改起來更直觀）、geometry（設置button的尺寸與位置，如果是放在Layout里，則受限於Layout不可設置）、text（button在GUI里顯示的標簽名，此處是PushButton，也需要按其功能修改，方便用戶使用軟體）。

2.6保存為xml代碼（工程文件）

　　當GUI界面佈局全部完成之後，需選擇File->Save As保存為.ui文件，該文件既是Qt Designer的工程文件也是最終生成的GUI xml代碼文件，痞子衡保存在了my_win.ui文件里。

2.7轉換成python代碼

　　雖然保存的my_win.ui文件里是可以直接在python代碼里被載入使用的，但是更好的辦法是直接將.ui文件轉換成相應的.py文件。需要藉助 \Python36\Scripts\pyuic5.exe工具，命令如下：

pyuic5 - o my_win.py my_win.ui

　　轉換成功後，讓我們打開my_win.py文件，可以簡單看一下這個my_win.py里的內容，代碼里首先import了PyQt5相關庫，並定義了名為Ui_MainWindow的class，這個class主要包含兩個函數setupUi()和retranslateUi()。setupUi()里初始化了各個控制項成員self.xx，這與我們在Qt Designer里添加控制項是對應的。

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

# Form implementation generated from reading ui file '.\my_win.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(603, 448)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.frame = QtWidgets.QFrame(self.centralwidget)
        self.frame.setGeometry(QtCore.QRect(100, 80, 361, 211))
        self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame.setObjectName("frame")
        self.verticalLayoutWidget = QtWidgets.QWidget(self.frame)
        self.verticalLayoutWidget.setGeometry(QtCore.QRect(30, 20, 160, 172))
        self.verticalLayoutWidget.setObjectName("verticalLayoutWidget")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.verticalLayoutWidget)
        self.verticalLayout.setContentsMargins(0, 0, 0, 0)
        self.verticalLayout.setObjectName("verticalLayout")
        self.pushButton = QtWidgets.QPushButton(self.verticalLayoutWidget)
        self.pushButton.setEnabled(True)
        self.pushButton.setObjectName("pushButton")
        self.verticalLayout.addWidget(self.pushButton)
        self.label = QtWidgets.QLabel(self.verticalLayoutWidget)
        self.label.setObjectName("label")
        self.verticalLayout.addWidget(self.label)
        self.textEdit = QtWidgets.QTextEdit(self.verticalLayoutWidget)
        self.textEdit.setObjectName("textEdit")
        self.verticalLayout.addWidget(self.textEdit)
        self.checkBox = QtWidgets.QCheckBox(self.verticalLayoutWidget)
        self.checkBox.setObjectName("checkBox")
        self.verticalLayout.addWidget(self.checkBox)
        self.horizontalSlider = QtWidgets.QSlider(self.verticalLayoutWidget)
        self.horizontalSlider.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalSlider.setObjectName("horizontalSlider")
        self.verticalLayout.addWidget(self.horizontalSlider)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 603, 21))
        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", "PushButton"))
        self.label.setText(_translate("MainWindow", "TextLabel"))
        self.checkBox.setText(_translate("MainWindow", "CheckBox"))

三、使用Qt Designer生成的代碼

　　前面已經使用Qt Designer生成GUI界面類Ui_MainWindow並保存在my_win.py文件中，此時需要創建一個主函數文件去調用Ui_MainWindow，下麵是痞子衡創建的main_win.py中的代碼：

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow
# 導入my_win.py中內容
from my_win import *

# 創建mainWin類並傳入Ui_MainWindow
class mainWin(QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super(mainWin, self).__init__(parent)
        self.setupUi(self)

if __name__ == '__main__':
    # 下麵是使用PyQt5的固定用法
    app = QApplication(sys.argv)
    main_win = mainWin()
    main_win.show()
    sys.exit(app.exec_())

3.1觸發事件與響應

　　有了Button，我們肯定希望其能與一個響應函數相聯繫起來，此處痞子衡定義了showMessage()函數，並且將showMessage()與PushButton綁定起來，點擊Button便會執行一次這個showMessage()函數。代碼如下：

class mainWin(QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super(mainWin, self).__init__(parent)
        self.setupUi(self)
        # 將響應函數綁定到指定Button
        self.pushButton.clicked.connect(self.showMessage)

    # Button響應函數
    def showMessage(self):
        self.textEdit.setText('hello world')

　　最後讓我們測試一下這個GUI軟體，在命令行下運行main_win.py

PS D:\my_git_repo\> python .\main_win.py

　　至此，PyQt5 GUI構建工具Qt Designer痞子衡便介紹完畢了，掌聲在哪裡~~~

參考資料

使用PyQt來編寫第一個Python GUI程式

PyQT5速成教程-2 Qt Designer介紹與入門