Methods to implement multi-page layout using QTabWidget in PyQt

In the process of writing desktop applications using PyQt, to implement a multi-page layout scheme, you can use the QTabWidget control to implement it.

Feature Overview

This case provides complete tab management capabilities while maintaining the core principles of responsive design, which can well adapt to different screen sizes and content changes.

Tag management: Support dynamic addition/closing tab pages

Responsive layout: Each page uses the layout manager to automatically adapt to the window size

Custom style: Customize the appearance of tags through QSS

Extensibility: More page types can be added easily

Interactive functions: Includes basic form elements and text editing functions

Infrastructure construction

from  import *
from  import *
from  import *
import sys
class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        ()
    def initUI(self):
        ('Multi-page application example')
        # Create a central component and main layout        central_widget = QWidget()
        (central_widget)
        main_layout = QVBoxLayout(central_widget)
        # Create tag control        self.tab_widget = QTabWidget()
        main_layout.addWidget(self.tab_widget)
        # Add a sample tag page        self.add_tab("front page", self.create_home_page())
        self.add_tab("set up", self.create_settings_page())
        self.add_tab("about", self.create_about_page())
        # Set the tag location (optional: North/South/East/West)        self.tab_widget.setTabPosition()
        # Enable the tag close button (optional)        self.tab_widget.setTabsClosable(True)
        self.tab_widget.(self.close_tab)
    def add_tab(self, name, widget):
        """Add a new tab"""
        self.tab_widget.addTab(widget, name)
    def close_tab(self, index):
        """Close Tab"""
        widget = self.tab_widget.widget(index)
        if widget:
            ()
        self.tab_widget.removeTab(index)

Create page content

def create_home_page(self):
    """Create homepage content"""
    page = QWidget()
    layout = QVBoxLayout(page)
    # Add responsive content    title = QLabel("Welcome")
    ()
    ("font-size: 24px; font-weight: bold;")
    content = QTextEdit()
    ("Enter your content...")
    (, )
    btn_container = QHBoxLayout()
    btn_add = QPushButton("Add to")
    btn_add.setSizePolicy(, )
    btn_container.addWidget(btn_add)
    (title)
    (content)
    (btn_container)
    return page
def create_settings_page(self):
    """Create Settings Page"""
    page = QWidget()
    layout = QFormLayout(page)
    # Add form element    (QLabel("Theme color:"), QComboBox())
    (QLabel("Font Size:"), QSpinBox())
    (QLabel("AutoSave:"), QCheckBox())
    return page
def create_about_page(self):
    """Create About Page"""
    page = QWidget()
    layout = QVBoxLayout(page)
    logo = QLabel("Apply Icon")
    ()
    (100, 100)
    ("border: 1px solid #ccc;")
    info = QLabel("Version 1.0.0\nCopyright © 2023")
    ()
    (logo)
    (info)
    ()
    return page

Advanced features

Dynamically add tabs

def add_new_tab(self):
    """Dynamic Create New Tags"""
    count = self.tab_widget.count()
    new_page = QWidget()
    new_layout = QVBoxLayout(new_page)
    new_layout.addWidget(QLabel(f"This is the first {count+1} Tags"))
    self.add_tab(f"page {count+1}", new_page)
    self.tab_widget.setCurrentIndex(count)

Customized label style

# Set the label shape (optional: circle/triangle)self.tab_widget.setTabShape()
# Custom tag style (via QSS)self.tab_widget.setStyleSheet("""
    QTabBar::tab {
        background: #f0f0f0;
        border: 1px solid #ccc;
        padding: 8px 16px;
    }
    QTabBar::tab:selected {
        background: #fff;
        border-bottom: 2px solid #2196F3;
    }
""")

Responsive layout skills

Nested layout

Use in combination in complex pagesQVBoxLayout/QHBoxLayout/QGridLayout

Scaling control

(0, 1)  # First component extension(1, 2)  # The second component doubles expansion

Parts Policy

(, )

Dynamic adjustment

def resizeEvent(self, event):
    self.tab_widget.adjustSize()
    super().resizeEvent(event)

Complete sample code

import sys
from  import *
from  import *
class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        ()
    def initUI(self):
        ('Multi-page application')
        (300, 300, 800, 600)
        central_widget = QWidget()
        (central_widget)
        main_layout = QVBoxLayout(central_widget)
        # Create tag control        self.tab_widget = QTabWidget()
        main_layout.addWidget(self.tab_widget)
        # Add sample tag        self.add_tab("front page", self.create_home_page())
        self.add_tab("set up", self.create_settings_page())
        # Add control button        btn_add = QPushButton("New Tag")
        btn_add.(self.add_new_tab)
        main_layout.addWidget(btn_add)
    def add_tab(self, name, widget):
        self.tab_widget.addTab(widget, name)
        self.tab_widget.setTabToolTip(self.tab_widget.count()-1, name)
    def add_new_tab(self):
        new_page = QWidget()
        layout = QVBoxLayout(new_page)
        text_edit = QTextEdit()
        (text_edit)
        self.add_tab(f"New tags {self.tab_widget.count()+1}", new_page)
        self.tab_widget.setCurrentIndex(self.tab_widget.count()-1)
    def create_home_page(self):
        page = QWidget()
        layout = QVBoxLayout(page)
        title = QLabel("Homepage Content")
        ()
        ("font-size: 24px;")
        content = QTextEdit()
        (, )
        (title)
        (content)
        return page
    def create_settings_page(self):
        page = QWidget()
        layout = QFormLayout(page)
        (QLabel("Option 1:"), QLineEdit())
        (QLabel("Option 2:"), QComboBox())
        (QLabel("Option 3:"), QCheckBox("Enable"))
        return page
if __name__ == '__main__':
    app = QApplication()
    window = MainWindow()
    ()
    (app.exec_())

This is the article about the implementation method of using QTabWidget to implement multi-page layout in PyQt. For more related content on PyQt QTabWidget multi-page layout, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!