PyQt - QStackedLayout

In PyQt, QStackedLayout class can be used to build similar user interface w.r.t QTabWidget. It also has convenience class i.e. QStackedWidget class built on top of QStackedLayout. The QTabWidget class provides a stack of tabbed widgets.

Uses of QStackedLayout

Creating Pages − The QStackedLayout has multiple child widgets where every page acts in a different manner.

# Building of Pages
firstPageWidget = QWidget()
secondPageWidget = QWidget()
thirdPageWidget = QWidget()
''' The method QStackedLayout() create a stack of widgets where only single 
widgets is visible at a time.'''
stackedLayout = QStackedLayout()
# Using addWidgets(), we can add the widgets to the end of the list.
stackedLayout.addWidget(firstPageWidget)
stackedLayout.addWidget(secondPageWidget)
stackedLayout.addWidget(thirdPageWidget)

Note that, QStackedLayout class offers a stack of widgets where only one widget is visible at a time.

Switching Pages − QStackedLayout doesnt have direct way for users to switch between the pages. The connection of widget can be achieve through the titles of the pages i.e. setCurrentIndex() method.

Retrieving Pages − We have two ways to retrieve the pages in QStackedLayout class −

• currentIndex() − The index of the widgets shown in the screen.
• currentWidget() − The actual widget is visible using this method.

Page Switching using QStackedLayout

In QStackedLayout, page switching refers to changes of pages from one to another. Here, we will see the changes in the tab/page when click on the widget.

Example 1

Following example demonstrates the code for page switching using various layout functions of PyQt.

import sys
from PyQt6.QtWidgets import QApplication, QMainWindow, QWidget, QVBoxLayout, 
QPushButton, QStackedLayout

class MyWindow(QMainWindow):
   def __init__(self):
      super().__init__()

      # Create the main window
      self.setWindowTitle("Page Switcher")
      self.setGeometry(200, 200, 600, 500)

      # Create the stacked layout
      self.stackedLayout = QStackedLayout()

      # Create Page 1
      self.page1Widget = QWidget()
      page1Layout = QVBoxLayout()
      page1Button = QPushButton("Go to Page 2")
      page1Button.clicked.connect(self.switch_to_page2)
      page1Layout.addWidget(page1Button)
      self.page1Widget.setLayout(page1Layout)

      # Create Page 2
      self.page2Widget = QWidget()
      page2Layout = QVBoxLayout()
      page2Button = QPushButton("Go to Page 1")
      page2Button.clicked.connect(self.switch_to_page1)
      page2Layout.addWidget(page2Button)
      self.page2Widget.setLayout(page2Layout)

      # Add pages to the stacked layout
      self.stackedLayout.addWidget(self.page1Widget)
      self.stackedLayout.addWidget(self.page2Widget)

      # Set the initial page
      self.stackedLayout.setCurrentIndex(0)

      # Set the central widget
      centralWidget = QWidget()
      centralWidget.setLayout(self.stackedLayout)
      self.setCentralWidget(centralWidget)

   def switch_to_page1(self):
      self.stackedLayout.setCurrentIndex(0)

   def switch_to_page2(self):
      self.stackedLayout.setCurrentIndex(1)

if __name__ == "__main__":
   app = QApplication(sys.argv)
   window = MyWindow()
   window.show()
   sys.exit(app.exec())

Output

The above code produces the following output −

Example 2

In the following example, we create the two buttons- previous and next using QPushButton(). Then we connect the button ranges using var_name.clicked.connect(). This function allows the user to click on a button between the ranges. To set the layout, QVBoxLayout() has used and display the result using main window.

from PyQt6.QtWidgets import QApplication, QWidget, QPushButton, QLabel, QVBoxLayout, 
QStackedLayout
app = QApplication([])

# Create main window
main_window = QWidget()
main_window.setWindowTitle("QStackedLayout")

# Create widgets
widget1 = QLabel("Widget 1")
widget2 = QLabel("Widget 2")
widget3 = QLabel("Widget 3")

# Create stacked layout and add widgets to it
stacked_layout = QStackedLayout()
stacked_layout.addWidget(widget1)
stacked_layout.addWidget(widget2)
stacked_layout.addWidget(widget3)

# Create navigation buttons
next_button = QPushButton("Next")
prev_button = QPushButton("Previous")

# Connect buttons to switch between widgets
next_button.clicked.connect(lambda: stacked_layout.setCurrentIndex(stacked_layout.currentIndex() + 1))
prev_button.clicked.connect(lambda: stacked_layout.setCurrentIndex(stacked_layout.currentIndex() - 1))

# Create a vertical layout for the main window
main_layout = QVBoxLayout(main_window)
main_layout.addLayout(stacked_layout)
main_layout.addWidget(prev_button)
main_layout.addWidget(next_button)

# Set the main layout for the main window
main_window.setLayout(main_layout)
main_window.show()
app.exec()

Output

On executing the code, we get two buttons which range from 1-3.