[pyqt5 interface development-6] Development of drawer layout interface

Table of contents

0x01 Preface:

1. Encapsulated main window class

Step 1: Encapsulate the window class

Step 2: Add a drawer interface

Step 3: Add the relevant layout of the drawer interface

Step 4: Click trigger for each drawer interface

Second, the packaged drawer class

3. Program entry program

4. Complete code


0x01 Preface:

Drawer layout (only one interface is displayed at a time)

Requires module: QStackedLayout

The complete code consists of three parts: encapsulated main window class + encapsulated drawer class + program entry program

Ideas:

1. Package window class

2. First, there is a drawer interface

3. Then there are multiple drawers (interface) in the drawer interface

4. Encapsulate multiple separate drawer classes

1. Encapsulated main window class

Step 1: Encapsulate the window class

class MainWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.create_stack_layout()
        self.init_ui()


Step 2: Add a drawer interface

class MainWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.create_stack_layout()
        self.init_ui()

#————————————————————————————————————————————————————————————————
# 下面为新增

    def create_stack_layout(self):
        # 创建堆叠(抽屉)布局
        self.stacked_layout = QStackedLayout()
        w1 = Window1()
        w2 = Window2()

        # 将2个添加到抽屉布局中
        self.stacked_layout.addWidget(w1)
        self.stacked_layout.addWidget(w2)

Step 3: Add the relevant layout of the drawer interface

class MainWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.create_stack_layout()
        self.init_ui()

    def create_stack_layout(self):
        # 创建堆叠(抽屉)布局
        self.stacked_layout = QStackedLayout()
        w1 = Window1()
        w2 = Window2()

        # 将2个添加到抽屉布局中
        self.stacked_layout.addWidget(w1)
        self.stacked_layout.addWidget(w2)
#————————————————————————————————————————————————————————————————
# 下面为新增

    def init_ui(self):
        self.setWindowTitle('form')
        self.setFixedSize(500,400)
        # 先定义最外层的垂直布局(水平布局是QHBoxLayout)
        container = QVBoxLayout()       # 最外层布局器(命名为容器)
        self.setLayout(container)       # 设置显示最外层布局器 (布局器的应用)


        # 创建要显示的子widget
        widget = QWidget()
        widget.setLayout(self.stacked_layout)
        widget.setStyleSheet("background-color:grey;")


        # 创建2个按钮,用来点击进行切换抽屉布局中的weight
        btn_press1 = QPushButton("界面1")
        btn_press2 = QPushButton("界面2")
        # 给按钮添加事件 (点击后调用的函数)
        btn_press1.clicked.connect(self.btn_pres1_clicked)
        btn_press2.clicked.connect(self.btn_pres2_clicked)


        # 将需要显示的控件添加到布局中
        container.addWidget(widget)
        container.addWidget(btn_press1)
        container.addWidget(btn_press2)


Step 4: Click trigger for each drawer interface

First set the index value of the layout

class MainWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.create_stack_layout()
        self.init_ui()

    def create_stack_layout(self):
        self.stacked_layout = QStackedLayout()
        w1 = Window1()
        w2 = Window2()
        self.stacked_layout.addWidget(w1)
        self.stacked_layout.addWidget(w2)

    def init_ui(self):
        self.setWindowTitle('form')
        self.setFixedSize(500, 400)
        container = QVBoxLayout()
        self.setLayout(container)

        widget = QWidget()
        widget.setLayout(self.stacked_layout)
        widget.setStyleSheet("background-color:grey;")

        btn_press1 = QPushButton("界面1")
        btn_press2 = QPushButton("界面2")
        btn_press1.clicked.connect(self.btn_press1_clicked)
        btn_press2.clicked.connect(self.btn_press2_clicked)

        container.addWidget(widget)
        container.addWidget(btn_press1)
        container.addWidget(btn_press2)

#————————————————————————————————————————————————————————————————
# 下面为新增

    def btn_press1(self):
        # 设置抽屉布局当前的索引值(即可切换到指定的weight)
        self.stacked_layout.setCurrentIndex(0)

    def btn_press2(self):
        # 设置抽屉布局当前的索引值(即可切换到指定的weight)
        self.stacked_layout.setCurrentIndex(1)

Second, the packaged drawer class

code:

class Window1(QWidget):
    def __init__(self):
        super().__init__()
        QLabel("抽屉1内容", self)
        self.setStyleSheet("background-color:green;")


class Window2(QWidget):
    def __init__(self):
        super().__init__()
        QLabel("抽屉2内容", self)
        self.setStyleSheet("background-color:red;")

3. Program entry program

code:

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

4. Complete code

code:

import sys
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QIcon
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QLabel, QLineEdit, QDesktopWidget, QHBoxLayout, QVBoxLayout, QGroupBox, QRadioButton, QGridLayout, QFormLayout, QStackedLayout


class Window1(QWidget):
    def __init__(self):
        super().__init__()
        QLabel("抽屉1内容", self)
        self.setStyleSheet("background-color:green;")


class Window2(QWidget):
    def __init__(self):
        super().__init__()
        QLabel("抽屉2内容", self)
        self.setStyleSheet("background-color:red;")


class MainWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.create_stack_layout()
        self.init_ui()

    def create_stack_layout(self):
        self.stacked_layout = QStackedLayout()
        w1 = Window1()
        w2 = Window2()
        self.stacked_layout.addWidget(w1)
        self.stacked_layout.addWidget(w2)

    def init_ui(self):
        self.setWindowTitle('form')
        self.setFixedSize(500, 400)
        container = QVBoxLayout()
        self.setLayout(container)

        widget = QWidget()
        widget.setLayout(self.stacked_layout)
        widget.setStyleSheet("background-color:grey;")

        btn_press1 = QPushButton("界面1")
        btn_press2 = QPushButton("界面2")
        btn_press1.clicked.connect(self.btn_press1_clicked)
        btn_press2.clicked.connect(self.btn_press2_clicked)

        container.addWidget(widget)
        container.addWidget(btn_press1)
        container.addWidget(btn_press2)

    def btn_press1_clicked(self):
        self.stacked_layout.setCurrentIndex(0)

    def btn_press2_clicked(self):
        self.stacked_layout.setCurrentIndex(1)


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

Example effect:

(interface 1)

 (interface 2)

Guess you like

Origin blog.csdn.net/qq_53079406/article/details/132500937