痞子衡嵌入式：超级好用的可视化PyQt GUI构建工具(Qt Designer) (2)

　　当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介绍与入门