harmony 鸿蒙@ohos.arkui.advanced.TreeView(树视图)

  • 2023-10-30
  • 浏览 (657)

@ohos.arkui.advanced.TreeView(树视图)

树视图作为一种分层显示的列表,适合显示嵌套结构。拥有父列表项和子列表项,可展开或折叠。

用于效率型应用,如备忘录、电子邮件、图库中的侧边导航栏中。

说明:

该组件从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

导入模块

import { TreeView } from "@ohos.arkui.advanced.TreeView"

子组件

属性

不支持通用属性

TreeView

TreeView({ treeController: TreeController })

装饰器类型:\@Component

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

名称 参数类型 必填 说明
treeController TreeController 树视图节点信息。

TreeController

树视图组件的控制器,可以将此对象绑定至树视图组件,然后通过它控制树的节点信息,同一个控制器不可以控制多个树视图组件。

addNode

addNode(nodeParam?: NodeParam): void

点击某个节点后,调用该方法可以触发新增孩子节点

参数:

名称 参数类型 必填 说明
nodeParam NodeParam 节点信息。

removeNode

removeNode(): void

点击某个节点后,调用该方法可以触发删除该节点

modifyNode

modifyNode(): void

点击某个节点后,调用该方法可以触发修改该节点

buildDone

buildDone(): void

建立树视图。节点增加完毕后,必须调用该方法,触发树信息的保存

refreshNode

refreshNode(parentId: number, parentSubTitle: ResourceStr, currentSubtitle: ResourceStr): void

参数:

名称 参数类型 必填 说明
parentId number 父节点Id。
parentSubTitle ResourceStr 父节点副文本。
currentSubtitle ResourceStr 当前节点副文本。

NodeParam

名称 类型 必填 说明
parentNodeId number 父亲节点。
currentNodeId number 当前孩子节点。
isFolder boolean 是否是目录。
icon ResourceStr 图标。
selectedIcon ResourceStr 选中图标。
editIcon ResourceStr 编辑图标。
primaryTitle ResourceStr 主标题。
secondaryTitle ResourceStr 副标题。
container () => void 绑定在节点上的右键子组件,子组件由@Builder修饰。

TreeListenerManager

树视图组件的监听器,可以将此对象绑定至树视图组件,然后通过它监听树的节点的变化,同一个监听器不可以控制多个树视图组件。

getInstance

getInstance(): TreeListenerManager

获取监听管理器单例对象

getTreeListener()

getTreeListener(): TreeListener

获取监听器

TreeListener

树视图组件的监听器,可以将此对象绑定至树视图组件,然后通过它监听树的节点的变化,同一个监听器不可以控制多个树视图组件。

on

on(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void;

注册监听

参数:

名称 参数类型 必填 说明
type TreeListenType 监听类型。
callbackParam CallbackParam 节点信息。

once

once(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void;

注册一次监听

参数:

名称 参数类型 必填 说明
type TreeListenType 监听类型。
callbackParam CallbackParam 节点信息。

off

off(type: TreeListenType, callback?: (callbackParam: CallbackParam) => void): void;

取消监听

参数:

名称 参数类型 必填 说明
type TreeListenType 监听类型。
nodeParam NodeParam 节点信息。

TreeListenType

名称 说明
NODE_CLICK 监听节点点击事件。
NODE_ADD 监听节点增加事件。
NODE_DELETE 监听节点删除事件。
NODE_MODIFY 监听节点修改事件。
NODE_MOVE 监听节点移动事件。

CallbackParam

名称 类型 必填 说明
currentNodeId number 当前孩子节点。
parentNodeId number 父亲节点表。
childIndex: number number 孩子索引。

事件

不支持通用事件

示例

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;
  @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'];

  aboutToDisappear(): void {
    this.treeListener.off(TreeListenType.NODE_CLICK, null);
    this.treeListener.off(TreeListenType.NODE_ADD, null);
    this.treeListener.off(TreeListenType.NODE_DELETE, null);
  }

  aboutToAppear(): void {
    this.treeListener.on(TreeListenType.NODE_MOVE, (callbackParam: CallbackParam) => {
    })
    this.treeListener.on(TreeListenType.NODE_CLICK, (callbackParam: CallbackParam) => {
    })

    let normalResource: Resource = $r('app.media.ic_public_collect_normal');
    let selectedResource: Resource = $r('app.media.ic_public_collect_selected');
    let editResource: Resource = $r('app.media.ic_public_collect_edit');
    let nodeParam: NodeParam = { parentNodeId:-1, currentNodeId: 1, isFolder: true, icon: normalResource, selectedIcon: selectedResource,
      editIcon: editResource, primaryTitle: "目录1验证悬浮框自适应效果是否OK",
      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" })
      .addNode({ parentNodeId:-1, currentNodeId: 32, isFolder: true, icon: normalResource, selectedIcon: selectedResource,
        editIcon: editResource, primaryTitle: "目录6", secondaryTitle: "0" })
      .addNode({ parentNodeId:32, currentNodeId: 35, isFolder: true, icon: normalResource, selectedIcon: selectedResource,
        editIcon: editResource, primaryTitle: "目录6-1", secondaryTitle: "0" })
      .addNode({ parentNodeId:-1, currentNodeId: 33, isFolder: true, icon: normalResource, selectedIcon: selectedResource,
        editIcon: editResource, primaryTitle: "目录7", secondaryTitle: "0" })
      .addNode({ parentNodeId:33, currentNodeId: 34, isFolder: false, primaryTitle: "项目8" })
      .addNode({ parentNodeId:-1, currentNodeId: 36, isFolder: false, primaryTitle: "项目9" })
      .buildDone();
  }

  build() {
    SideBarContainer(SideBarContainerType.Embed)
    {
      TreeView({ treeController: this.treeController })
      Row() {
        Divider().vertical(true).strokeWidth(2).color(0x000000).lineCap(LineCapStyle.Round)
        Column() {
          Row() {
            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)
      }
    }
    .focusable(true)
    .showControlButton(false)
    .showSideBar(true)
  }
}

zh-cn_image_0000001664822257

你可能感兴趣的鸿蒙文章

harmony 鸿蒙基于ArkTS的声明式开发范式

harmony 鸿蒙@ohos.arkui.advanced.Counter(计数器组件)

harmony 鸿蒙@ohos.arkui.advanced.SegmentButton(分段按钮)

harmony 鸿蒙@ohos.multimedia.avCastPicker (投播组件)

harmony 鸿蒙属性动画

harmony 鸿蒙枚举说明

harmony 鸿蒙Blank

harmony 鸿蒙Button

harmony 鸿蒙CalendarPicker

harmony 鸿蒙Checkbox

0  赞