HarmonyOS 鸿蒙Next 树形结构UI组件

请参考以下代码示例：

import {
  TreeController,
  TreeListener,
  TreeListenerManager,
  TreeListenType,
  NodeParam,
  TreeView,
  CallbackParam
} from '@ohos.arkui.advanced.TreeView'

@Entry
@Component
struct TreeViewDemo {
private treeController: TreeController = new TreeController();
private treeListener: TreeListener = TreeListenerManager.getInstance().getTreeListener();
@State clickNodeId: number = 0;

// 销毁相关监听
aboutToDisappear(): void {
this.treeListener.off(TreeListenType.NODE_CLICK, undefined);
this.treeListener.off(TreeListenType.NODE_ADD, undefined);
this.treeListener.off(TreeListenType.NODE_DELETE, undefined);
this.treeListener.off(TreeListenType.NODE_MOVE, undefined);
}

aboutToAppear(): void {
this.treeListener.on(TreeListenType.NODE_CLICK, (callbackParam: CallbackParam) => {
this.clickNodeId = callbackParam.currentNodeId;
})
this.treeListener.on(TreeListenType.NODE_ADD, (callbackParam: CallbackParam) => {
this.clickNodeId = callbackParam.currentNodeId;
})
this.treeListener.on(TreeListenType.NODE_DELETE, (callbackParam: CallbackParam) => {
this.clickNodeId = callbackParam.currentNodeId;
})
this.treeListener.once(TreeListenType.NODE_MOVE, (callbackParam: CallbackParam) => {
this.clickNodeId = callbackParam.currentNodeId;
})

let normalResource: Resource = $r('app.media.icon');
let selectedResource: Resource = $r('app.media.avatar');
let editResource: Resource = $r('app.media.2');
let nodeParam: NodeParam = {
parentNodeId: -1, // 父节点Id
currentNodeId: 1, // 节点Id
isFolder: true, // 是否折叠
icon: normalResource, // 默认图标
selectedIcon: selectedResource, // 选中图标
editIcon: editResource, // 编辑态图标
primaryTitle: "Number1", // 节点标题内容
secondaryTitle: "6" // 节点副标题文字内容
};
this.treeController
.addNode(nodeParam)
.addNode({ parentNodeId: 1, currentNodeId: 2, isFolder: false, primaryTitle: "项目1_1" })
.addNode({ parentNodeId: -1, currentNodeId: 7, isFolder: true, primaryTitle: "目录2" })
.addNode({
parentNodeId: -1,
currentNodeId: 23,
isFolder: true,
icon: normalResource,
selectedIcon: selectedResource,
editIcon: editResource,
primaryTitle: "目录3"
})
.addNode({ parentNodeId: -1, currentNodeId: 24, isFolder: false, primaryTitle: "项目4" })
.addNode({
parentNodeId: -1,
currentNodeId: 31,
isFolder: true,
icon: normalResource,
selectedIcon: selectedResource,
editIcon: editResource,
primaryTitle: "目录5",
secondaryTitle: "0"
})
.buildDone();
this.treeController.refreshNode(-1, "父节点", "子节点");
}

build() {
Column() {
SideBarContainer(SideBarContainerType.Embed) {
TreeView({ treeController: this.treeController })
Row() {
Divider().vertical(true).strokeWidth(2).color(0x000000).lineCap(LineCapStyle.Round)
Column({ space: 30 }) {
Text('ClickNodeId=' + this.clickNodeId).fontSize('16fp')
Button('Add', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8).backgroundColor(0x317aff).width(90)
.onClick((event: ClickEvent) => {
this.treeController.addNode();
})
Button('Modify', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8).backgroundColor(0x317aff).width(90)
.onClick((event: ClickEvent) => {
this.treeController.modifyNode();
})
Button('Remove', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8).backgroundColor(0x317aff).width(120)
.onClick((event: ClickEvent) => {
this.treeController.removeNode();
})
}.height('100%').width('70%').alignItems(HorizontalAlign.Start).margin(10)
}
}
.focusable(true)
.showControlButton(false)
.showSideBar(true)
}
}