qtdesigner使用树形控件实现堆叠布局

---

前言

最近在网上学习了堆叠布局，但别人是通过点击按钮更换界面，于是我尝试一下使用树形控件来实现，发现也是可以的，再此记录下来，方便以后参考。

---

一、创建页面

先创建三个页面，一个主页面，两个分页面，点击主页面里面的树形控件节点的时候页面切换

1.1、主页面创建

主页面使用左右布局，左边是树形控件，右边是Frame控件
main.ui

1.2、分页面创建

分页面使用上下布局，两个控件都是QLabel
page_one.ui

page_two.ui

页面设置好了之后，输入下面命令分别将ui文件转换为py文件

pyuic5 -o main_ui.py main.ui
pyuic5 -o pageone_ui.py page_one.ui
pyuic5 -o pagetwo_ui.py page_two.ui

二、代码编写

代码目录结构

完整代码在最后，先讲一下代码编写思路：
首先，编写两个类分别调用页面一、二的ui代码，方便到时候实例化

class PageOne(QtWidgets.QWidget, Ui_PageOne):
    # 初始化页面一代码
    def __init__(self):
        super().__init__()
        self.setupUi(self)


class PageTwo(QtWidgets.QWidget, Ui_PageTwo):
    # 初始化页面二代码
    def __init__(self):
        super().__init__()
        self.setupUi(self)

然后，编写主类去调用主页ui代码，并且实例化页面一、二

class MainWin(QtWidgets.QMainWindow, Ui_MainWindow):
    # 初始化主页代码，且实例化页面一、页面二
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        self.page_one = PageOne()
        self.page_two = PageTwo()

因为页面会在主页的frame控件里面切换，所有在frame里面设置堆叠布局，并且把页面一、二添加到布局中

    def __init__(self):
		......

        # 设置堆叠布局到frame
        self.stackedLayout = QtWidgets.QStackedLayout(self.frame)
        # 将页面添加到布局中
        self.stackedLayout.addWidget(self.page_one)
        self.stackedLayout.addWidget(self.page_two)

因为程序执行之后就要开始监听点击事件，所以监听函数也要在主页类初始化的时候执行，写在初始化函数里面

    # 初始化主页代码，且实例化页面一、页面二
    def __init__(self):
    	......

        # 执行监听函数
        self.listener()
	
	# 所有的监听函数都写这里在里面
    def listener(self):
        self.treeWidget.clicked.connect(self.change_page)

编写树形控件点击之后的动作函数

    def change_page(self):
        # 获取当前选中的树节点
        item = self.treeWidget.currentItem()
        if item.text(0) == '页面一':
            self.stackedLayout.setCurrentIndex(0)
        elif item.text(0) == '页面二':
            self.stackedLayout.setCurrentIndex(1)
        else:
            print(item.text(0))

最后，让主界面展示

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    main_win = MainWin()
    main_win.show()
    sys.exit(app.exec_())

完整代码如下：
main.py

import sys
from PyQt5 import QtCore, QtGui, QtWidgets

from main_ui import Ui_MainWindow
from pageone_ui import Ui_PageOne
from pagetwo_ui import Ui_PageTwo


class PageOne(QtWidgets.QWidget, Ui_PageOne):
    # 初始化页面一代码
    def __init__(self):
        super().__init__()
        self.setupUi(self)


class PageTwo(QtWidgets.QWidget, Ui_PageTwo):
    # 初始化页面二代码
    def __init__(self):
        super().__init__()
        self.setupUi(self)


class MainWin(QtWidgets.QMainWindow, Ui_MainWindow):
    # 初始化主页代码，且实例化页面一、页面二
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        self.page_one = PageOne()
        self.page_two = PageTwo()

        # 设置堆叠布局到frame
        self.stackedLayout = QtWidgets.QStackedLayout(self.frame)
        # 将页面添加到布局中
        self.stackedLayout.addWidget(self.page_one)
        self.stackedLayout.addWidget(self.page_two)

        # 执行监听函数
        self.listener()

    def listener(self):
        self.treeWidget.clicked.connect(self.change_page)

    def change_page(self):
        # 获取当前选中的树节点
        item = self.treeWidget.currentItem()
        if item.text(0) == '页面一':
            self.stackedLayout.setCurrentIndex(0)
        elif item.text(0) == '页面二':
            self.stackedLayout.setCurrentIndex(1)
        else:
            print(item.text(0))


if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    main_win = MainWin()
    main_win.show()
    sys.exit(app.exec_())

运行结果

大功告成，有什么问题欢迎在评论区留言。

2023/05/23更新

鉴于部分人出现页面切换不了的问题，这里我附上自己的代码(本地测试没问题，页面三没有做页面切换)，以供参考：
链接：https://pan.baidu.com/s/16-fhRCx9OVjplQaYcbrE-g?pwd=oxuh
提取码：oxuh