HarmonyOS 鸿蒙next list组件嵌套展开折叠及跳转功能

import { NodeController, FrameNode, UIContext } from "@kit.ArkUI"
import { typeNode } from '@ohos.arkui.node';

class TextNodeController extends NodeController {
  public rootNode: FrameNode | null = null;
  public listFrameNode: FrameNode | null = null;
  private uiContext: UIContext | null = null;
  private data: Array<Tree> = [
    { "id": 1, "name": "用户中心", "pid": 0 },
    {
      "id": 2,
      "name": "订单中心",
      "pid": 0,
      "children": [
        { "id": 12, "name": "所有订单", "pid": 2 },
        { "id": 14, "name": "待发货", "pid": 2 },
        { "id": 15, "name": "订单导出", "pid": 2 }
      ]
    },
    {
      "id": 3,
      "name": "系统管理",
      "pid": 0,
      "children": [
        { "id": 18, "name": "菜单设置", "pid": 3 },
        {
          "id": 19,
          "name": "权限管理",
          "pid": 3,
          "children": [
            { "id": 21, "name": "系统权限", "pid": 19 },
            { "id": 22, "name": "角色设置", "pid": 19 }
          ]
        }
      ]
    }
  ]

  makeNode(uiContext: UIContext): FrameNode | null {
    this.uiContext = uiContext
    if (this.rootNode == null) {
      this.rootNode = new FrameNode(uiContext);
      this.rootNode.commonAttribute
        .width('100%')
        .height('100%')
        .backgroundColor('#F5F1E5')
    }

    if (this.listFrameNode == null) {
      let listNode = typeNode.createNode(uiContext, 'List')
      listNode.initialize()
        .divider({
          strokeWidth: 0.5,
          color: Color.Gray
        })
      this.data.forEach((item) => {
        let listItemNode = typeNode.createNode(uiContext, 'ListItem')
        let columnNode = typeNode.createNode(uiContext, 'Column')
        let textNode = typeNode.createNode(uiContext, 'Text')
        textNode.initialize(item.name)
          .width('100%')
          .height(45)
          .padding({ left: 15 })
          .onClick(() => {
            uiContext.getPromptAction().showToast({
              message: 'parent',
              duration: 2000
            })
            const level = this.findLevel(this.data, item.id)
            const nodeType = textNode.getNextSibling()?.getNodeType()
            if (item.children && (nodeType === 'Text' || nodeType === undefined)) {
              this.addChild(textNode, item.children, level)
            } else if (nodeType === 'Column') {
              textNode.getNextSibling()?.disposeTree()
            }
          })
        columnNode.appendChild(textNode)
        listItemNode.appendChild(columnNode)
        listNode.appendChild(listItemNode)
      })
      this.rootNode.appendChild(listNode)
    }
    return this.rootNode
  }

  // 递归添加子节点
  addChild(currentNode: FrameNode, children: Tree[], level: number | undefined) {
    const parentNode = currentNode.getParent()
    let columnNode = typeNode.createNode(this.uiContext, 'Column')
    children.forEach((item) => {
      let textNode = typeNode.createNode(this.uiContext, 'Text')
      if (level) {
        textNode.initialize(item.name)
          .width('100%')
          .height(45)
          .padding({ left: 15 * (1 + level) })
          .onClick(() => {
            this.uiContext?.getPromptAction().showToast({
              message: `add child，level:${level}`,
              duration: 2000
            })
            const nextLevel = this.findLevel(this.data, item.id)
            const nodeType = textNode.getNextSibling()?.getNodeType()
            if (item.children && (nodeType === 'Text' || nodeType === undefined)) {
              this.addChild(textNode, item.children, nextLevel)
            } else if (nodeType === 'Column') {
              textNode.getNextSibling()?.disposeTree()
            }
          })
      }
      columnNode.appendChild(textNode)
    })
    parentNode?.insertChildAfter(columnNode, currentNode)
  }

  // 获取当前组件层级
  findLevel(tree: Tree[], id: number, level: number = 1): number | undefined {
    for (let node of tree) {
      if (node.id === id) {
        return level;
      }
      if (node.children) {
        const childLevel: number | undefined = this.findLevel(node.children, id, level + 1);
        if (childLevel !== undefined) {
          return childLevel;
        }
      }
    }
    return undefined;
  }
}

let textNodeController: TextNodeController = new TextNodeController();

@Entry
@Component
export struct TreePage {
  build() {
    Column() {
      NodeContainer(textNodeController)
    }
    .width('100%')
    .height('100%')
  }
}

interface Tree {
  id: number,
  name: string,
  pid: number,
  children?: Array<Tree>
}