侧边树形导航怎么实现如图的功能

请教QT怎么实现像下面动图所示功能？
根据点击不同的节点，右侧显示不同的页面，有demo最好

实现的源码如下：
点击B树下的test1，切换到test1，点击test2,切换到test2的widget

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QTreeWidget>
#include <QTreeWidgetItem>
#include "test1.h"
#include "test2.h"

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void doubleClickedSlot(QTreeWidgetItem* item,int iValue);

private:
    Ui::MainWindow *ui;
    test1 m_test1;
    test2 m_test2;
};
#endif // MAINWINDOW_H

cpp文件
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->treeWidget->clear();
    ui->treeWidget->setFrameStyle(QFrame::NoFrame);
    ui->treeWidget->setHeaderLabel("tree widget");
    ui->treeWidget->setHeaderHidden(true);
    ui->treeWidget->setColumnCount(1);
    ui->treeWidget->setHeaderLabels(QStringList()<<QString(u8"部门"));
    QTreeWidgetItem *item = new QTreeWidgetItem(QStringList()<<"A");
    QTreeWidgetItem *item1 = new QTreeWidgetItem(QStringList()<<"B");
    QTreeWidgetItem *item2 = new QTreeWidgetItem(QStringList()<<"C");
    QTreeWidgetItem *item3 = new QTreeWidgetItem(QStringList()<<"D");
    // 加载顶层节点
    ui->treeWidget->addTopLevelItem(item);
    ui->treeWidget->addTopLevelItem(item1);
    ui->treeWidget->addTopLevelItem(item2);
    // 追加子节点
    QStringList heroll;
    heroll << QString(u8"前端");
    QTreeWidgetItem *xy = new QTreeWidgetItem(heroll);
    item->addChild(xy);

    QStringList herolx;
    herolx<<"VUE";
    QTreeWidgetItem * xyx=new QTreeWidgetItem(herolx);
    xy->addChild(xyx);

    QStringList herol2;
    herol2<<"xxx";
    QTreeWidgetItem * xy1=new QTreeWidgetItem(herol2);
    item->addChild(xy1);

    QStringList herol3;
    herol3<<"test1 ";
    QTreeWidgetItem * xy2=new QTreeWidgetItem(herol3);
    item1->addChild(xy2);

    QStringList herol4;
    herol4<<"test2 ";
    QTreeWidgetItem * xy3=new QTreeWidgetItem(herol4);
    item1->addChild(xy3);

    QStringList herol5;
    herol5<<"myhello1 ";
    QTreeWidgetItem * xy4=new QTreeWidgetItem(herol5);
    item2->addChild(xy4);

    QStringList herol6;
    herol6<<"myhello2";
    QTreeWidgetItem * xy5=new QTreeWidgetItem(herol6);
    item2->addChild(xy5);

    QTreeWidgetItem *topItem2 = new QTreeWidgetItem(ui->treeWidget);
    topItem2->setText(0,"KK");
    topItem2->setCheckState(0,Qt::Checked);  //添加选中标志 unchecked (未选中标志)
    ui->treeWidget->addTopLevelItem(topItem2);

    connect(ui->treeWidget,SIGNAL(itemDoubleClicked(QTreeWidgetItem*,int)),this,SLOT(doubleClickedSlot(QTreeWidgetItem*, int)));
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::doubleClickedSlot(QTreeWidgetItem* item,int iValue)
{
    qDebug() << "doubleclickedSlot" << iValue << item->text(iValue) << item->parent()->text(iValue);
    if (item->parent()->text(iValue).trimmed().compare("B") == 0 && item->text(iValue).trimmed().compare("test1") == 0)
    {
        m_test1.setParent(this);
        qDebug() << "test1";
        m_test2.hide();
        m_test1.show();
    }
    else if (item->parent()->text(iValue).trimmed() == "B" && item->text(iValue).trimmed() == "test2")
    {
        m_test2.setParent(this);
        qDebug() << "test2";
        m_test1.hide();
        m_test2.show();
    }
}


ui界面中添加QTreeWidget控件即可。

test1和test2是自己创建的两个widget类。

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7705075
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：超简单、带有展开列表与输入结果弹窗输出的QT登录注册界面
• 除此之外, 这篇博客: 如何解决QT视频会议窗口在拉伸过程中整个界面闪烁的问题中的 一、问题描述 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

         开发环境：Qt5.15.0、Win10、 Visual studio 2019、C++

        在开发视频会议项目的过程中，被一个问题困扰了很久。就是整个视频会议的界面在拉伸四周改变大小的过程中，整个客户端界面闪烁的非常严重（非视频画面闪烁）。可以看到在下面的视频中，界面的背景会出现短暂的透明，非常影响使用感受。

  

                                                           图1.1   界面闪烁图 

• 您还可以看一下 梅会东老师的Qt高级系列之8：Qt多线程线程池数据同步机制及文件下载器项目实战课程中的 亲手写线程之界面设计小节, 巩固相关知识点
  
• 以下回答来自chatgpt:

  解决方案

  根据你提供的问题，你想要使用QT框架来实现一个侧边树形导航的功能，并且点击不同的节点时能在右侧显示与节点对应的页面。

  前提：首先你需要安装QT和PyQt，具体安装方法请参考官方文档。

  下面提供一个基本的例子来帮助你实现你的需求：

  首先，创建一个.ui文件来设计你的界面，包含侧边树形导航和右侧显示页面的部分。保存为mainwindow.ui。

  然后，创建一个python脚本，加载ui文件并实现界面的功能。以下是一个实现的例子：

  import sys
  from PyQt5.QtWidgets import QApplication, QMainWindow, QTreeWidgetItem
  
  
  class MainWindow(QMainWindow):
      def __init__(self):
          super().__init__()
  
          self.initUI()
  
      def initUI(self):
          # 加载ui文件
          self.load_ui()
  
      def load_ui(self):
          # 创建树形导航部分
          self.treeWidget = QTreeWidget(self)
          self.treeWidget.setHeaderHidden(True)
          self.treeWidget.setColumnCount(1)
          self.treeWidget.itemClicked.connect(self.on_item_clicked)
  
          # 创建右侧显示页面的部分
          self.pageWidget = QWidget(self)
  
          # 设置布局
          self.setCentralWidget(self.pageWidget)
          self.resize(800, 600)
  
          # 加载树形导航数据
          data = {
              "节点1": {
                  "页面1": "content 1",
                  "页面2": "content 2"
              },
              "节点2": {
                  "页面3": "content 3",
                  "页面4": "content 4"
              }
          }
          self.load_tree_data(data)
  
      def load_tree_data(self, data):
          # 递归添加树形导航节点和子节点
          for key, value in data.items():
              parent_item = QTreeWidgetItem(self.treeWidget)
              parent_item.setText(0, key)
  
              for sub_key, sub_value in value.items():
                  child_item = QTreeWidgetItem(parent_item)
                  child_item.setText(0, sub_key)
                  child_item.setData(0, 0, sub_value)
  
      def on_item_clicked(self, item, column):
          # 点击树形导航节点时，在右侧显示对应的页面内容
          content = item.data(0, 0)
          self.pageWidget.setText(content)
  
  
  if __name__ == '__main__':
      app = QApplication(sys.argv)
      window = MainWindow()
      window.show()
      sys.exit(app.exec_())
  

  在上面的例子中，首先我们创建一个 MainWindow 类，继承自 QMainWindow，并在 initUI 方法中加载我们设计好的 ui 文件。

  然后，我们在 load_ui 方法中创建了树形导航部分和右侧显示页面的部分，并设置了布局。

  接着，我们通过 load_tree_data 方法加载了树形导航的数据，并通过 on_item_clicked 方法来响应点击事件，在右侧显示对应的页面内容。

  最后，我们创建了一个 QApplication 对象和 MainWindow 对象，然后启动了程序。

  运行以上代码，就可以得到一个具有侧边树形导航和右侧显示页面功能的界面。

  注意：请根据具体需求进行修改和完善代码，以上只是一个简单的示例。另外，代码中使用的是PyQt5，如果你使用的是PyQt4或其他版本的QT，请做相应调整。

  希望能对你有所帮助！

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^