实战PyQt5: 023-初识Qt Designer

Qt Designer工具简介

在我们前面学习PyQt的过程中，UI界面都是直接通过代码来实现的，对于比较复杂的界面，这种方式效率不高，而且要预览UI界面的效果，需要运行代码才可以看到。在PyQt中可以使用Qt Designer来完成这一步的工作。

使用Qt Designer进行UI设计，可以实现视图和逻辑的分离，从而使开发更便捷。Qt Designer的操作方式十分灵活，通过拖曳的方式在窗口上放置各种部件，加上方便的布局操作，随时可预览整个窗口的布局效果，可快速实现需要的窗口布局。Qt Designer生成的.ui文件（实际上是XML格式的ui描述文件），通过pyuic5可以将其转换成.py文件, 无缝集成在开发代码中。

Qt Designer所PyQt5-tools安装包一起安装，在当前的开发环境中，可以多种方式打开Qt Designer。

• 双击"Python的安装路径\Scripts\ pyqt5designer.exe"打开；
• 在命令行终端cmd或者powershell中输入pyqt5designer打开；
• 在VS Code 右下的终端窗口中输入pyqt5designer打开(注，如果需要立即返回到VS Code 终端下，请用命令 start pyqt5designer；
• 如果在VS Code 中安装了插件 PYQT Intergration，则可以直接点击项目目录右键，选择PYQT: New Form打开，如下图：

在VS Code中通过PYQT打开Qt Designer

注：在这种方式下，请提前在PYQT的配置里设置好Qt Designer执行文件的路径， 具体设置方法见《实战PyQt5：安装和配置PyQt5开发环境》中“VSCode中配置PyQt”部分。

Qt Designer界面概览

创建目录QtDesignerDemo1, 点击鼠标右键，选择"PYQT: New Form"打开Qt Designer,在Qt Designer界面弹出下图所示的窗口，提示创建一个“New Form”，给出了5个常用的Form模板。（注： 可以点击窗口左下角的"Show this Dialog on Startup 关闭这个窗口，再次使用时从菜单栏的"File" --> "New ..."方式打开）。

Qt Designer的New Form 窗口

我们选择"Main Window",然后点击"Create"按钮，进入到Qt Designer主界面，如下图 所示，根据其功能，主界面可以分成7个大的区域，在示意图中，用红色矩形加数字标注出这七个区域，其中:

Qt Designer 主界面

• 区域1：主菜单区；
• 区域2：工具条,包括文件操作，部件的Z向位置调整，控件信息编辑以及布局调整；
• 区域3：部件列表区, 从该区域可以拖曳部件到界面编辑区；
• 区域4：界面编辑区，在该区域对界面窗口做可视化编辑；
• 区域5：部件列表区，在该区域用树形部件的方式列出了区域4中的所有部件，并可以编辑部件的对象名称，也可以在这里选中一个或多个部件，同时在区域4中显示出选中状态；
• 区域6：部件属性编辑区，在区域4或区域5里选中某个部件时，该部件的树形显示在区域6中，可在区域6中修改相应部件的属性;
• 区域7：Action编辑，信号/槽函数编辑，在此区域可设置菜单项的行为，建立信号和槽之间的连接等。

创建ui，生成对应py文件

在部件列表区，选中"Push Button" 将其拖曳到中间的主窗口中, 在部件列表区域，将其对象名称改成btnTest, 选中按钮，双击,然后将其文字设置成测试。选中菜单"File"-->"Save As..."打开对话框，将文件命名成demo1.ui，然后保存，然后可以看到QtDesignerDemo1目录下出现文件test1.ui，过程如下图所示:

生成demo1.ui文件

现在回到VS Code中，在QtDesignerDemo1目录下选中文件test1.ui，单击鼠标右键，选择"PYQT: Compile Form"，就会调用pyuic5 在相同目录下产生一个名为Ui_demo1.py文件，打开文件Ui_demo1.py,可以看到相应的Python代码，我们调用这个文件，将其显示出来。

编译UI文件到Py文件

说明：也可以使用命令行将demo1.ui文件转换成Ui_demo1.py, 命令格式如下：

pyuic5 -o Ui_demo1.py demo1.ui

Ui_demo1.py的代码如下:

from PyQt5 import QtCore, QtGui, QtWidgets
 
class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(585, 428)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.btnTest = QtWidgets.QPushButton(self.centralwidget)
        self.btnTest.setGeometry(QtCore.QRect(200, 170, 75, 23))
        self.btnTest.setObjectName("btnTest")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 585, 23))
        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.btnTest.setText(_translate("MainWindow", "测试"))

创建文件qtdesignerdemo1.py, 从Ui_demo1中导入Ui_MainWindow，代码如下：

import sys
from PyQt5 import QtWidgets
from Ui_demo1 import Ui_MainWindow
 
if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    mainWnd = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(mainWnd)
    mainWnd.show()
    sys.exit(app.exec())

运行结果如图所示：

测试Qt Designer界面设计

本文知识点

• 打开Qt Designer的各种方式；
• Qt Designer主界面的基本构成；
• 使用Qt Designer 创建ui 文件；
• 将ui文件编译成py文件；
• 导入py文件，并显示出来。

前一篇： 实战PyQt5: 022-布局管理之QSpiltter