当前位置：首页 > news >正文

|从零开始的Pyside2界面编程| 环境搭建以及第一个ui界面

news 2025/5/19 7:52:52

🐑 |从零开始的Pyside2界面编程| 环境搭建以及第一个ui界面🐑

文章目录

🐑 |从零开始的Pyside2界面编程| 环境搭建以及第一个ui界面🐑
- ♈前言♈
- ♈Pyside2环境搭建♈
- ♈做个简单的UI界面♈
- - ♒代码实现♒
  - ♒QTdesigner设计UI界面♒
- ♒总结♒

♈前言♈

距离上一次写博客已经过去大半年了，突然一写感觉markdown都有点不太会用了（被去年一周一更的想法啪啪打脸😑）。主要也是去年最后一段时间有点小emo，导致生活和科研的疯狂摆烂（然后就一直摆烂一直爽了🤓）。
在这里插入图片描述
算了言归正传，生活还很长,学习也还要继续。最近由于要参加某某比赛的缘故，需要把自己的课题加点实用性，做到真正意义上的落地，于是就自己想着捣鼓点前段页面之类的，最后决定从零开始学习这系列编程，并记录一下学习的一些过程，踩过的弯路以及一点小的心得。本篇博客身为这个专栏的处女篇主要包含Pyside2环境搭建以及简单ui界面的制作，就算是一个简单的🌴Hello World🌴。

♈Pyside2环境搭建♈

这个专栏通篇都会使用pyside2作为开发库。

PySide2 是 Qt 官方支持的 Python 绑定版本，全名为 Qt for Python，对应 Qt 的 5.x 系列。它提供了完整的 Qt 框架 API，包括窗口、布局、控件、信号槽机制、多媒体、动画等模块，允许开发者使用 Python 编写高质量的跨平台桌面应用。

除了pyside2之外当前使用比较多的嗨哟pyqt、pyside6，但是pyside2相比较于他俩而言，拥有更加宽松的授权以及兼容性更好，并且由于他的第三方库以及相关教程足够多导致pyside2更容易上手一点，生态更加成熟。但是正因为这个特点导致他打包后生成的最后应用程序体积较大（几十MB起步）
⚖️PySide2 的优缺点对比分析

分类	项目	说明
✅ 优点	官方支持	由 Qt 官方维护，稳定性与兼容性好
✅ 优点	免费开源授权宽松	使用 LGPL v3，可用于闭源商业项目，不受限制
✅ 优点	API 风格统一	接口命名风格接近 Qt 原生 C++，方便查阅与迁移
✅ 优点	跨平台能力强	支持 Windows、Linux、macOS 等主流桌面系统
✅ 优点	教学与原型开发友好	使用 Python 编写 GUI，更简洁易懂，适合教学与快速开发
❗ 缺点	打包体积大	打包后的程序较大，动辄几十 MB，不利于轻量化部署
❗ 缺点	Qt Designer 集成不够流畅	`.ui` 文件转换步骤较繁琐，命令行工具不如 PyQt5 使用顺畅
❗ 缺点	缺少部分 PyQt 扩展功能	如 `pyqtSignal`、`pyqtProperty` 等 PyQt 独有特性不可直接使用

🧠 总结建议

如果你的目标是 快速开发、开源授权友好、兼容性强 的 Python GUI 工具，PySide2 是非常值得选择的工具框架。
若追求更丰富的文档、更复杂的界面特效，也可考虑 PyQt5 或 PySide6，但需权衡授权和平台兼容性。

大致这就是选择他的一些想法，下面说一下如何去配置相关的库。还是和原来一样，为了便于管理还是建议配置在一个虚拟环境中，如果对于虚拟环境不太了解的朋友可以看一下我另一篇博客：|Anaconda安装| Anaconda、pycharm安装及配置虚拟镜像源和Python环境详细教程。
首先打开Anaconda Prompt
在这里插入图片描述
打开之后，配置相关虚拟环境并且激活，例如我这里就是激活了一个名为pingyeling的虚拟环境

我这里安装的是3.8版本的python 下面是安装pyside2的命令符

pip install pyside2

这里更推荐使用pip安装，因为conda仓库中的pyside2版本可能会比较旧。
在这里插入图片描述
这里出现successful就是安装成功。

♈做个简单的UI界面♈

安装成功之后就可以进行pyside2的hello world了，这里简单介绍两种方法，一种是纯粹的使用代码实现，另一种就是用库里的QTdesigner。

♒代码实现♒

这里先实现一个简单的ui界面，可以通过输入姓名和性别来分类出男性和女性的分类。下图就是简单的实现后的一个结果。
请添加图片描述
首先介绍一下实现性别统计那个UI界面的代码。

from PySide2.QtWidgets import QApplication, QMainWindow, QPushButton,  QPlainTextEditapp = QApplication([])

首先是导入库里四个常用的ui界面控件类，从英文意思能猜到分别负责整个应用程序的管理类、主窗口类、按钮控件以及纯文本编辑。其次就是创建了一个QApplication的实例，并命名为app

window = QMainWindow()
window.resize(500, 400)
window.move(300, 310)
window.setWindowTitle('性别统计')

这里就是实现一个主窗口，其中window.resize()为设置主窗口的大小，window.move()为设置的主窗口的位置，并且用window.setWindowTitle()将主窗口命名为‘性别统计’

textEdit = QPlainTextEdit(window)
textEdit.setPlaceholderText("请输入姓名")
textEdit.move(10,25)
textEdit.resize(300,350)

然后就是上述代码做一个文本编辑框，同样也是实例化后定义其大小和位置，textEdit.setPlaceholderText("请输入姓名")则是提示用户的输入
在这里插入图片描述

button = QPushButton('统计', window)
button.move(380,80)

最后就是将统计按钮用上述代码定义，其中button = QPushButton('统计', window)这里将其父控件定义为window即主窗口。
在这里插入图片描述

window.show()app.exec_()

最后两行代码就是显示窗口以及设置程序为持续运行

完整ui界面代码：

from PySide2.QtWidgets import QApplication, QMainWindow, QPushButton,  QPlainTextEditapp = QApplication([])window = QMainWindow()
window.resize(500, 400)
window.move(300, 310)
window.setWindowTitle('性别统计')textEdit = QPlainTextEdit(window)
textEdit.setPlaceholderText("请输入姓名")
textEdit.move(10,25)
textEdit.resize(300,350)button = QPushButton('统计', window)
button.move(380,80)window.show()app.exec_()

至此我们就完整定义了一个UI界面，如下图。
在这里插入图片描述
但是现在他只是一个含有主窗口、文本编辑框以及按钮的界面，还无法实现任何任务，后面我们将继续定义相关交互动作，在本UI界面中交互动作主要包括button按钮点击后应处理的任务，以及输入文本后的处理。
既然我们需要实现把输入的姓名 0/1进行性别分类，首先把性别分类的代码封装为函数完成。

def handle():info = textEdit.toPlainText()male = ''female = ''for line in info.splitlines():if not line.strip():continueparts = line.split(' ')# 去掉列表中的空字符串内容parts = [p for p in parts if p]name,sex = partsif int(sex) == 0:male += name + '\n'else:female += name + '\n'QMessageBox.about(window,'统计结果',f'''男性有：\n{male}\n女性有：\n{female}''')

其中info = textEdit.toPlainText()可以将文本编辑框中输入的信息进行提取并赋值给info
QMessageBox.about(window, '统计结果', f'''男性有：\n{male} \n女性有：\n{female}''' )创建了一个弹出窗口类的实例，并依附于父窗口window,并且输出由上述函数处理的结果。
并且button定义的地方加上button.clicked.connect(handleCalc)，目的是检测到统计按钮检测到被点击后执行handleCalc函数。
完整代码（ui界面搭建和功能实现）如下：

from PySide2.QtWidgets import QApplication, QMainWindow, QPushButton,  QPlainTextEdit,QMessageBoxdef handleCalc():info = textEdit.toPlainText()male = ''female = ''for line in info.splitlines():if not line.strip():continueparts = line.split(' ')# 去掉列表中的空字符串内容parts = [p for p in parts if p]name,sex = partsif int(sex) == 0:male += name + '\n'else:female += name + '\n'QMessageBox.about(window,'统计结果',f'''男性有：\n{male}\n女性有：\n{female}''')app = QApplication([])window = QMainWindow()
window.resize(500, 400)
window.move(300, 300)
window.setWindowTitle('性别统计')textEdit = QPlainTextEdit(window)
textEdit.setPlaceholderText("请输入姓名及性别（男性为0，女性为1）")
textEdit.move(10,25)
textEdit.resize(300,350)button = QPushButton('统计', window)
button.move(380,80)
button.clicked.connect(handleCalc)window.show()app.exec_()

后续为了更好地管理代码我们可以把以类的形式进行封装，以类进行封装后的完整代码：

from PySide2.QtWidgets import QApplication, QMainWindow, QPushButton, QPlainTextEdit, QMessageBoxclass GenderStatsApp(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("性别统计")self.resize(500, 400)self.move(300, 300)self.textEdit = QPlainTextEdit(self)self.textEdit.setPlaceholderText("请输入姓名及性别（男性为0，女性为1）")self.textEdit.move(10, 25)self.textEdit.resize(300, 350)self.button = QPushButton("统计", self)self.button.move(380, 80)self.button.clicked.connect(self.handleCalc)def handleCalc(self):info = self.textEdit.toPlainText()male = ''female = ''for line in info.splitlines():if not line.strip():continueparts = [p for p in line.split(' ') if p]if len(parts) != 2:continuename, sex = partsif sex == '0':male += name + '\n'elif sex == '1':female += name + '\n'QMessageBox.about(self,'统计结果',f'''男性有：\n{male}\n女性有：\n{female}''')if __name__ == "__main__":app = QApplication([])window = GenderStatsApp()window.show()app.exec_()

♒QTdesigner设计UI界面♒

首先我们要从安装的pyside2包里面找到QTdesigner
在这里插入图片描述
如果不知道自己的虚拟环境位置可以从conda prompt中使用conda env list进行查找

打开QTdesigner后就是如下页面。

我们可以通过这个页面直接像搭积木一样首先搭建好UI界面。首先我们可以默认创建一个Widget.
在这里插入图片描述
其中页面左侧Widget Box里面会包含我们搭建UI界面所需要的各种组件，例如按键表格等。首先从左侧找到一个文本编辑框，也就是Plain Text Edit

将其拖出来后调成合适的大小即可，并找到push botton也将其拖出来调至合适大小和位置。
在这里插入图片描述
然后双击按钮的位置可以更改名称将其改为统计，然后选中文本编辑框在右侧属性的地方将placeholderText改为请输入即可

最后我们可以再上方菜单栏的窗体下面预览一下最后结果

最后记得保存一下，保存位置建议和自己Python项目在同一个文件夹
在这里插入图片描述
相较于直接编写代码实现，在自己设计好UI界面后只需要将其加载出来就可以继续后续操作。

class Sex():def __init__(self):qfile_stats = QFile('tst.ui')qfile_stats.open(QFile.ReadOnly)self.ui = QUiLoader().load(qfile_stats)qfile_stats.close()self.ui.button.clicked.connect(self.handleCalc)self.textEdit = self.ui.findChild(QPlainTextEdit, 'textEdit')

上述为加载代码，其中需要注意自己控件的ObjectName，可以再QTdesigner中选中在右边属性栏中看到。
在这里插入图片描述
我这里两个编辑框为textEdit，按钮为button,如果不一样只需要把代码最后两行改成自己的名称即可。后面实现跟上个方法就打差不差了，直接上代码吧

from PySide2.QtWidgets import QApplication,   QPlainTextEdit,QMessageBox
from PySide2.QtUiTools import QUiLoader
from PySide2.QtCore import QFileclass Sex():def __init__(self):qfile_stats = QFile('tst.ui')qfile_stats.open(QFile.ReadOnly)self.ui = QUiLoader().load(qfile_stats)qfile_stats.close()self.ui.button.clicked.connect(self.handleCalc)self.textEdit = self.ui.findChild(QPlainTextEdit, 'textEdit')def handleCalc(self):info = self.textEdit.toPlainText()male = ''female = ''for line in info.splitlines():if not line.strip():continueparts = line.split(' ')# 去掉列表中的空字符串内容parts = [p for p in parts if p]name, sex = partsif int(sex) == 0:male += name + '\n'else:female += name + '\n'QMessageBox.about(self.ui,'统计结果',f'''男性有：\n{male}\n女性有：\n{female}''')app = QApplication([])
stats = Sex()
stats.ui.show()
app.exec_()