PyQt5使用stackedWidget实现页面切换_stackedwidget页面切换

前言

本文为PyQt5入门教程，具体为以下四步骤

• 一、使用Qt Designer设计页面并将UI文件转为.py文件
• 二、新建一个.py文件调用UI文件
• 三、设置按钮单击事件实现切换页面

一、使用Qt Designer设计页面并将UI文件转为.py文件

首先打开Qt Designer软件并新建一个MainWindow（若没有Qt Designer软件可以跳过该段，直接复制结尾转为py文件后的ui代码）

此时可以通过左上角搜索到我们需要用到的stackedWidget

将它拖入我们界面中并可以通过鼠标手动将它大小调整

此时我们可以在里面任意添加一些控件，也可以在该控件外面添加一个label控件

此时我们可以通过点击stackedWidget右上角的小箭头进行切换

进入该界面后我们依旧在同样位置加入控件

此时我们的设计就已经完成了，保存到自己方便的位置后，开始转换为.py文件

此时在该路径处输入cmd并回车

输入pyuic5 untitled.ui -o ui.py并回车

解析：

• pyuic5：这是 PyQt5 的用户界面编译器，它接受 .ui 文件并将其转换为 Python 代码。
• untitled.ui：这是你要转换的 .ui 文件名。
• -o：这是一个选项，表示 "输出"。它告诉 pyuic5 你希望将输出保存到哪个文件中。
• ui.py：这是输出文件的名称。换句话说，这个命令将会创建一个名为 "ui.py" 的 Python 文件，其中包含了从 "untitled.ui" 转换来的代码。

此时回到文件夹就会发现python文件已经转换出来了

生成后的ui代码：

# -*- coding: utf-8 -*-
 
# Form implementation generated from reading ui file 'untitled.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.
 
 
from PyQt5 import QtCore, QtGui, QtWidgets
 
 
class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.stackedWidget = QtWidgets.QStackedWidget(self.centralwidget)
        self.stackedWidget.setGeometry(QtCore.QRect(170, 70, 421, 341))
        self.stackedWidget.setObjectName("stackedWidget")
        self.page_3 = QtWidgets.QWidget()
        self.page_3.setObjectName("page_3")
        self.label = QtWidgets.QLabel(self.page_3)
        self.label.setGeometry(QtCore.QRect(180, 60, 72, 15))
        self.label.setObjectName("label")
        self.pushButton = QtWidgets.QPushButton(self.page_3)
        self.pushButton.setGeometry(QtCore.QRect(160, 230, 93, 28))
        self.pushButton.setObjectName("pushButton")
        self.stackedWidget.addWidget(self.page_3)
        self.page_4 = QtWidgets.QWidget()
        self.page_4.setObjectName("page_4")
        self.label_3 = QtWidgets.QLabel(self.page_4)
        self.label_3.setGeometry(QtCore.QRect(180, 60, 72, 15))
        self.label_3.setObjectName("label_3")
        self.pushButton_2 = QtWidgets.QPushButton(self.page_4)
        self.pushButton_2.setGeometry(QtCore.QRect(160, 230, 93, 28))
        self.pushButton_2.setObjectName("pushButton_2")
        self.stackedWidget.addWidget(self.page_4)
        self.label_2 = QtWidgets.QLabel(self.centralwidget)
        self.label_2.setGeometry(QtCore.QRect(340, 460, 72, 15))
        self.label_2.setObjectName("label_2")
        MainWindow.setCentralWidget(self.centralwidget)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
 
        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.label.setText(_translate("MainWindow", "第一页"))
        self.pushButton.setText(_translate("MainWindow", "切换第二页"))
        self.label_3.setText(_translate("MainWindow", "第二页"))
        self.pushButton_2.setText(_translate("MainWindow", "切换第一页"))
        self.label_2.setText(_translate("MainWindow", "TextLabel"))

二、新建一个.py文件调用UI文件

我们在编程软件中打开该文件夹并新建一个.py文件

此时我们开始编写引用代码

import sys  # 导入sys模块，用于处理命令行参数和退出程序
from PyQt5.QtWidgets import QMainWindow, QApplication  # 从PyQt5.QtWidgets模块导入QMainWindow和QApplication类
from ui import Ui_MainWindow  # 从ui模块导入Ui_MainWindow类，该类定义了主窗口的用户界面
 
class MainWindow(QMainWindow, Ui_MainWindow):  # 定义一个名为MainWindow的类，继承自QMainWindow和Ui_MainWindow
    def __init__(self):  # 类的构造函数
        super().__init__()  # 调用父类的构造函数，初始化主窗口
        self.setupUi(self)  # 调用setupUi方法，将用户界面与主窗口关联起来
 
if __name__ == "__main__":  # 如果当前脚本作为主程序运行
    app = QApplication(sys.argv)  # 创建一个QApplication对象，用于管理GUI应用程序的控制流和主要设置
    main = MainWindow()  # 创建一个MainWindow对象，即主窗口实例
    main.show()  # 显示主窗口
    sys.exit(app.exec_())  # 进入事件循环，等待用户操作并处理事件，然后退出程序

上述代码解析：

首先，它导入了必要的模块和类，包括sys、QMainWindow、QApplication和自定义的Ui_MainWindow类。然后，它定义了一个名为MainWindow的类，该类继承自QMainWindow和Ui_MainWindow。在MainWindow类的构造函数中，它调用了父类的构造函数来初始化主窗口，并通过调用setupUi方法将用户界面与主窗口关联起来。

最后，在if __name__ == "__main__"语句块中，它创建了一个QApplication对象和一个MainWindow对象。通过调用show方法，它显示了主窗口。然后，它进入事件循环，等待用户操作并处理事件。当用户关闭主窗口或执行退出操作时，程序会调用sys.exit方法退出。

此时运行程序，就可以看到我们所设计的ui界面了

三、设置按钮单击事件实现切换页面

此时我们设置两个单击事件，分别对应两个界面的按钮

    def click_button1(self):
        self.stackedWidget.setCurrentIndex(1)
 
    def click_button2(self):
        self.stackedWidget.setCurrentIndex(0)

解析：拿click_button2举例——当用户点击按钮时，这个方法会被调用。它的作用是将stackedWidget的当前索引设置为0。这意味着当用户点击按钮2时，将显示第一个页面（页面是从0开始计算的，第0页就是我们所谓的第一页）

此时我们将按钮控件和该事件进行关联

        self.pushButton.clicked.connect(self.click_button1)
        self.pushButton_2.clicked.connect(self.click_button2)

解析：拿第一行举例——这行代码将pushButton的点击事件与click_button1方法连接起来。当用户点击pushButton时，会调用click_button1方法

此时我们就可以运行界面来查看我们的应用了

（点击前）

（点击后）

可以重复点击，若没有出现问题就说明没有出现问题，由于我们这是局部切换页面，所以局外的label并没有随着内部的变化而变化。

总结

完整代码如下

import sys
from PyQt5.QtWidgets import QMainWindow,QApplication
from ui import Ui_MainWindow
 
class MainWindow(QMainWindow,Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)
 
        self.pushButton.clicked.connect(self.click_button1)
        self.pushButton_2.clicked.connect(self.click_button2)
 
    def click_button1(self):
        self.stackedWidget.setCurrentIndex(1)
 
    def click_button2(self):
        self.stackedWidget.setCurrentIndex(0)
 
if __name__ == "__main__":
    app = QApplication(sys.argv)
    main = MainWindow()
    main.show()
    sys.exit(app.exec_())

以上便是本人的制作过程，如遇问题或者文章有错误可私信或者评论