高阶组件树视图基本用法

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

HarmonyOS
2024-05-26 14:03:08
浏览
收藏 0
回答 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) 
    } 
  } 
}

实现效果

适配的版本信息

IDE:DevEco Studio 4.0.3.600

SDK:HarmoneyOS 4.0.10.11

分享
微博
QQ
微信
回复
2024-05-27 16:58:43
相关问题
getWindow().setBackground用法
3546浏览 • 1回复 待解决
napi 基本使用场景示例
461浏览 • 1回复 待解决
关于measureTextSize的用法
332浏览 • 1回复 待解决
InputMethodAbility用法是怎样的
6418浏览 • 1回复 待解决
import依赖较大如何优化
740浏览 • 1回复 待解决
移动边缘计算的基本想法是怎样的?
2541浏览 • 1回复 待解决
import依赖较大时如何优化
708浏览 • 1回复 待解决
如何理解Intent类及其用法
5490浏览 • 4回复 已解决
napi常见用法:class对象绑定
460浏览 • 1回复 待解决
redis五大基本类型是什么?
1885浏览 • 1回复 待解决
resource中string.json的用法
5458浏览 • 1回复 已解决
KV数据库基本功能使用
511浏览 • 1回复 待解决
如何在DOM加载前后运行JS脚本
606浏览 • 1回复 待解决
ArkTS支持反射,有人知道反射用法吗?
828浏览 • 1回复 待解决
系统监听注册的on和off的用法问题
1279浏览 • 1回复 待解决