PyQt5| 界面设计 |利用Qt Designer实现简单界面交互

目录1 QtDesigner简单界面设计2 代码部分2.1 ui文件转py文件2.2 界面文件代码2.3 主文件代码2.3.1 主体框架代码2.3.2 实现交互代码3结果展示准备工作配置好PyQt5相关的库、QtDesigner、pyuic1 QtDesigner简单界面设计点击“工具——“外部工具External Tools”——“QtDesigner”。进入程序之后点击“创建”创建一个新的ui文件。进入设计界面之后将“按钮”控件拖放到主窗口的合适位置。用于响应用户的交互动作比如点击、按下或释放将“单行文本”控件拖放到主窗口的合适位置。用于单行文本输入的控件它允许用户在界面上输入和编辑文本将“多行文本编辑器”控件拖放到主窗口的合适位置。与 QLineEdit 控件不同它允许用户输入和编辑多行文本内容将“窗口这里用于绘图”控件拖放到主窗口的合适位置。用于绘制、事件处理和布局管理提供了基本的 GUI 功能。将控件进一步添加如下图所示添加“按钮”和“标签”并改变文本内容。在右侧的“对象查看器”中可以看到当前所添加的所有控件的名称和相应的属性内容。将ui文件保存到文件夹中后续代码文件也放在这个文件夹里2 代码部分2.1 ui文件转py文件转换方法有两种一种是用External Tools转换一种是用专门的代码去转换。两种方法的前提是要配置好pyuic方法一External Tools外部工具栏1在Pycharm左侧项目栏中找到刚刚存放ui文件的文件夹打开文件夹后将ui文件拖放到右侧打开。2点击“工具——“外部工具External Tools”——“PyUIC”。点击之后可以看到左侧文件夹中生成了相应的py文件转换成功方法二ui转py专用代码需要注意的是在运行代码之前需要把该专用代码放到和ui文件所在的同一个文件夹里。我让ChatGPT写了一个ui转换py专用的代码自己转换了一遍经验证放心可用代码如下importosimportsubprocessdefui_to_py(ui_file):Converts a Qt Designer .ui file to a Python .py file in the same directory.# Get the base name without extensionbase_nameos.path.splitext(ui_file)[0]# Construct the output .py file namepy_filebase_name.py# Construct the commandcommandfpyuic5 -o{py_file}{ui_file}try:# Run the commandsubprocess.run(command,checkTrue,shellTrue)print(fSuccessfully converted{ui_file}to{py_file})exceptsubprocess.CalledProcessErrorase:print(fFailed to convert{ui_file}to{py_file}:{e})if__name____main__:# Get the current directorycurrent_directoryos.getcwd()# Loop through all files in the current directoryforfile_nameinos.listdir(current_directory):# Check if the file is a .ui fileiffile_name.endswith(.ui):# Convert the .ui file to .py fileui_to_py(file_name)运行上述之后可以看到左侧文件夹中生成了相应的py文件转换成功2.2 界面文件代码下面是转换后的py文件为了方便我们后面都叫它界面文件。界面文件中有控件的具体信息比如控件尺寸大小、位置、名称、显示内容等信息。此外我们还要记住它的类名以便后续主文件的类进行继承。转换后的完整py文件代码如下# -*- coding: utf-8 -*-# Form implementation generated from reading ui file 0622test.ui## Created by: PyQt5 UI code generator 5.15.4## WARNING: Any manual changes made to this file will be lost when pyuic5 is# run again. Do not edit this file unless you know what you are doing.fromPyQt5importQtCore,QtGui,QtWidgetsclassUi_MainWindow(object):defsetupUi(self,MainWindow):MainWindow.setObjectName(MainWindow)MainWindow.resize(791,593)#主窗口大小self.centralwidgetQtWidgets.QWidget(MainWindow)self.centralwidget.setObjectName(centralwidget)#主窗口名称self.pushButtonQtWidgets.QPushButton(self.centralwidget)self.pushButton.setGeometry(QtCore.QRect(80,90,89,27))#按钮大小和在主窗口中的位置self.pushButton.setObjectName(pushButton)#按钮名称self.lineEditQtWidgets.QLineEdit(self.centralwidget)self.lineEdit.setGeometry(QtCore.QRect(210,90,113,20))#......self.lineEdit.setObjectName(lineEdit)self.textEditQtWidgets.QTextEdit(self.centralwidget)self.textEdit.setGeometry(QtCore.QRect(210,140,211,141))self.textEdit.setObjectName(textEdit)self.widgetQtWidgets.QWidget(self.centralwidget)self.widget.setGeometry(QtCore.QRect(210,300,401,201))self.widget.setObjectName(widget)self.pushButton_2QtWidgets.QPushButton(self.centralwidget)self.pushButton_2.setGeometry(QtCore.QRect(80,190,89,27))self.pushButton_2.setObjectName(pushButton_2)self.pushButton_3QtWidgets.QPushButton(self.centralwidget)self.pushButton_3.setGeometry(QtCore.QRect(80,350,89,27))self.pushButton_3.setObjectName(pushButton_3)self.labelQtWidgets.QLabel(self.centralwidget)self.label.setGeometry(QtCore.QRect(360,90,63,14))self.label.setObjectName(label)self.label_2QtWidgets.QLabel(self.centralwidget)self.label_2.setGeometry(QtCore.QRect(450,200,63,14))self.label_2.setObjectName(label_2)self.label_3QtWidgets.QLabel(self.centralwidget)self.label_3.setGeometry(QtCore.QRect(640,390,63,14))self.label_3.setObjectName(label_3)MainWindow.setCentralWidget(self.centralwidget)self.menubarQtWidgets.QMenuBar(MainWindow)self.menubar.setGeometry(QtCore.QRect(0,0,791,26))self.menubar.setObjectName(menubar)MainWindow.setMenuBar(self.menubar)self.statusbarQtWidgets.QStatusBar(MainWindow)self.statusbar.setObjectName(statusbar)MainWindow.setStatusBar(self.statusbar)self.retranslateUi(MainWindow)QtCore.QMetaObject.connectSlotsByName(MainWindow)defretranslateUi(self,MainWindow):_translateQtCore.QCoreApplication.translate MainWindow.setWindowTitle(_translate(MainWindow,MainWindow))# 显示的文本内容self.pushButton.setText(_translate(MainWindow,按钮1))#显示的文本内容self.pushButton_2.setText(_translate(MainWindow,按钮2))#......self.pushButton_3.setText(_translate(MainWindow,按钮3))self.label.setText(_translate(MainWindow,单行文本))self.label_2.setText(_translate(MainWindow,多行文本))self.label_3.setText(_translate(MainWindow,绘图))2.3 主文件代码2.3.1 主体框架代码我们先来介绍主体的框架这是一部分是个模板套用的时候需要需改一下细节信息废话不多说先上代码先前的转换后的py代码命名不符合规范我重命名为了f0622test.pyimportsysfromPyQt5.QtWidgetsimport*fromPyQt5.Qtimport*fromPyQt5.QtCoreimport*fromPyQt5.QtWidgetsimportQApplication,QMainWindow,QDesktopWidget,QLineEditfromf0622testimport*#导入转换后的py文件要用自己的转换后的py文件的名字我这里是f0622test.pyclassMyWindows(QMainWindow,Ui_MainWindow):#继承自两个父类,一个是QMainWindow,一个是转换后的py文件的类这里是Ui_MainWindowdef__init__(self):super(MyWindows,self).__init__()self.setupUi(self)#......if__name____main__:appQtWidgets.QApplication(sys.argv)windowMyWindows()window.show()sys.exit(app.exec_())下面对它们进行解释import syssys 模块提供了一系列与 Python 解释器进行交互的功能包括命令行参数、标准输入输出、错误流等。from PyQt5.QtWidgets import *PyQt5.QtWidgets 模块包含了所有用于创建图形用户界面GUI的基本控件如按钮、标签、文本框等。from PyQt5.Qt import *PyQt5.Qt 模块提供了 PyQt 中常用的基本类包括信号与槽机制、事件处理等。from PyQt5.QtCore import *PyQt5.QtCore 模块包含了核心的非 GUI 功能包括事件循环、信号与槽、时间和日期、文件和目录操作等。from PyQt5.QtWidgets import QApplication, QMainWindow, QDesktopWidget, QLineEdit这些特定的导入用于创建应用程序、主窗口、桌面控件和单行文本输入框。from XAJ1 import *导入自定义模块 XAJ1 中的所有内容这通常包含定义的类、函数和变量。XAJ1 是你项目中的一个模块它可能包含一些特定功能的实现。类和初始化函数classMyWindows(QMainWindow,Ui_MainWindow):def__init__(self):super(MyWindows,self).__init__()self.setupUi(self)①定义一个名为 MyWindows 的类继承了 QMainWindow 和 Ui_MainWindow。②在创建 MyWindows 对象时调用父类的构造函数进行初始化。③调用 Ui_MainWindow 的 setupUi 方法设置用户界面将所有设计好的控件和布局添加到当前窗口实例中。结尾代码判断当前模块是否被直接执行if__name____main__:appQtWidgets.QApplication(sys.argv)windowMyWindows()window.show()sys.exit(app.exec_())①检查脚本是否被直接运行。②初始化一个 QApplication 对象。③创建并初始化主窗口对象。⑤显示主窗口。⑥启动主事件循环并运行应用程序直到用户退出。这些步骤是创建和运行任何 PyQt5 应用程序所必需的标准流程。其中第一行的代码经常会用到这里详细解释if__name____main__:这行代码检查当前模块是否是作为主程序运行。name是一个特殊变量当模块被直接运行时其值为main。如果模块是被导入的其值将是模块的名称。因此这行代码的意思是只有当该脚本被直接运行时下面的代码块才会被执行。2.3.2 实现交互代码下面介绍实现交互的代码首先我们要知道先前我们布置的控件的名称有两个途径①用QtDesigner打开ui文件在右侧对象查看器查看。②在转换后的py文件中查看。我们来举个例子比如要知道“按钮1”的名称经查看名称是pushButton途径①途径②然后我们才能开始对控件的交互功能进行实现。下面对三个输出控件单行文本、多行文本、绘图窗口设置三个函数描述其功能(1)函数1对应LineEdit控件deffunction_1(self):#按钮1点击事件self.lineEdit.setText(2024)#执行该函数时会将名称为lineEdit的控件文本内容设置为20242函数2对应TextEdit控件deffunction_2(self):# 按钮2点击事件aself.lineEdit.text()# 获取lineEdit的文本内容aint(a)# 由于获取的lineEdit的文本内容是字符串所以要转换为整数ifa2024:self.textEdit.setText(Hello World)# 如果lineEdit的文本内容为2024则将textEdit的文本内容设置为Hello Worldself.textEdit.append(今年是)# 在textEdit中追加文本会在下一行显示self.textEdit.append(f{a}年)# 在textEdit中追加文本会在下一行显示由于a是整数所以要转换为字符串3函数3对应Widget控件我们要先在文件开头导入画图相关的包frommatplotlib.figureimportFigure#用来创建图形相当于画布frommatplotlib.backends.backend_qt5aggimportFigureCanvasQTAggasFigureCanvas#用来将matplotlib的图形嵌入到PyQt5的窗口中importmatplotlib.pyplotasplt#一般用来绘图这里用来调整中文字体因为已经有了画图的FigureCanvas而后进行函数3的编写deffunction_3(self):#按钮3点击事件# 创建 FigureCanvas 并嵌入到 QWidget 中figureFigure()canvasFigureCanvas(figure)layoutQVBoxLayout(self.widget)# 我的绘图窗口名称叫widget所以这里是self.widget。# QVBoxLayout是垂直布局布局管理器用于管理widget中的控件这里是FigureCanvaslayout.addWidget(canvas)# 将FigureCanvas添加到布局管理器中# 设置 matplotlib 使用的字体plt.rcParams[font.sans-serif][SimSun,Microsoft YaHei]# 使用宋体和微软雅黑plt.rcParams[axes.unicode_minus]False# 解决负号显示问题# 绘制折线图x[1,2,3,4,5]y[1,4,9,16,25]axfigure.add_subplot(111)ax.plot(x,y,markero)ax.set_title(样例图)ax.set_xlabel(X轴)ax.set_ylabel(Y轴)ax.grid(True)canvas.draw()下面进行按钮与相应函数功能的连接在初始化函数中添加以下内容self.pushButton.clicked.connect(self.function_1)# 按钮1点击事件连接到function_1函数self.pushButton_2.clicked.connect(self.function_2)self.pushButton_3.clicked.connect(self.function_3)完整主文件代码如下importsysfromPyQt5.QtWidgetsimport*fromPyQt5.Qtimport*fromPyQt5.QtCoreimport*fromPyQt5.QtWidgetsimportQApplication,QMainWindow,QDesktopWidget,QLineEditfromf0622testimport*#导入转换后的py文件要用自己的转换后的py文件的名字我这里是f0622test.pyfrommatplotlib.figureimportFigure#用来创建图形相当于画布frommatplotlib.backends.backend_qt5aggimportFigureCanvasQTAggasFigureCanvas#用来将matplotlib的图形嵌入到PyQt5的窗口中importmatplotlib.pyplotasplt#一般用来绘图这里用来调整中文字体因为已经有了画图的FigureCanvasclassMyWindows(QMainWindow,Ui_MainWindow):#继承自两个父类,一个是QMainWindow,一个是转换后的py文件的类这里是Ui_MainWindowdef__init__(self):super(MyWindows,self).__init__()self.setupUi(self)self.pushButton.clicked.connect(self.function_1)# 按钮1点击事件连接到function_1函数self.pushButton_2.clicked.connect(self.function_2)self.pushButton_3.clicked.connect(self.function_3)#......deffunction_1(self):#按钮1点击事件self.lineEdit.setText(2024)#执行该函数时会将名称为lineEdit的控件文本内容设置为2024deffunction_2(self):# 按钮2点击事件aself.lineEdit.text()# 获取lineEdit的文本内容aint(a)# 由于获取的lineEdit的文本内容是字符串所以要转换为整数ifa2024:self.textEdit.setText(Hello World)# 如果lineEdit的文本内容为2024则将textEdit的文本内容设置为Hello Worldself.textEdit.append(今年是)# 在textEdit中追加文本会在下一行显示self.textEdit.append(f{a}年)# 在textEdit中追加文本会在下一行显示由于a是整数所以要转换为字符串else:self.textEdit.setText(你好世界)# 如果lineEdit的文本内容不是2024则将textEdit的文本内容设置为输入错误deffunction_3(self):#按钮3点击事件# 创建 FigureCanvas 并嵌入到 QWidget 中figureFigure()canvasFigureCanvas(figure)layoutQVBoxLayout(self.widget)# 我的绘图窗口名称叫widget所以这里是self.widget。# QVBoxLayout是垂直布局布局管理器用于管理widget中的控件这里是FigureCanvaslayout.addWidget(canvas)# 将FigureCanvas添加到布局管理器中# 设置 matplotlib 使用的字体plt.rcParams[font.sans-serif][SimSun,Microsoft YaHei]# 使用宋体和微软雅黑plt.rcParams[axes.unicode_minus]False# 解决负号显示问题# 绘制折线图x[1,2,3,4,5]y[1,4,9,16,25]axfigure.add_subplot(111)ax.plot(x,y,markero)ax.set_title(样例图)ax.set_xlabel(X轴)ax.set_ylabel(Y轴)ax.grid(True)canvas.draw()if__name____main__:appQtWidgets.QApplication(sys.argv)windowMyWindows()window.show()sys.exit(app.exec_())运行主文件代码点击相应按钮即可实现相应功能。3结果展示