In PyQt5, how do I move to another label when clicking a button from a label on a QStackedWidget?

Question

In PyQt5, how do I move to another label when clicking a button from a label on a StackedWidget?

When you click pushButton_3, I want the After screen(After label) to appear.

What code should I use to display the After screen(After label)?

        self.pushButton_3.setObjectName("pushButton_3")
        self.pushButton_3.clicked.connect(self.click_next)


    def click_next(self):
        pass
        ## I want to move to After label

Full Code :

import sys
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *

class Before(QWidget): ## Before label

    def __init__(self):
        super(Before, self).__init__()
        self.label = QtWidgets.QLabel(self)
        self.label.setGeometry(QtCore.QRect(240, 210, 301, 81))
        font = QtGui.QFont()
        font.setPointSize(30)
        self.label.setFont(font)
        self.label.setText("Before 화면") # 화면 == screen
        self.label.setObjectName("label")

        self.pushButton_3 = QtWidgets.QPushButton(self)
        self.pushButton_3.setGeometry(QtCore.QRect(590, 220, 141, 61))
        font = QtGui.QFont()
        font.setPointSize(20)
        self.pushButton_3.setText("NEXT")
        self.pushButton_3.setFont(font)
        self.pushButton_3.setObjectName("pushButton_3")
        self.pushButton_3.clicked.connect(self.click_next)


    def click_next(self):
        pass
        ## I want to move to After label



class After(QWidget): ## After label

    def __init__(self):
        super(After, self).__init__()
        self.label_2 = QtWidgets.QLabel(self)
        self.label_2.setGeometry(QtCore.QRect(240, 210, 301, 81))
        font = QtGui.QFont()
        font.setPointSize(30)
        self.label_2.setFont(font)
        self.label_2.setText("After 화면") # 화면 == screen
        self.label_2.setObjectName("label_2")

        self.pushButton_4 = QtWidgets.QPushButton(self)
        self.pushButton_4.setGeometry(QtCore.QRect(30, 220, 141, 61))
        font = QtGui.QFont()
        font.setPointSize(20)
        self.pushButton_4.setText("BEFORE")
        self.pushButton_4.setFont(font)
        self.pushButton_4.setObjectName("pushButton_4")
        self.pushButton_4.clicked.connect(self.click_before)

    def click_before(self):
        pass
        ## I want to move to Before label


class Ui_StackedWidget(QWidget):
    def __init__(self):
        QWidget.__init__(self, flags=Qt.Widget)
        self.stk_w = QStackedWidget(self)
        self.setupUi()


   def setupUi(self):
        self.setWindowTitle("Example3-02")
        self.resize(800, 600)

        widget_laytout = QBoxLayout(QBoxLayout.LeftToRight)
        self.stk_w.addWidget(Before())
        self.stk_w.addWidget(After())
        widget_laytout.addWidget(self.stk_w)
        self.setLayout(widget_laytout)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = Ui_StackedWidget()
    form.show()
    exit(app.exec_())

This is the Before screen.

This is the After screen.

Answer 1

You can connect those buttons from the main window to a function that switches the pages of the stacked widget. In order to do so, you should keep a reference to those widgets, instead of creating them within addWidget().

class Ui_StackedWidget(QWidget):
    def __init__(self):
        QWidget.__init__(self, flags=Qt.Widget)
        self.stk_w = QStackedWidget(self)
        self.setupUi()

   def setupUi(self):
        self.setWindowTitle("Example3-02")
        self.resize(800, 600)

        widget_laytout = QBoxLayout(QBoxLayout.LeftToRight)
        self.before = Before()
        self.stk_w.addWidget(self.before)
        self.after = After()
        self.stk_w.addWidget(self.after)
        widget_laytout.addWidget(self.stk_w)
        self.setLayout(widget_laytout)

        self.before.pushButton_3.clicked.connect(self.goToAfter)
        self.after.pushButton_4.clicked.connect(self.goToBefore)

    def goToAfter(self):
        self.stk_w.setCurrentWidget(self.after)

    def goToBefore(self):
        self.stk_w.setCurrentWidget(self.before)

_{Note: there's no need to add the flags argument to the __init__, all QWidgets already have that flag set. Also, if you're not dealing with right-to-left languages, you can just use create a QHBoxLayout() instead of a QBoxLayout(QBoxLayout.LeftToRight): while the result is the same, it's more readable and the preferred convention.}

Answer 2

Some alternative way to other answer if you're planning to use more than 2 widgets:

from PySide2.QtWidgets import QWidget, QApplication, QPushButton, QVBoxLayout, QLabel, QStackedWidget
import sys

# Using PySide2 as an alternative to PyQt5 - Only difference would be import route.


class Base(QWidget):

    def __init__(self, label):
        super().__init__()

        self.label = QLabel(label)
        self.previous_button = QPushButton("Next")

        self.layout = QVBoxLayout()
        self.layout.addWidget(self.label)
        self.layout.addWidget(self.previous_button)

        self.setLayout(self.layout)


class MainWindow(QWidget):
    def __init__(self):
        super(MainWindow, self).__init__()

        self.widgets = [Base(f"{i}번 화면") for i in range(3)]

        self.stack = QStackedWidget()
        for widget in self.widgets:
            widget.previous_button.released.connect(self.onSignal)
            self.stack.addWidget(widget)

        self.layout = QVBoxLayout()
        self.layout.addWidget(self.stack)

        self.setLayout(self.layout)

    def onSignal(self):
        current_idx = self.stack.currentIndex()
        idx_next = 0 if current_idx == self.stack.count() - 1 else current_idx + 1
        self.stack.setCurrentIndex(idx_next)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())

You can cycle thru multiple instances in this case, or add reverse button to cycle both way.