Python GUI初学者计划3——动态加载UI（2种方法）+（.ui转.py ）两种思路实现PySide2界面设计（详细讲解内部联系）

最新推荐文章于 2024-04-30 18:24:02 发布
最新推荐文章于 2024-04-30 18:24:02 发布
阅读量1.3w 收藏 49
点赞数 14
分类专栏： python 文章标签： python qt gui
学不好通信的通信孩纸
本文链接：https://blog.csdn.net/guangwulv/article/details/113880861
版权

前言回顾

本文手把手的教你动态加载UI界面以及实现函数的编写，耐心看完一定会有收获！！！！！！

前文

Python GUI初学者计划1——PySide2和PyQt5库的安装

Python GUI初学者计划2——手写代码的方式实现PySide2界面设计（详细讲解内部联系）

基于上期的内容：Python GUI初学者计划2——手写代码的方式实现PySide2界面设计（详细讲解内部联系），我们大致说了下直接用代码创建UI界面，以及详述了信号signal和槽slot之间的联系。

手动写代码虽然可以让我们清楚的知道每一控件的具体设置，但是有时候对于具体控件的创建方式我们记不清或者把握不准创建的方式，需要一步步的调节，浪费时间而且效率不高，那么有没有一种方法，我们直接通过拖拽的形式讲我们需要的界面直接建立好，在代码中一键导入就可以编辑程序呢？

在Python GUI初学者计划1——PySide2和PyQt5库的安装这一期的内容中我们讲了如何在Python环境下安装PySide2和PyQt5等，作为Python程序执行的第三方库，通常相关的安装程序都会在Python安装目录下的第三方库的包里，也就是：Python目录下的site-packages文件夹内。

我的安装目录如下：
在这里插入图片描述
那么这个文件夹内就有我们安装的PySide2和PyQt5等库：
在这里插入图片描述
点击PySide2，有一个designer的.exe可执行文件，双击它便可得到一个创建GUI的工具。
在这里插入图片描述
打开界面后，如果是汉化版的话，左上角是Qt 设计师的标志。
在这里插入图片描述
在 Python GUI初学者计划2——手写代码的方式实现PySide2界面设计（详细讲解内部联系），我们说到，很多的控件类都是继承自QWidge，包括QMainWindow，QPlainTextEdit，QMessageBox等等。

一、GUI的设计

1 打开UI设计界面

我们选择创建一个Widget的界面框，然后点击【创建】：
在这里插入图片描述
得到这么一个界面：
在这里插入图片描述

2、 创建自己需要的UI内容

如果我们需要创建一个按键对象，按键对应的是Push Button控件，那我们只需要点击Buttons，然后找到Psuh Button，将鼠标移到Push Button上面，左键按住，然后拖曳到UI界面框内所需位置即可。
在这里插入图片描述
创建完之后，右边会出现UI界面的信息，当你点击控件时，右边的【对象】和【属性】会高光显示。我们需要对对象下面的名字进行修改。
在这里插入图片描述

2.1 为什么要修改对象名？

在这里插入图片描述
因为每个控件都有自己所要实现的功能，当用户事件（点击，输入等）发生后，控件对应的函数会发生作用，那么控件需要连接到函数进行功能的响应，如果控件太多的话，容易混乱控件与控件之间的关系。

如下图所示，两个PushButton按钮，文件名的区别不明显，且其要完成的功能也不够直观，故而需要对对象名进行修改
在这里插入图片描述
如我们需要两个按钮，分别完成点击之后出现一句开玩笑的弹窗，和进行文本框内容的复制等2个功能，修改如图所示：
在这里插入图片描述
那左边两个提示名字都是PushButton，如何区分呢，双击按钮，进行名字修改即可：
在这里插入图片描述
如此算是修改完成。

2.2 如果我需要创建多个一样的控件，怎么办？

如果我们在创建UI的时候，需要创建多个控件，比如Button按钮，每次都要从左边的Widget Box中拖曳，比较麻烦，有没有方便快捷的方法呢？

有。我们鼠标左键点击需要复制的按钮，摁住Ctrl键，然后进行拖拽即可。（有多个复制的则Ctrl之后分别点击，然后再行拖拽），如下图：
在这里插入图片描述
然后步骤如2.1进行对象名的修改。

对象名的修改是为了：在代码中能更快让它（控件）与功能函数（def …）进行链接（connect）。比如：Butto_jok按钮，当被点击的时候，出现弹窗，就用Button_jok…clicked.connect(实现的函数)

3、 设计好GUI，添加属性

创建好一个大概的GUI界面，如下图所示，修改文本框的对象名为：text_input（叫什么名无所谓，主要是为了方便好找，以及一眼就知道它是实现什么功能的）。
在这里插入图片描述

3.1 如果我们需要在文本框没输入东西的时候有默认提示信息怎么弄？

有时候GUI界面在打开的时候，我们需要提示用户按照指令进行操作，比如，在左边的文本框中带有默认信息 “请在此输入文本信息”。

默认提示信息的功能是文本框text_input所属的类APlainTextEdit的功能。在这里插入图片描述
找到placeholderText，双击右边的【值（Value）】：
在这里插入图片描述
输入提示信息后：
在这里插入图片描述
题外：其实这个地方，在右边输入字体，左边的文本框会跟着出现一样信息的功能也是signal和slot的响应关系。

3.2 UI界面左上方Form 和 untitled* 是什么，怎么修改？

Form就是你创建的这个整个UI界面的一个Titile，比如你要完成的是斗地主功能的设计，你可以命名【 愉快斗地主】，你要完成的是图像的简单处理，你也可以命名为 【图像处理器】。

那么untitled* 是什么呢？就是你这一整个UI 的命名，是在程序中导入.ui文件的时候，导入的文件名。同理你也可以命名为：my_ui.ui，UI.ui等。

----untitled* 的修改在保存这个UI文件的时候可以重命名。
在这里插入图片描述

----Form 的修改可以点击【对象查看器】的【对象】，在【属性编辑器】的【QWidget】中修改,。
在这里插入图片描述
【QWidget】下有一个windowTitle，修改其【值】即可。
在这里插入图片描述
修改之后：
在这里插入图片描述

二、Signal 与Slot的联系

4、UI文件介绍

这是刚才保存的UI文件：
在这里插入图片描述
我们用编辑文本打开它（我用EditPlus，其他的也可以），效果如下：
在这里插入图片描述
可以看到文本内容是.XML 格式来储存的UI信息，这样的好处是当我们下次打开的时候，系统就会根据这个文件打开我们创建的UI界面。

5 、动态加载UI界面

有两种方式导入.ui文件
方式一：

#导入UI方式1
self.ui = QUiLoader().load('UIUI.ui')

方式二：

#导入UI方式2
qfile_UIUI = QFile("UIUI.ui")
qfile_UIUI.open(QFile.ReadOnly)
qfile_UIUI.close()
self.ui = QUiLoader().load(qfile_UIUI)
5.1 直接导入UI文件（2种方式）【第一种】
from PySide2.QtWidgets import QApplication,QMessageBox
from PySide2.QtUiTools import QUiLoader

class UIUI:
	def __init__(self):
		self.ui = QUiLoader().load('UIUI.ui')
		self.ui.Button_jok.clicked.connect(self.yahoo)
		self.ui.Button_copy.clicked.connect(self.copy_text)


	def yahoo(self): #与手动创建代码不同，这里需要在（）加入self
		print('i was be knocked')
		QMessageBox.about(self.ui, '反馈结果', '哎呦，宝贝你来啦')
		#注意
		#(self.ui, '反馈结果', '哎呦，宝贝你来啦')这里的self.ui不是窗口初始化的new_window，也不是self

	def copy_text(self):
		info = self.ui.text_input.toPlainText()#与手动创建代码不同，这里需要在（）加入self
		QMessageBox.about(self.ui, '复制的新窗口', f'{info}')

app = QApplication([])
uiui = UIUI()
uiui.ui.show()
app.exec_()
5.2 直接导入UI文件（2种方式）【第二种】
from PySide2.QtWidgets import QApplication,QMessageBox
from PySide2.QtUiTools import QUiLoader
from  PySide2.QtCore import QFile

class UIUI:
	def __init__(self):
	#先导入.ui文件，存在qfile_UIUI。然后关闭
		qfile_UIUI = QFile("UIUI.ui")
		qfile_UIUI.open(QFile.ReadOnly)
		qfile_UIUI.close()

		# 导入加载的UI类（返回的就是UI界面对应的QWidget窗体对象）
		self.ui = QUiLoader().load(qfile_UIUI)  # 界面对象
		self.ui.Button_jok.clicked.connect(self.yahoo)
		self.ui.Button_copy.clicked.connect(self.copy_text)

	def yahoo(self): #与手动创建代码不同，这里需要在（）加入self
		print('i was be knocked')
		QMessageBox.about(self.ui, '反馈结果', '小宝贝，你来了')
		#注意
		#(self.ui, '反馈结果', '哎呦，宝贝你来啦')这里的self.ui不是窗口初始化的new_window，也不是self

	def copy_text(self):
		info = self.ui.text_input.toPlainText()#与手动创建代码不同，这里需要在（）加入self
		QMessageBox.about(self.ui, '复制的新窗口', f'{info}')

app = QApplication([])
uiui = UIUI()
uiui.ui.show()
app.exec_()

开玩笑按钮：
在这里插入图片描述
复制按钮：
在这里插入图片描述

注意

如果代码没错，自己修改过之后一直出现这样的问题，解决不了：

在这里插入图片描述
报错为：

AttributeError: 'UIUI' object has no attribute 'ui'

---------------建议重新建个新 .py 文件编写（反正我是如此解决的）---------------------

除了动态加载的方式（2种导入方式），我们能否将设计的.ui文件转化为.py文件，文件中有界面的所有详细参数，（就像我们自己手写代码定义的一样，区别是用.ui转化而来）。

在这里插入图片描述

答案是可以的！！！

接下来让我们进入正题：
在这里插入图片描述
第一步：
先找到你的.ui存储的位置，我的是
在这里插入图片描述
第二步：
Win+R，输入cmd进入终端：
在这里插入图片描述
第三步：
进入到文件保存的盘，并输入转换指令：

> e (我的文件在E盘)
> cd  ...\...\...\(cd 到某个文件夹)
> pyside2-uic UIUI.ui > JM_ui.py

在这里插入图片描述
下列的代码为将.ui文件转换为对应的.py文件的指令：

pyside2-uic UIUI.ui > JM_ui.py

第四步：
察看导出的.py 文件
在这里插入图片描述
打开为下列代码：

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

################################################################################
## Form generated from reading UI file 'UIUI.ui'
##
## Created by: Qt User Interface Compiler version 5.15.2
##
## WARNING! All changes made in this file will be lost when recompiling UI file!
################################################################################

from PySide2.QtCore import *
from PySide2.QtGui import *
from PySide2.QtWidgets import *


class Ui_Form(object):   
	#有些转换出来是：class Ui_MainWindow(object):
    def setupUi(self, Form):
        if not Form.objectName():
            Form.setObjectName(u"Form")
        Form.resize(532, 380)
        self.Button_jok = QPushButton(Form)
        self.Button_jok.setObjectName(u"Button_jok")
        self.Button_jok.setGeometry(QRect(380, 90, 81, 41))
        self.text_input = QPlainTextEdit(Form)
        self.text_input.setObjectName(u"text_input")
        self.text_input.setGeometry(QRect(30, 20, 301, 341))
        self.Button_copy = QPushButton(Form)
        self.Button_copy.setObjectName(u"Button_copy")
        self.Button_copy.setGeometry(QRect(380, 180, 81, 41))

        self.retranslateUi(Form)

        QMetaObject.connectSlotsByName(Form)
    # setupUi

    def retranslateUi(self, Form):
        Form.setWindowTitle(QCoreApplication.translate("Form", u"\u8fd9\u4e0d\u662f\u4e00\u4e2a\u6b63\u7ecf\u7684GUI", None))
        self.Button_jok.setText(QCoreApplication.translate("Form", u"\u70b9\u6211\u5f00\u73a9\u7b11", None))
        self.text_input.setPlaceholderText(QCoreApplication.translate("Form", u"\u8bf7\u5728\u6b64\u8f93\u5165\u6587\u672c\u4fe1\u606f", None))
        self.Button_copy.setText(QCoreApplication.translate("Form", u"\u70b9\u6211\u590d\u5236", None))
    # retranslateUi

通过代码观察我们可以看到，在类class中为class Ui_Form(object):，但是有些朋友转换出来可能是class Ui_MainWindow(object):。

这到底是是为什么呢？

让我们使用步骤1打开Designer，观察.ui文件的控件信息。
在这里插入图片描述
右边的类是Qwidget，对象名就是Form。
因为我们创建的时候选择的就是Widget：
在这里插入图片描述
如果选择的是Main Window创建UI文件：
在这里插入图片描述
将.ui转换为.py文件：
在这里插入图片描述
这个细节需要注意，有些同学在导入的时候容易发生错误，也是因为这个地方的原因，并不是所有的都是
class Ui_MainWindow(object):

对.ui文件转换为.py文件后，就可以把这个.py文件当做是自己手写的创建UI的代码（比自己慢慢调尺寸，位置方便很多），保持这个文件别动，重新！重新！重新！（说三遍）创建一个新的.py文件用来写执行功能。

.ui转.py文件保存为：JM_ui.py
新建实现的文件为：UIUI.py

实现效果为：
在这里插入图片描述
实现代码为：

from PySide2.QtWidgets import QApplication,QMessageBox,QMainWindow
from JM_ui import *   #需要从JM_ui.py导入内容
import sys

class UIUI(QMainWindow,Ui_Form):
	def __init__(self, parent=None):
		super(UIUI, self).__init__(parent)
		#子类继承了父类的所有属性和方法，父类属性自然会用父类方法来进行初始化
		self.ui = Ui_Form()
		#转换的.py文件是class Ui_Form(object):
		self.ui.setupUi(self)#初始化界面
		
		self.ui.Button_jok.clicked.connect(self.yahoo)
		self.ui.Button_copy.clicked.connect(self.copy_text)

	def yahoo(self): #与手动创建代码不同，这里需要在（）加入self
		print('i was be knocked')
		QMessageBox.about(self.ui, '反馈结果', '小宝贝，你来了')
		#注意
		#(self.ui, '反馈结果', '哎呦，宝贝你来啦')这里的self.ui不是窗口初始化的new_window，也不是self

	def copy_text(self):
		info = self.ui.text_input.toPlainText()#与手动创建代码不同，这里需要在（）加入self
		QMessageBox.about(self.ui, '复制的新窗口', f'{info}')

if __name__ == "__main__":
	app = QApplication(sys.argv)
	uiui = UIUI()
	uiui.show()
	sys.exit(app.exec_())

疑问：这么多方法，到底哪一个最好，或者说哪一个方法最不容易出错呢？

答：我觉得用Designer设计出UI文件之后，动态加载UI文件，然后处理。这样的方法是最不容易出错的，况且载入UI的方法也比较多。

写在最后：
你要相信大多数人与人之间的差距并不大，但是0.99的N次方和1.1的N次方差距是随着N多增多而越来越大的；坚定的目标和持久的努力一定会成功！

你偷过的每一个懒，都会成为你日后最深的遗憾。

我是通信不二，一个积极努力，乐观向上的程序猿！！！

lenatu
关注
  • 14
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
【PySide2】通过Qt Designer设计界面，并转化为python代码运行
jn10010537的博客
12-09 3942
【PySide2】通过Qt Designer设计界面，并转化为python代码运行1. 背景2. Designer设计界面3. ui文件转py文件4. 运行ui文件5. 资源 1. 背景 在上一个博客 PySide2】 安装PySide2 https://blog.csdn.net/jn10010537/article/details/110679830 中我安装了pyside2，也大致说明了为什么使用Pyside2而不是PyQt,再次总结下： PyQt商业化需要购买商业许可证,或者选择GPL(自由软件协议
eric7,可视化构建ui界面,可用于python.
03-16
3. **模板和示例**：可能提供预设的界面布局和设计模板，帮助初学者快速上手。 4. **插件系统**：可能支持扩展，允许用户或社区开发额外的工具和功能。 5. **兼容性**：由于是用于Python，应该兼容各种Python版本...
将 Qt Designer 的 ui 文件转换为 PySide2 使用的.py 文件
weiweiqiao的专栏
09-08 1024
20201206 修订：在 Pyside2 的 5.15.2 版本中，从 ui 生成 py 文件过程，命令从 “uic” 变为 “pyside2-uic”Qt Designer 设计的 ui 文件，就是一个 xml 文件，通过 pyside-uic 可以转换成标准的.py 文件。通过 QtDesigner 创建的 ui 如图：我们切入正题：1：首先要保证将 pyside2-uic.exe 加到环境变量 Path 中。根据我的 Python，PySide2 安装路径。
Python Qt GUI设计：Python调用UI文件的两种方法（基础篇—3）
07-02 790
Python调用UI文件有两种方法：第一种将UI文件转换为Python文件，进行调用，第二种动态加载UI界面。
2024年Python最全Python UI自动化框架
最新发布
2401_84557986的博客
04-30 800
这是我花了几天的时间去把Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。基本上主流的和经典的都有，这里我就不放图了，版权问题，个人看看是没有问题的。config配置文件。
PYQT5动态加载ui文件
qq_36510630的博客
04-04 7786
Python动态加载QT designer 生成的ui文件
Pyside2 学习系列一：创建包含ui文件的项目 （超详细的Pyside2 攻略）
goldWave的博客
09-07 4069
主要是Pyside2的相关文档太少了，不全且大部分是英文的，所以当时想要学习pyside2开发gui的时候，研究的比较多，所以在这里做一个相关的总结。 请注意：这是Pyside2，并不是PyQt，虽然两者的语法差不多，都是python和qt开发ui，但是两者的组成是不一样的，Pyside2是qt官方开发，PyQt是第三方公司开发的，而且两者的调用函数还是有一定区别的。 因为这里需要是ui文件，所以开发的工具是Qt Creator, python 环境是3.6.7。 由于Qt Creator已经默认安装了
Python Qt GUI与数据可视化编程（一）
Alvwith的博客
04-15 4702
《Python Qt GUI与数据可视化编程》读书笔记
Qt Pyside2实现TCP服务端+客户端
12-10
本教程将详细介绍如何使用Qt Pyside2实现TCP服务端和客户端，帮助初学者更好地理解和应用TCP/IP协议。 首先，让我们了解TCP的基本原理。TCP是一种基于连接的协议，它在数据传输前先建立连接，确保数据的可靠传输。...
PySide2.7_downcc.zip
03-02
《PySide2与Python图形界面开发详解》 PySide2是Qt公司官方支持的一个Python绑定库，用于在Python环境中开发图形用户界面...对于初学者，可以参考官方文档、教程和示例代码，逐步掌握PySide2的精髓，提升GUI开发能力。
UI-python
02-11
标题中的“UI-python”指的是使用...无论你是初学者还是经验丰富的开发者，都可以通过Python轻松地创建出美观且功能丰富的用户界面。通过研究“UI-python-master”项目，你可以掌握这一领域的核心技术和最佳实践。
python+pyqt5 做上位机界面
04-10
适用于参考学习，下载可以直接运行 __author__ = 'Sunrise' from PyQt5 import QtCore, QtGui, QtWidgets class Ui_Form(object): def setupUi(self, Form): Form.setObjectName("Form") Form.resize(976, 568) self.verticalGroupBox_3 = QtWidgets.QGroupBox(Form) self.verticalGroupBox_3.setGeometry(QtCore.QRect(10, 460, 101, 101))
PYTHON QT GUI快速编程 PYQT编程指南
09-14
5. **设计与界面构建**：介绍使用QT Designer工具设计GUI界面的方法，通过拖拽和配置控件，快速生成UI文件（.ui），然后使用PyQT的uic模块将其转换为Python代码。 6. **编程实践**：通过实例演示如何编写代码来控制...
【PySide2学习笔记（一）】PySide2动态加载UI方式，重写关闭窗体事件
weixin_42493459的博客
04-19 783
动态加载UI界面的方式可以随时更新调测UI，更加方便快捷，尤其受初学者的喜爱。但是，QuiLoader是使用组合的方法将控件塞入内部命名空间，并没有真正创建一个顶级类，因此无法响应事件。本文探索了动态加载UI方式，重写关闭窗体事件，希望对初学者有用。
PySide2关于QUiLoader无法响应event的解决方法
gsyfy的博客
03-20 1785
PySide2关于QUiLoader无法响应event的解决方法 关于QUiLoader无法响应event的解决方法 一、实例： 代码如下： // from PySide2.QtUiTools import QUiLoader from PySide2.QtWidgets import * from PySide2.QtCore import * from PySide2.QtGui import * from traceback import print_exc class Mainwindow(QW
PyQt5学习：QLabel 标签控件两种 自适应缩放显示图片 方法比较
热门推荐
集电极
06-25 1万+
目录 1.测试代码 2.运行结果与代码分析 1.测试代码（注意py文件命名） 1.1Qtdesigner设计的uipy文件 zoomimage_test.py(请注意这个文件一定要命名为zoomimage_test.py，要不然后面调用时会出错，如果能注意修改调用文件当我没说。。。) # -*- coding: utf-8 -*- # Form implementation generated from reading ui file 'zoomimage_test.ui' # ...
自定义对话框及其使用
lbaihao的专栏
06-27 226
import sys from PyQt5.QtWidgets import (QApplication, QDialog,QFileDialog, QColorDialog,QFontDialog,QProgressDialog, QLineEdit,QInputDialog,QMessageBox) from PyQt5.QtCore import Qt, pyqtSlot, QDir,QTime .
把Qt Designer的ui文件转换为PySide页面文件
sgcc_zhs的专栏
08-12 4187
Qt Designer 设计的ui文件，就是一个xml文件，通过pyside-uic可以转换成标准的.py文件。 这个功能不是pyside的专利，也可以通过pyqt转换。 1. 前提： 安装了pyside。 环境变量中设置了 C:\Python27\Scripts。 （pyside-uic.exe 这个文件在~\Python27\Scripts文件夹下，如果不设置这个环境变量，用绝对
PyQt5|PySide2 UI界面内嵌web浏览器的方法
HRD的博客
12-09 6778
PyQt5|PySide2 程序内嵌web浏览器的方法 内嵌web浏览器 有时候，我们需要在程序中嵌入浏览器，显示一个指定的网页。 Qt5中，有一个 QtWebEngineWidgets 模块，通过它，可以启动基于Chromium的浏览器（和chrome是同样的内核）进程，并且把web界面内嵌入 Qt程序中。 参考官网说明 案例 我们可以实现一个内嵌浏览器，打开白月黑羽网站。 整个案例的参考代码，点击这里下载 链接：https://pan.baidu.com/s/1FBLdSU0w_LYSs
Python导入UI文件代码
04-07
可以使用PyQt5工具将UI文件转换为Python文件，然后在Python文件中导入使用。具体代码可以参考以下示例： ```python from PyQt5 import QtWidgets, uic # Load UI file Ui_MainWindow, QtBaseClass = uic.loadUiType("mainwindow.ui") # Create application window app = QtWidgets.QApplication([]) window = QtWidgets.QMainWindow() # Set up the user interface from Designer ui = Ui_MainWindow() ui.setupUi(window) # Show the window window.show() # Run the event loop app.exec_() ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值