高阶组件树视图基本用法

针对多级节点数据的展示和操作的一套方案，能够进行节点新增，删除，修改，折叠等操作。

HarmonyOS

rhyine

2024-05-26 14:03:08

浏览

回答 1

待解决

回答 1

按赞同

按时间

e_lion

使用的核心API

TreeView

核心代码解释

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) 
    } 
  } 
}

实现效果