pyqt5 学习笔记七（QStackedLayout）抽屉布局器

pyqt5 学习笔记七（QStackedLayout）抽屉布局器

写在前面：
①本教程使用pycharm编译器进行pyqt5的学习，安装教程请大家自行百度
②本系列博客根据B站王铭东博主教程学习 学习代码 笔记7
链接：https://pan.baidu.com/s/1i3y4mI_9N84iAC6tav-j8Q
提取码：gupx
资料：
【1】B站教程
【2】B站教程配套课件
【3】PyQt官网的所有模块 （有部分内容没有补充进去）
【4】C++具体实现的API文档

（一）布局器

共有四种：
QBoxLayout：垂直水平布局器
QGridLayout：网格布局器
QFormLayout：表单布局器
QStackedLayout：抽屉布局器

（二）QStackedLayout 抽屉布局器

1、整体结构

2、构造两个要显示的内容

self.setStyleSheet(“background-color:green;”)：设置样式，背景颜色

# 按第一个按钮要显示的内容
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;")
1
2
3
4
5
6
7
8
9
10
11
12

3、构造抽屉布局器

(1)QStackedLayout() 构造抽屉布局器
(2) 将两个要显示的内容放入抽屉布局器中
抽屉布局器用的self.stacked_layout 让抽屉布局器设为全局变量，不加self就是局部的了，只有函数内部用

    # 构造抽屉布局器
    def create_stacked_layout(self):
        # 创建堆叠(抽屉)布局
        # 使用self使之成为全局变量 self.stacked_layout init_ui可以调用
        self.stacked_layout = QStackedLayout()
        # 创建单独的Widget
        win1 = Window1()
        win2 = Window2()
        # 将创建的2个Widget添加到抽屉布局器中
        # 相当于一个元组，把窗口1、2要放入的内容事先放入抽屉布局器中
        self.stacked_layout.addWidget(win1)
        self.stacked_layout.addWidget(win2)
1
2
3
4
5
6
7
8
9
10
11
12

4、设置界面

(1)QVBoxLayout() 构造界面整体的布局器
(2) widget = QWidget() 设置一个窗口
widget.setLayout(self.stacked_layout) 对窗口使用已经创建好的抽屉布局
(3) btn_press1.clicked.connect(self.btn_press1_clicked) 新建两个按钮 并对两个按钮和事件进行绑定
信号：clicked 槽：btn_press1_clicked函数
对象.信号.connect(槽函数)
这里的self.btn_press1_clicked没有(),即当点击按钮的时候才执行这个函数

# 设置整体窗口界面
    def init_ui(self):
        # 设置Widget大小以及固定宽高
        self.setFixedSize(300, 270)

        # 1. 创建整体的布局器
        container = QVBoxLayout()

        # 2. 创建1个要显示具体内容的子Widget widget也可以当作“控件”addWidget
        widget = QWidget()
        widget.setLayout(self.stacked_layout)
        widget.setStyleSheet("background-color:grey;")

        # 3. 创建2个按钮，用来点击进行切换抽屉布局器中的Widget
        btn_press1 = QPushButton("抽屉1")
        btn_press2 = QPushButton("抽屉2")

        # 给按钮添加事件（即点击后要调用的函数）
        btn_press1.clicked.connect(self.btn_press1_clicked)
        btn_press2.clicked.connect(self.btn_press2_clicked)

        # 4. 将需要显示的空间添加到布局器中
        # ??为什么grid布局器就可以直接layout.addLayout(grid)
        # container.addLayout(self.stacked_layout)
        container.addWidget(widget)
        container.addWidget(btn_press1)
        container.addWidget(btn_press2)

        # 5. 设置当前要显示的Widget，从而能够显示这个布局器中的控件
        self.setLayout(container)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

4、按钮事件

self.stacked_layout.setCurrentIndex(0)：使用当前索引的内容进行布局
将两个构造好的内容，放入抽屉布局器中，相当于在元组中加入两个数据，第一个索引为0，第二个为1

# 第一个按钮的事件
    def btn_press1_clicked(self):
        # 设置抽屉布局器的当前索引值，即可切换显示哪个Widget
        self.stacked_layout.setCurrentIndex(0)
    # 第二个按钮的事件
    def btn_press2_clicked(self):
        # 设置抽屉布局器的当前索引值，即可切换显示哪个Widget
        self.stacked_layout.setCurrentIndex(1)
1
2
3
4
5
6
7
8

5、整体代码

# 含有解析的抽屉布局器
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton, QStackedLayout, QLabel
# 按第一个按钮要显示的内容
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 MyWindow(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.create_stacked_layout()
        self.init_ui()
    # 构造抽屉布局器
    def create_stacked_layout(self):
        # 创建堆叠(抽屉)布局
        # 使用self使之成为全局变量 self.stacked_layout init_ui可以调用
        self.stacked_layout = QStackedLayout()
        # 创建单独的Widget
        win1 = Window1()
        win2 = Window2()
        # 将创建的2个Widget添加到抽屉布局器中
        # 相当于一个元组，把窗口1、2要放入的内容事先放入抽屉布局器中
        self.stacked_layout.addWidget(win1)
        self.stacked_layout.addWidget(win2)
    # 设置整体窗口界面
    def init_ui(self):
        # 设置Widget大小以及固定宽高
        self.setFixedSize(300, 270)

        # 1. 创建整体的布局器
        container = QVBoxLayout()

        # 2. 创建1个要显示具体内容的子Widget widget也可以当作“控件”addWidget
        widget = QWidget()
        widget.setLayout(self.stacked_layout)
        widget.setStyleSheet("background-color:grey;")

        # 3. 创建2个按钮，用来点击进行切换抽屉布局器中的Widget
        btn_press1 = QPushButton("抽屉1")
        btn_press2 = QPushButton("抽屉2")

        # 给按钮添加事件（即点击后要调用的函数）
        btn_press1.clicked.connect(self.btn_press1_clicked)
        btn_press2.clicked.connect(self.btn_press2_clicked)

        # 4. 将需要显示的空间添加到布局器中
        # ??为什么grid布局器就可以直接layout.addLayout(grid)
        # container.addLayout(self.stacked_layout)
        container.addWidget(widget)
        container.addWidget(btn_press1)
        container.addWidget(btn_press2)

        # 5. 设置当前要显示的Widget，从而能够显示这个布局器中的控件
        self.setLayout(container)
    # 第一个按钮的事件
    def btn_press1_clicked(self):
        # 设置抽屉布局器的当前索引值，即可切换显示哪个Widget
        self.stacked_layout.setCurrentIndex(0)
    # 第二个按钮的事件
    def btn_press2_clicked(self):
        # 设置抽屉布局器的当前索引值，即可切换显示哪个Widget
        self.stacked_layout.setCurrentIndex(1)
if __name__ == "__main__":
    app = QApplication(sys.argv)
    win = MyWindow()
    win.show()
    app.exec()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76