PyQT5 如何实现控件堆叠排列的布局效果

你要的堆叠排布效果完全可以实现，根据实际交互需求可以选择两种实现方案：

方案1：同一时间仅展示单个堆叠项（点击切换显示） #

使用Qt原生QStackedWidget控件即可实现，所有子控件会被放入同一个堆叠容器，默认仅展示当前激活的项，你可以自行绑定交互事件来切换展示项，示例代码如下：

import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QStackedWidget,
                             QPushButton, QVBoxLayout, QLabel)

class StackedDemo(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        self.setWindowTitle("堆叠控件演示")
        self.resize(400, 300)

        # 初始化堆叠容器
        self.stacked_container = QStackedWidget()

        # 新增3个测试堆叠页
        page1 = QLabel("第一页内容")
        page1.setStyleSheet("background-color: #ffcccc; padding: 20px;")
        page2 = QLabel("第二页内容")
        page2.setStyleSheet("background-color: #ccffcc; padding: 20px;")
        page3 = QLabel("第三页内容")
        page3.setStyleSheet("background-color: #ccccff; padding: 20px;")

        self.stacked_container.addWidget(page1)
        self.stacked_container.addWidget(page2)
        self.stacked_container.addWidget(page3)

        # 切换按钮
        switch_btn = QPushButton("切换下一项")
        switch_btn.clicked.connect(self.switch_page)

        # 全局布局
        layout = QVBoxLayout()
        layout.addWidget(self.stacked_container)
        layout.addWidget(switch_btn)
        self.setLayout(layout)

    def switch_page(self):
        current_index = self.stacked_container.currentIndex()
        next_index = (current_index + 1) % self.stacked_container.count()
        self.stacked_container.setCurrentIndex(next_index)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    demo = StackedDemo()
    demo.show()
    sys.exit(app.exec_())

方案2：多个控件错落堆叠、同时露出部分区域可交互 #

如果需要所有堆叠项都外露一部分、点击可置顶展示，使用栅格布局+层级控制即可实现：

• 将所有需要堆叠的控件放到QGridLayout的同一个单元格中
• 给每个控件设置不同的偏移量，实现错落排列的视觉效果
• 绑定控件点击事件，调用raise_()方法将点击的控件置顶到最上层
  核心实现代码如下：

import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QGridLayout, QLabel)

class OverlapStackDemo(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        self.setWindowTitle("错落堆叠演示")
        self.resize(400, 300)
        grid_layout = QGridLayout()

        # 创建3个堆叠控件
        widget1 = QLabel("堆叠项1")
        widget1.setStyleSheet("background-color: #ffcccc; border: 1px solid #000;")
        widget1.setFixedSize(200, 200)

        widget2 = QLabel("堆叠项2")
        widget2.setStyleSheet("background-color: #ccffcc; border: 1px solid #000;")
        widget2.setFixedSize(200, 200)

        widget3 = QLabel("堆叠项3")
        widget3.setStyleSheet("background-color: #ccccff; border: 1px solid #000;")
        widget3.setFixedSize(200, 200)

        # 全部放入同一个栅格单元格，手动偏移位置
        grid_layout.addWidget(widget1, 0, 0)
        widget1.move(0, 0)
        grid_layout.addWidget(widget2, 0, 0)
        widget2.move(30, 30)
        grid_layout.addWidget(widget3, 0, 0)
        widget3.move(60, 60)

        # 绑定点击置顶事件
        def raise_widget(widget):
            widget.raise_()
        widget1.mousePressEvent = lambda e: raise_widget(widget1)
        widget2.mousePressEvent = lambda e: raise_widget(widget2)
        widget3.mousePressEvent = lambda e: raise_widget(widget3)

        self.setLayout(grid_layout)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    demo = OverlapStackDemo()
    demo.show()
    sys.exit(app.exec_())

内容的提问来源于stack exchange，提问作者Petr Voborník