PyQt5使用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_())  # 进入事件循环,等待用户操作并处理事件,然后退出程序

上述代码解析:

首先,它导入了必要的模块和类,包括sysQMainWindowQApplication和自定义的Ui_MainWindow类。然后,它定义了一个名为MainWindow的类,该类继承自QMainWindowUi_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_())

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

  • 9
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
这个错误通常发生在使用 PyQt 中的 QStackedWidget 控件时,可能是因为你错误地将布尔值分配给了 stackedWidget 属性。 请确保你正确地创建了 QStackedWidget 对象,并在代码中正确地使用它。以下是一个示例代码,展示了如何使用 QStackedWidget 控件: ```python import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QVBoxLayout, QPushButton, QStackedWidget class MainWindow(QMainWindow): def __init__(self): super().__init__() self.stacked_widget = QStackedWidget() self.setCentralWidget(self.stacked_widget) self.button1 = QPushButton("页面1") self.button1.clicked.connect(self.show_page1) self.button2 = QPushButton("页面2") self.button2.clicked.connect(self.show_page2) layout = QVBoxLayout() layout.addWidget(self.button1) layout.addWidget(self.button2) widget = QWidget() widget.setLayout(layout) self.stacked_widget.addWidget(widget) def show_page1(self): self.stacked_widget.setCurrentIndex(0) def show_page2(self): self.stacked_widget.setCurrentIndex(1) app = QApplication(sys.argv) window = MainWindow() window.show() sys.exit(app.exec_()) ``` 在上述示例中,我们创建了一个继承自 QMainWindow 的 MainWindow 类。在构造函数中,我们创建了一个 QStackedWidget 对象,并将其设置为主窗口的中央部件。然后,我们创建了两个按钮,并将它们的点击事件连接到对应的槽函数。在槽函数中,我们使用 setCurrentIndex 方法来切换显示的页面。 请检查你的代码,确保正确地创建了 QStackedWidget 对象,并且没有将布尔值分配给 stackedWidget 属性。如果问题仍然存在,请提供更多的代码细节,以便我能够更好地帮助你解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值