Switching Screens: Utilizing the Stacked Widget

  • Screen Transition: Learn how to switch between multiple screens using the Stacked Widget.

  • In PyQt, the QStackedWidget allows for the display of one screen (or page) at a time out of multiple available screens.

  • In this example, three pages are added to the QStackedWidget. Each page contains a button, enabling a switch to a different page.

Listing 8 scripts/PYQT2/03_toggle_screens/main.py
 1# -*- coding: utf-8 -*-
 2
 3import sys
 4from PyQt5.QtWidgets import QApplication, QMainWindow, QPushButton, QVBoxLayout, QWidget, QStackedWidget, QLabel
 5
 6class MainWindow(QMainWindow):
 7    def __init__(self):
 8        super(MainWindow, self).__init__()
 9
10        # Create the stacked widget
11        self.stack = QStackedWidget()
12
13        # Create some sample pages
14        self.page1 = QWidget()
15        self.page2 = QWidget()
16        self.page3 = QWidget()
17
18        # Add pages to the stacked widget
19        self.stack.addWidget(self.page1)
20        self.stack.addWidget(self.page2)
21        self.stack.addWidget(self.page3)
22
23        # Sample layout for page 1
24        layout1 = QVBoxLayout(self.page1)
25        layout1.addWidget(QLabel("여긴 1 페이지입니다."))
26        button1 = QPushButton("2 페이지로 가자")
27        layout1.addWidget(button1)
28        button1.clicked.connect(self.go_to_page2)
29
30        # Sample layout for page 2
31        layout2 = QVBoxLayout(self.page2)
32        layout2.addWidget(QLabel("여긴 2 페이지라고라"))
33        button2 = QPushButton("3 페이지로 가기")
34        layout2.addWidget(button2)
35        button2.clicked.connect(self.go_to_page3)
36
37        # Sample layout for page 3
38        layout3 = QVBoxLayout(self.page3)
39        layout3.addWidget(QLabel("여긴 3 페이지라고하지"))
40        button3 = QPushButton("1 페이지로 가볼까")
41        layout3.addWidget(button3)
42        button3.clicked.connect(self.go_to_page1)
43
44        # Set the current widget to be page 1
45        self.stack.setCurrentWidget(self.page1)
46
47        # Set the stacked widget as the central widget of the window
48        self.setCentralWidget(self.stack)
49
50    def go_to_page1(self):
51        self.stack.setCurrentWidget(self.page1)
52
53    def go_to_page2(self):
54        self.stack.setCurrentWidget(self.page2)
55
56    def go_to_page3(self):
57        self.stack.setCurrentWidget(self.page3)
58
59if __name__ == '__main__':
60    app = QApplication(sys.argv)
61    mainWin = MainWindow()
62    mainWin.show()
63    sys.exit(app.exec_())

  • By clicking the button, the clicked.connect() method is utilized to execute the connected slot function. Within that function, the setCurrentWidget() method is used to change the current screen.

  • QStackedWidget: A widget that contains multiple pages and displays only one at a time.

  • setCurrentWidget(): A method in QStackedWidget to set the currently displayed page.

Detailed Analysis

  1. Creating the stacked widget:

    self.stack = QStackedWidget()

  2. Creating and adding sample pages:

    self.page1 = QWidget()
...
self.stack.addWidget(self.page1)

  3. Setting content for each page: Each page contains a label and a button. Clicking the button will switch to a different page.

    layout1 = QVBoxLayout(self.page1)
...
button1 = QPushButton("Go to page 2")

  4. Connecting button click events: Use methods like go_to_page2 to connect each button to the logic that switches to the respective page.

    button1.clicked.connect(self.go_to_page2)

  5. Setting the initial page: This sets which page will be displayed by default when the app runs.

    self.stack.setCurrentWidget(self.page1)