QStackedWidget

類似QTabWidget，有別於QTabWidget是系統提供的，QStackedWidget則必須實作分頁的UI，以下範例用QListWidget()來達到選擇分頁的效果與畫面。

1. 建立Left side layot：使用self.leftlist = QListWidget()
2. 建立Right side layout：使用self.Stack = QStackedWidget(self)
3. Left side + Right side layout：使用hbox = QHBoxLayout(self)
4. Bind Left side to triger Right side：self.leftlist.currentRowChanged.connect(self.display)
5. 顯示對應的page(Right side)：self.Stack.setCurrentIndex(i)

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


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

        # LEFT SIDE

        self.leftlist = QListWidget()

        self.leftlist.insertItem(0, 'Contact')
        self.leftlist.insertItem(1, 'Personal')
        self.leftlist.insertItem(2, 'Educational')

        # RIGHT SIDE

        self.stack1 = QWidget()
        self.stack2 = QWidget()
        self.stack3 = QWidget()

        self.stack1UI()
        self.stack2UI()
        self.stack3UI()

        self.Stack = QStackedWidget(self)
        self.Stack.addWidget(self.stack1)
        self.Stack.addWidget(self.stack2)
        self.Stack.addWidget(self.stack3)

        # COMBINE LEFT SIDE + RIGHT SIDE

        hbox = QHBoxLayout(self)
        hbox.addWidget(self.leftlist)
        hbox.addWidget(self.Stack)

        self.setLayout(hbox)

        # 綁定 LEFT SIDE 觸發 RIGHT SIDE
        self.leftlist.currentRowChanged.connect(self.display)

        self.setGeometry(300, 50, 10, 10)
        self.setWindowTitle('StackedWidget demo')
        self.show()


    def stack1UI(self):
        layout = QFormLayout()
        layout.addRow("Name", QLineEdit())
        layout.addRow("Address", QLineEdit())
        # self.setTabText(0,"Contact Details")
        self.stack1.setLayout(layout)


    def stack2UI(self):
        layout = QFormLayout()
        sex = QHBoxLayout()
        sex.addWidget(QRadioButton("Male"))
        sex.addWidget(QRadioButton("Female"))
        layout.addRow(QLabel("Sex"), sex)
        layout.addRow("Date of Birth", QLineEdit())

        self.stack2.setLayout(layout)


    def stack3UI(self):
        layout = QHBoxLayout()
        layout.addWidget(QLabel("subjects"))
        layout.addWidget(QCheckBox("Physics"))
        layout.addWidget(QCheckBox("Maths"))
        self.stack3.setLayout(layout)


    def display(self, i):
        self.Stack.setCurrentIndex(i)


def main():
    app = QApplication(sys.argv)
    ex = stackedExample()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

Ref.

https://www.tutorialspoint.com/pyqt5/pyqt5_qstackedwidget.htm

tags: PyQt5