当前位置：网站首页 > 技术资源 > 正文

Qt for Python—可视化开发GUI应用程序

off999 2024-10-18 08:09 46 浏览 0 评论

前言

本系列第三篇文章（Qt for Python学习笔记—应用程序初探）、第四篇文章（Qt for Python学习笔记—应用程序再探）中均是使用纯代码方式来开发 PySide6 GUI 应用程序的。

本系列第五篇文章（Qt for Python—Qt Designer 概览）介绍了可视化界面设计工具——Qt Designer。

本文是本系列第六篇文章，将对如何借助 Qt Designer 工具进行可视化界面设计并完成一个 PySide6 GUI 应用程序开发的过程进行介绍。

1. 简介

借助 Qt Designer 工具进行可视化界面设计，进而完成一个 PySide6 GUI 应用程序开发的基本过程大致如下：

(1) 确定应用程序开发目标及原型；

(2) 借助 Qt Designer 工具可视化地设计窗体（保存为 .ui 文件）；

(3) 利用工具将窗体文件编译转换成窗体 Python 程序文件（ .py 文件））；

(4) 对转换成的窗体 Python 程序文件加以完善；

(5) 应用完善后的窗体 Python 程序文件。

注：本示例工作目录为 C:\MyPySide6 。

下面我们将再次实现本系列第四篇文章（Qt for Python学习笔记—应用程序再探）中的示例程序。

2. 示例目标及原型

我们确定该示例程序所设想达到的目标，并给出其原型。

一、示例目标：

本示例目标是创建一个 Python GUI 应用程序，其主窗口标题为“PySide6 示例程序”，其右上角有最小化、最大化和关闭按钮，窗口可拉伸。其主窗体中分为上下两个区域：

（一）上面是放置一个行编辑器（QLineEdit）：

(1) 缺省显示文本内容为 “借助 Qt Designer 完成的 PySide6 GUI 应用程序！”

(2) 文本居中对齐，字体设置为蓝色，粗体，13px；

（二）下面放置一排4个按钮（QPushButton），依次为：

(1) 【改色】按钮：点击按钮后，文本字体显示为红色

(2) 【恢复】按钮：点击按钮后，文本字体显示为蓝色

(3) 【清除】按钮：点击按钮后，文本内容清空

(4) 【关闭】按钮：点击按钮后，关闭窗口退出程序

二、示例原型：

在进行 GUI 应用程序编码之前，一般建议先勾画出 GUI 框架（窗体及各部件的布局等）。本示例原型如下：

3. Qt Designer 设计窗体

3.1 基本步骤

使用 Qt Designer 工具可视化进行窗体设计大致分为如下几个基本步骤：

(1) 启动 Qt Designer 工具，创建一个窗体（选择所需的窗体模板类型）

(2) 从左侧的【窗口部件盒】拖曳部件到窗体中进行放置

(3) 通过【属性编辑器】完成各部件属性的设置

(4) 对窗体上各部件进行布局设置

(5) 通过【信号/槽编辑器】完成相关部件信号/槽的连接

(6) 对设计好的窗体进行预览

(7) 将设计好的窗体保存为窗体文件

3.2 创建一个窗体（Form）

单击桌面上的 Qt Designer 快捷方式，然后启动 Qt Designer。

在 Qt Designer 窗口出现后，通常会自动弹出一个【新建窗体】的对话框窗口（如下图示），在该窗口中选择一个窗体模板（如：Main Window）。

注：或者在 Qt Designer 窗口中通过快捷键 Ctrl+N 或者点击主菜单【文件】下的【新建…】菜单项，弹出【新建窗体】对话框。

然后点击对话框底部的【创建】按钮，即可进入 Qt Designer 设计窗口（如下图示）：

可以看到在 Qt Designer 设计窗口的中间是尚未命名的“MainWindow”窗体，也就是用于放置各部件的“画布”区域。

3.3 在窗体上放置部件

首先通过快捷键 F3 将窗口切换到【编辑窗口部件】模式。

然后分别从窗口左侧的【窗口部件盒】中的【Input Widgets】分组类别中选择1个 QLineEdit 部件，从【Buttons】分组类别中选择4个 QPushButton 部件，通过鼠标拖拽相关部件到中间的尚未命名的窗体上，并适当调整窗体尺寸，并进行初步的布局设计（如下图示）。

3.4 设置对象属性

接下来，继续在【编辑窗口部件】模式下通过属性编辑器逐一完成对象（窗体和各组件）的属性的设置。

一、窗体中各对象名一览表

注：统一修订好各组件对象名，建议按照一定的规则，有利于后续业务代码编写和维护。

二、窗体中各对象属性值一览表

注：部件的样式可以通过【编辑样式表】对话框进行设置（如下图示）：

属性设置完毕后，窗体效果如下图示：

3.5 各部件应用布局

点击窗体空白处，在鼠标右键菜单中，选择【布局】-【栅格布局】菜单项，将窗体上的各部件自动按照网格完成布局。

3.6 建立信号和槽连接

首先通过快捷键 F4 将窗口切换到【编辑信号/槽】模式，然后通过右下侧的【信号/槽编辑器】添加相关信号/槽信息。

本示例程序中4个按钮均需建立起 clicked() 信号和槽信息。其中：

——【清除】按钮的 clicked() 信号对应的是行编辑器的内置的槽函数 clear()；

——【关闭】按钮的 clicked() 信号对应的是主窗口的内置的槽函数 close()；

——【改色】按钮的 clicked() 信号对应的是行编辑器的自定义槽函数 btnChange_Clicked()；因自定义槽函数尚未定义，故在窗体设计环节尚无法建立起信号和槽函数的连接。

——【恢复】按钮的 clicked() 信号对应的是行编辑器的自定义槽函数 btnReset_Clicked()；因自定义槽函数尚未定义，故在窗体设计环节尚无法建立起信号和槽函数的连接。

此时窗体发生变化，显示如下：

3.7 预览窗体

窗体设计好后，可以通过快捷键 Ctrl + R 或点击主菜单项【窗体】下的【预览】子菜单项，对设计好的窗体进行快速预览。

可以试着点击各个按钮，拉伸窗口，看看效果。

注1：因【改色】按钮、【恢复】按钮尚未定义好对应的槽函数，所以这两个按钮点击时暂时还不能进行功能响应；这部分等将窗体文件转换成 Python 程序文件后再进行添加。
注2：因【清除】按钮、【关闭】按钮关联的是 Qt 内置的槽函数，所以这两个按钮点击时会正常进行功能响应。

3.8 保存窗体文件

当确定窗体已经设置完毕后，就可以点击 Qt Designer 工具栏上的【保存】图标按钮（或点击主菜单【文件】下的【保存】子菜单项）将窗体保存为窗体文件（后缀名为: .ui），如：C:\MyPySide6\MyMainWindow.ui。

创建完成的窗体文件（ MyMainWindow.ui ）内容参考如下：

 <?xml version="1.0" encoding="UTF-8"?>
 <ui version="4.0">
  <class>MainWindow</class>
  <widget class="QMainWindow" name="MainWindow">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>416</width>
     <height>158</height>
    </rect>
   </property>
   <property name="windowTitle">
    <string>PySide6 示例程序</string>
   </property>
   <widget class="QWidget" name="centralwidget">
    <layout class="QGridLayout" name="gridLayout">
     <item row="0" column="0" colspan="4">
      <widget class="QLineEdit" name="lineEdit">
       <property name="sizePolicy">
        <sizepolicy hsizetype="Expanding" vsizetype="Fixed">
         <horstretch>0</horstretch>
         <verstretch>0</verstretch>
        </sizepolicy>
       </property>
       <property name="font">
        <font>
         <pointsize>-1</pointsize>
         <italic>false</italic>
         <bold>true</bold>
        </font>
       </property>
       <property name="layoutDirection">
        <enum>Qt::LeftToRight</enum>
       </property>
       <property name="autoFillBackground">
        <bool>false</bool>
       </property>
       <property name="styleSheet">
        <string notr="true">color: blue;
 font: bold; 
 font-size: 13px;</string>
       </property>
       <property name="text">
        <string>借助 Qt Designer 完成的 PySide6 GUI 应用程序！</string>
       </property>
       <property name="alignment">
        <set>Qt::AlignCenter</set>
       </property>
      </widget>
     </item>
     <item row="1" column="0">
      <widget class="QPushButton" name="btnChange">
       <property name="text">
        <string>改色</string>
       </property>
      </widget>
     </item>
     <item row="1" column="1">
      <widget class="QPushButton" name="btnReset">
       <property name="text">
        <string>恢复</string>
       </property>
      </widget>
     </item>
     <item row="1" column="2">
      <widget class="QPushButton" name="btnClear">
       <property name="text">
        <string>清除</string>
       </property>
      </widget>
     </item>
     <item row="1" column="3">
      <widget class="QPushButton" name="btnQuit">
       <property name="text">
        <string>关闭</string>
       </property>
      </widget>
     </item>
    </layout>
   </widget>
  </widget>
  <resources/>
  <connections>
   <connection>
    <sender>btnClear</sender>
    <signal>clicked()</signal>
    <receiver>lineEdit</receiver>
    <slot>clear()</slot>
    <hints>
     <hint type="sourcelabel">
      <x>258</x>
      <y>106</y>
     </hint>
     <hint type="destinationlabel">
      <x>207</x>
      <y>48</y>
     </hint>
    </hints>
   </connection>
   <connection>
    <sender>btnQuit</sender>
    <signal>clicked()</signal>
    <receiver>MainWindow</receiver>
    <slot>close()</slot>
    <hints>
     <hint type="sourcelabel">
      <x>359</x>
      <y>106</y>
     </hint>
     <hint type="destinationlabel">
      <x>207</x>
      <y>78</y>
     </hint>
    </hints>
   </connection>
  </connections>
 </ui>

4.将.ui文件编译转换为.py文件

上面将窗体设计好并保存为窗体文件（如：MyMainWindow.ui）后，如果要在 Python 中使用该窗体，还需要使用编译转换工具（如：pyside6-uic.exe）将窗体文件（.ui）编译成对应的窗体 Python 程序文件（.py）。

可通过两种方式将窗体文件（.ui）转换为窗体 Python 程序文件（.py）。

4.1 通过命令方式实现转换

从控制台终端通过命令方式来执行编译转换（通常要先进入窗体文件所在目录 C:\MyPySide6下）：

 C:\> cd C:\MyPySide6
 C:\MyPySide6> pyside6-uic.exe -o ui_MyMainWindow.py MyMainWindow.ui

上述第2行命令表示，使用 pyside6-uic.exe 工具将窗体文件（MyMainWindow.ui）编译转换成窗体 Python 程序文件（ui_MyMainWindow.py）。

注1：为了便于区分正常 Python 文件与窗体 Python 文件，通常会在转换成的窗体 Python 文件名前加个前缀（ui_），这样文件名就变为了：ui_MyMainWindow.py，比较一目了然。
注2： pyside6-uic.exe 的路径在 C:\Devlelop\Python\Scripts 下，而该路径在安装 Python 时已经被添加到了 Windows 的 PATH 环境变量里，故 pyside6-uic.exe 在终端窗口里可以直接运行。
注3：PyQt6 中对应的是：pyuic6.exe 工具，在 C:\Devlelop\Python\Scripts 下。

4.2 通过 Visual Studio Code 的扩展实现转换

本系列第二篇文章（Qt for Python学习笔记—搭建开发环境）中已经安装了适用于 Visual Studio Code 的 Qt for Python 扩展，并完成了相应配置，所以可以直接在 Visual Studio Code 中通过鼠标右键菜单操作完成将窗体文件（.ui）转换为窗体 Python 程序文件（.py）。

有两种转换方法：

(1) 方法1：在当前窗体文件（MyMainWindow.ui）代码编辑器窗口中，通过鼠标右键菜单【Compile Form (Qt Designer UI File) into Qt for Python File】，来完成编译转换。

(2) 方法2：在【资源管理器】下，选择当前窗体文件（MyMainWindow.ui），通过鼠标右键菜单【Compile Form (Qt Designer UI File) into Qt for Python File】，来完成编译转换。

顺利的话，可以在【资源管理器】的当前窗体文件（MyMainWindow.ui）同级目录下看到多出了一个新创建的 Python 文件（文件名为：MyMainWindow.py）。

同样，为了便于区分正常 Python 文件与窗体 Python 文件，通常会在转换成的窗体 Python 文件名前加个前缀（ui_），这样文件名就变为了：ui_MyMainWindow.py，比较一目了然。

需要特别提醒的一点是：借助 Qt Designer 工具可视化设计窗体，只要窗体有所变动，那么就必须重新将窗体文件编译转换成对应的窗体 Python 程序文件（必要时还需要进行相应代码完善）。

4.3 窗体Python程序文件参考

编译转换后的窗体 Python 程序文件（ui_MyMainWindow.py）内容参考如下：

 # -*- coding: utf-8 -*-
 
 ################################################################################
 ## Form generated from reading UI file 'MyMainWindow.ui'
 ##
 ## Created by: Qt User Interface Compiler version 6.0.0
 ##
 ## WARNING! All changes made in this file will be lost when recompiling UI file!
 ################################################################################
 
 from PySide6.QtCore import *
 from PySide6.QtGui import *
 from PySide6.QtWidgets import *
 
 
 class Ui_MainWindow(object):
     def setupUi(self, MainWindow):
         if not MainWindow.objectName():
             MainWindow.setObjectName(u"MainWindow")
         MainWindow.resize(416, 158)
         self.centralwidget = QWidget(MainWindow)
         self.centralwidget.setObjectName(u"centralwidget")
         self.gridLayout = QGridLayout(self.centralwidget)
         self.gridLayout.setObjectName(u"gridLayout")
         self.lineEdit = QLineEdit(self.centralwidget)
         self.lineEdit.setObjectName(u"lineEdit")
         sizePolicy = QSizePolicy(QSizePolicy.Expanding, QSizePolicy.Fixed)
         sizePolicy.setHorizontalStretch(0)
         sizePolicy.setVerticalStretch(0)
         sizePolicy.setHeightForWidth(self.lineEdit.sizePolicy().hasHeightForWidth())
         self.lineEdit.setSizePolicy(sizePolicy)
         font = QFont()
         font.setBold(True)
         font.setItalic(False)
         self.lineEdit.setFont(font)
         self.lineEdit.setLayoutDirection(Qt.LeftToRight)
         self.lineEdit.setAutoFillBackground(False)
         self.lineEdit.setStyleSheet(u"color: blue;\n"
 "font: bold; \n"
 "font-size: 13px;")
         self.lineEdit.setAlignment(Qt.AlignCenter)
 
         self.gridLayout.addWidget(self.lineEdit, 0, 0, 1, 4)
 
         self.btnChange = QPushButton(self.centralwidget)
         self.btnChange.setObjectName(u"btnChange")
 
         self.gridLayout.addWidget(self.btnChange, 1, 0, 1, 1)
 
         self.btnReset = QPushButton(self.centralwidget)
         self.btnReset.setObjectName(u"btnReset")
 
         self.gridLayout.addWidget(self.btnReset, 1, 1, 1, 1)
 
         self.btnClear = QPushButton(self.centralwidget)
         self.btnClear.setObjectName(u"btnClear")
 
         self.gridLayout.addWidget(self.btnClear, 1, 2, 1, 1)
 
         self.btnQuit = QPushButton(self.centralwidget)
         self.btnQuit.setObjectName(u"btnQuit")
 
         self.gridLayout.addWidget(self.btnQuit, 1, 3, 1, 1)
 
         MainWindow.setCentralWidget(self.centralwidget)
 
         self.retranslateUi(MainWindow)
         self.btnClear.clicked.connect(self.lineEdit.clear)
         self.btnQuit.clicked.connect(MainWindow.close)
 
         QMetaObject.connectSlotsByName(MainWindow)
     # setupUi
 
     def retranslateUi(self, MainWindow):
         MainWindow.setWindowTitle(QCoreApplication.translate("MainWindow", u"PySide6 \u793a\u4f8b\u7a0b\u5e8f", None))
         self.lineEdit.setText(QCoreApplication.translate("MainWindow", u"\u501f\u52a9 Qt Designer \u5b8c\u6210\u7684 PySide6 GUI \u5e94\u7528\u7a0b\u5e8f\uff01", None))
         self.btnChange.setText(QCoreApplication.translate("MainWindow", u"\u6539\u8272", None))
         self.btnReset.setText(QCoreApplication.translate("MainWindow", u"\u6062\u590d", None))
         self.btnClear.setText(QCoreApplication.translate("MainWindow", u"\u6e05\u9664", None))
         self.btnQuit.setText(QCoreApplication.translate("MainWindow", u"\u5173\u95ed", None))
     # retranslateUi

该窗体 Python 程序文件中实际上定义了一个 Ui_MainWindow 类。

重点代码解析如下：

——第16行代码：定义声明一个 Ui_MainWindow 类，该类继承自 QObject。

——第17行代码：定义了一个 setupUi(self, MianWindow) 函数，有两个参数，第一个参数（self）表示函数自己，第二个参数（MainWindow）是一个传入的参数，是 Qt Designer 中主窗体的 objectName 对应的属性值。

setupUi() 函数用于窗体的初始化，创建了窗体上的所有部件并设置其属性。

注： Ui_MainWindow 类并不创建窗体（MainWindow），窗体（MainWindow）是由外部传入的，作为所有界面部件的父容器。

——第67行代码：调用了 retranslateUi() 函数，该函数会在第74-81行代码进行定义。

——第71行代码：QMetaObject.connectSlotsByName(MainWindow) 语句将窗体（MainWindow）上各部件的信号与槽函数进行自动连接。

——第74-81行代码：定义了 retranslateUi() 函数，该函数设置了主窗体（MainWindow）的标题、行编辑器（lineEdit）的文字、4个按钮（btnChange、btnReset、btnClear、btnQuit）的标题。实际上，retranslateUi() 函数集中设置了窗体上所有的字符串，有利于实现软件的多语言界面。

5. 完善窗体Python程序文件

在设计窗体环节我们还有一些自定义槽函数未定义，部分部件的信号/槽尚未进行连接。所以有必要对由窗体文件转换成的窗体 Python 程序文件（如：ui_MyMainWindow.py）加以完善，主要是自定义槽函数，建立部件的信号/槽的连接。

一、在上面文件中的第70行处添加如下2行代码：

         self.btnChange.clicked.connect(self.btnChange_Clicked)
         self.btnReset.clicked.connect(self.btnReset_Clicked)

二、在上面文件中的第73行处添加如下几行代码（两个自定义槽函数）：

     @Slot()
     def btnChange_Clicked(self):
         self.lineEdit.setStyleSheet("color: red; font: bold; font-size: 13px;")
 
     @Slot()
     def btnReset_Clicked(self):
         self.lineEdit.setText("借助 Qt Designer 完成的 PySide6 GUI 应用程序！")
         self.lineEdit.setStyleSheet("color: blue; font: bold; font-size: 13px;")

三、保存文件。

6. 使用转换后的窗体的Python类构建GUI应用程序

窗体 Python 程序文件中只是定义了一个 Ui_MainWindow 类，所以该窗体 Python 程序文件并不能直接运行，而是需要被其他 Python 文件调用该窗体 Python 程序文件里定义的 Ui_MainWindow 类。

6.1 编辑主程序文件代码

在 Visual Studio Code 中编辑 Python 主程序代码（代码参考如下），并保存为 Python 文件（如：MyPySide6App03.py）。

 from PySide6.QtWidgets import (QApplication, QMainWindow)
 from ui_MyMainWindow import Ui_MainWindow
 
 class MainWindow(QMainWindow):
     def __init__(self):
         super(MainWindow, self).__init__()
         self.ui = Ui_MainWindow()
         self.ui.setupUi(self)
 
 if __name__ == "__main__":
     import sys
 
     app = QApplication(sys.argv)
 
     window = MainWindow()
     window.show()
 
     sys.exit(app.exec_())

重点代码解析（其他代码请参见本系列第四篇文章相应部分）：

——第2行代码：表示导入 ui_MyMainWindow 模块中的 Ui_MainWindow 类。

——第7行代码：使用 Ui_MainWindow 类创建一个对象（ui）。

——第8行代码：调用该对象的 setupUi() 方法，创建窗体上的部件。

6.2 运行程序

在 Visual Studio Code 中运行 Python 文件（MyPySide6App03.py），查看示例程序的运行效果（如下图示）：

注：在 Visual Studio Code 中可以通过以下几种方式来运行 Python 程序文件：
(1) 直接点击当前 Python 文件代码编辑器右上角的【运行】图标按钮，运行 Python 程序。
(2) 在当前 Python 文件代码编辑器窗口中，通过鼠标右键菜单【在终端中运行 Python 文件】，来运行 Python 程序。
(3) 在【资源管理器】下，选择当前Python 文件，通过鼠标右键菜单【在终端中运行 Python 文件】，来运行 Python 程序。

依次点击窗口上4个按钮，测试效果如下：