基于PyQt5的UI界面开发—

基于PyQt5的UI界面开发——多界面切换

news2024/12/28 2:07:44

介绍

最初，因为课设的缘故，我只是想做一个通过按键进行切面切换而已，但是我看网上资料里面仅是语焉不详，让我困惑的很，但后面我通过摸索才发现这件事实在是太简单了，因此我想要记录下来。

本博客将介绍如何使用PyQt5库创建一个具有多界面切换功能的应用程序。通过详细的代码示例，我们将展示如何设计一个包含两个主要界面的应用，用户可以通过菜单栏的选项在这两个界面之间自由切换。代码示例中，我们使用了QStackedWidget来实现界面的切换。此外，我们还将分享如何连接菜单项与界面切换功能的技巧。无论是初学者还是有一定经验的开发者，都能通过本博客快速掌握PyQt5中多界面切换的实现方法，为自己的应用程序增添更多交互性和灵活性。

UI的设计

创建不需要选择其他，就只用选择主窗口，即下面图所示

在左边的控件中的Containers中选择Stacked Widget。拉到主窗口中，拉托到合适的大小。

由于目前的不是很明显，所以你可以暂时先修改一下它的属性。将frameShape修改为Box。

现在就明显许多了，接下来我们随便的添加一些控件。

预览效果如下所示：

界面1

界面2

可以通过右上角的两个三角形进行切换，没关系，只是这里的预览有，通过代码就没有了。接下来我准备使用菜单栏来进行示例，如下所示：

这里我们将菜单栏部分的“界面1”命名为action_1，“界面2”命名为action_2。

菜单栏控制界面切换

下面为我设计的简单ui转换的代码，Switch.py。

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

# Form implementation generated from reading ui file 'Switch.ui'
#
# Created by: PyQt5 UI code generator 5.15.9
#
# 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.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(798, 553)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.stackedWidget = QtWidgets.QStackedWidget(self.centralwidget)
        self.stackedWidget.setGeometry(QtCore.QRect(50, 70, 721, 401))
        self.stackedWidget.setFrameShape(QtWidgets.QFrame.Box)
        self.stackedWidget.setObjectName("stackedWidget")
        self.page = QtWidgets.QWidget()
        self.page.setObjectName("page")
        self.checkBox1 = QtWidgets.QCheckBox(self.page)
        self.checkBox1.setGeometry(QtCore.QRect(430, 150, 75, 16))
        font = QtGui.QFont()
        font.setFamily("Times New Roman")
        font.setPointSize(10)
        font.setBold(True)
        font.setWeight(75)
        self.checkBox1.setFont(font)
        self.checkBox1.setObjectName("checkBox1")
        self.pushButton1 = QtWidgets.QPushButton(self.page)
        self.pushButton1.setGeometry(QtCore.QRect(260, 150, 93, 28))
        self.pushButton1.setObjectName("pushButton1")
        self.stackedWidget.addWidget(self.page)
        self.page_2 = QtWidgets.QWidget()
        self.page_2.setObjectName("page_2")
        self.pushButton2 = QtWidgets.QPushButton(self.page_2)
        self.pushButton2.setGeometry(QtCore.QRect(300, 140, 93, 28))
        self.pushButton2.setObjectName("pushButton2")
        self.checkBox2 = QtWidgets.QCheckBox(self.page_2)
        self.checkBox2.setGeometry(QtCore.QRect(320, 230, 75, 16))
        font = QtGui.QFont()
        font.setFamily("Times New Roman")
        font.setPointSize(10)
        font.setBold(True)
        font.setWeight(75)
        self.checkBox2.setFont(font)
        self.checkBox2.setObjectName("checkBox2")
        self.stackedWidget.addWidget(self.page_2)
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(330, 10, 141, 41))
        font = QtGui.QFont()
        font.setFamily("宋体")
        font.setPointSize(12)
        self.label.setFont(font)
        self.label.setObjectName("label")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 798, 26))
        self.menubar.setObjectName("menubar")
        self.menu = QtWidgets.QMenu(self.menubar)
        self.menu.setObjectName("menu")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)
        self.action_1 = QtWidgets.QAction(MainWindow)
        self.action_1.setObjectName("action_1")
        self.action_2 = QtWidgets.QAction(MainWindow)
        self.action_2.setObjectName("action_2")
        self.menu.addAction(self.action_1)
        self.menu.addAction(self.action_2)
        self.menubar.addAction(self.menu.menuAction())

        self.retranslateUi(MainWindow)
        self.stackedWidget.setCurrentIndex(0)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.checkBox1.setText(_translate("MainWindow", "test1"))
        self.pushButton1.setText(_translate("MainWindow", "界面1"))
        self.pushButton2.setText(_translate("MainWindow", "界面2"))
        self.checkBox2.setText(_translate("MainWindow", "test2"))
        self.label.setText(_translate("MainWindow", "多界面切换测试"))
        self.menu.setTitle(_translate("MainWindow", "选择"))
        self.action_1.setText(_translate("MainWindow", "界面1"))
        self.action_2.setText(_translate("MainWindow", "界面2"))

下面是实现通过菜单栏进行切换的核心代码，此处仅作一个示例。

from PyQt5 import QtWidgets

from Switch import Ui_MainWindow

class SwichWindow(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        self.action_1.triggered.connect(self.showinterface_1)
        self.action_2.triggered.connect(self.showinterface_2)

    def showinterface_1(self):
        self.stackedWidget.setCurrentIndex(0)

    def showinterface_2(self):
        self.stackedWidget.setCurrentIndex(1)

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    window = SwichWindow()
    window.show()
    sys.exit(app.exec_())

其实，这里应该是可以直接通过槽信号连接的，但我实在是有段时间没有接触了，况且使用代码也比较容易。