1# TreeView 2 3 4树视图作为一种分层显示的列表，适合显示嵌套结构。拥有父列表项和子列表项，可展开或折叠。 5 6 7用于效率型应用，如备忘录、电子邮件、图库中的侧边导航栏中。 8 9 10> **说明：** 11> 12> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 13 14 15## 导入模块 16 17``` 18import { TreeView } from "@kit.ArkUI" 19``` 20 21 22## 子组件 23 24无 25 26## 属性 27不支持[通用属性](ts-universal-attributes-size.md)。 28 29## TreeView 30 31TreeView({ treeController: TreeController }) 32 33**装饰器类型：**\@Component 34 35**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39 40| 名称 | 类型 | 必填 | 说明 | 41| -------- | -------- | -------- | -------- | 42| treeController | [TreeController](#treecontroller) | 是 | 树视图节点信息。 | 43 44 45## TreeController 46 47树视图组件的控制器，可以将此对象绑定至树视图组件，然后通过它控制树的节点信息，同一个控制器不可以控制多个树视图组件。 48 49**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 50 51**系统能力：** SystemCapability.ArkUI.ArkUI.Full 52 53 54### addNode 55 56 57addNode(nodeParam?: NodeParam): TreeController 58 59点击某个节点后，调用该方法可以触发新增孩子节点。 60 61**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 62 63**系统能力：** SystemCapability.ArkUI.ArkUI.Full 64 65 66| 名称 | 类型 | 必填 | 说明 | 67| -------- | -------- | -------- | -------- | 68| nodeParam | [NodeParam](#nodeparam) | 否 | 节点信息。 | 69 70**返回值：** 71 72| 类型 | 说明 | 73| --------------------------------- | -------------------- | 74| [TreeController](#treecontroller) | 树视图组件的控制器。 | 75 76### removeNode 77 78removeNode(): void 79 80点击某个节点后，调用该方法可以触发删除该节点。 81 82**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 83 84**系统能力：** SystemCapability.ArkUI.ArkUI.Full 85 86 87### modifyNode 88 89 90modifyNode(): void 91 92点击某个节点后，调用该方法可以触发修改该节点。 93 94**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 95 96**系统能力：** SystemCapability.ArkUI.ArkUI.Full 97 98 99### buildDone 100 101buildDone(): void 102 103建立树视图。节点增加完毕后，必须调用该方法，触发树信息的保存。 104 105**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 106 107**系统能力：** SystemCapability.ArkUI.ArkUI.Full 108 109 110### refreshNode 111 112refreshNode(parentId: number, parentSubTitle: ResourceStr, currentSubtitle: ResourceStr): void 113 114更新树视图。调用该方法，更新当前节点的信息。 115 116**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 117 118**系统能力：** SystemCapability.ArkUI.ArkUI.Full 119 120| 名称 | 类型 | 必填 | 说明 | 121| -------- | -------- | -------- | -------- | 122| parentId | number | 是 | 父节点Id。 | 123| parentSubTitle | [ResourceStr](ts-types.md#resourcestr) | 是 | 父节点副文本。 | 124| currentSubtitle | [ResourceStr](ts-types.md#resourcestr) | 是 | 当前节点副文本。 | 125 126## NodeParam 127 128**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 129 130**系统能力：** SystemCapability.ArkUI.ArkUI.Full 131 132| 名称 | 类型 | 必填 | 说明 | 133| -------- | -------- | -------- | -------- | 134| parentNodeId | number | 否 | 父节点。 | 135| currentNodeId | number | 否 | 当前子节点。 | 136| isFolder | boolean | 否 | 是否是目录。默认值：false。true：是目录，false：不是目录。 | 137| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标。 | 138| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选中图标。 | 139| editIcon | [ResourceStr](ts-types.md#resourcestr) | 否 | 编辑图标。 | 140| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 主标题。 | 141| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 副标题。 | 142| container | () => void | 否 | 绑定在节点上的右键子组件，子组件由@Builder修饰。 | 143 144 145## TreeListenerManager 146 147树视图组件的监听器，可以将此对象绑定至树视图组件，然后通过它监听树的节点的变化，同一个监听器不可以控制多个树视图组件。 148 149 150### getInstance 151 152static getInstance(): TreeListenerManager 153 154获取监听管理器单例对象。 155 156**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 157 158**系统能力：** SystemCapability.ArkUI.ArkUI.Full 159 160**返回值**: 161 162| 类型 | 说明 | 163| --------------- |------------------| 164| [TreeListenerManager](#treelistenermanager) | 返回获取到的监听管理器单例对象。 | 165 166 167### getTreeListener 168 169getTreeListener(): TreeListener 170 171获取监听器。 172 173**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 174 175**系统能力：** SystemCapability.ArkUI.ArkUI.Full 176 177**返回值**: 178 179| 类型 | 说明 | 180| ------------ |------------| 181| [TreeListener](#treelistener) | 返回获取到的监听器。 | 182 183 184## TreeListener 185 186树视图组件的监听器，可以将此对象绑定至树视图组件，然后通过它监听树的节点的变化，同一个监听器不可以控制多个树视图组件。 187 188 189### on 190 191on(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void; 192 193注册监听。 194 195**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 196 197**系统能力：** SystemCapability.ArkUI.ArkUI.Full 198 199| 名称 | 类型 | 必填 | 说明 | 200| -------- | -------- | -------- | -------- | 201| type | [TreeListenType](#treelistentype) | 是 | 监听类型。 | 202| callback | (callbackParam: [CallbackParam](#callbackparam)) => void | 是 | 节点信息。 | 203 204 205### once 206 207once(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void; 208 209注册一次监听。 210 211**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 212 213**系统能力：** SystemCapability.ArkUI.ArkUI.Full 214 215| 名称 | 类型 | 必填 | 说明 | 216| -------- | -------- | -------- | -------- | 217| type | [TreeListenType](#treelistentype) | 是 | 监听类型。 | 218| callback | (callbackParam: [CallbackParam](#callbackparam)) => void | 是 | 节点信息。 | 219 220 221### off 222 223 224off(type: TreeListenType, callback?: (callbackParam: CallbackParam) => void): void; 225 226取消监听。 227 228**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 229 230**系统能力：** SystemCapability.ArkUI.ArkUI.Full 231 232 233| 名称 | 类型 | 必填 | 说明 | 234| -------- | -------- | -------- | -------- | 235| type | [TreeListenType](#treelistentype) | 是 | 监听类型。 | 236| callback | (callbackParam: [CallbackParam](#callbackparam)) => void | 否 | 节点信息。 | 237 238## TreeListenType 239 240**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 241 242**系统能力：** SystemCapability.ArkUI.ArkUI.Full 243 244| 名称 | 值 | 说明 | 245| -------- | -------- | -------- | 246| NODE_CLICK | "NodeClick" | 监听节点点击事件。 | 247| NODE_ADD | "NodeAdd" | 监听节点增加事件。 | 248| NODE_DELETE | "NodeDelete" | 监听节点删除事件。 | 249| NODE_MODIFY | "NodeModify" | 监听节点修改事件。 | 250| NODE_MOVE | "NodeMove" | 监听节点移动事件。 | 251 252## CallbackParam 253 254**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 255 256**系统能力：** SystemCapability.ArkUI.ArkUI.Full 257 258| 名称 | 类型 | 必填 | 说明 | 259| -------- | -------- | -------- | -------- | 260| currentNodeId | number | 是 | 当前子节点。 | 261| parentNodeId | number | 否 | 父节点。 | 262| childIndex | number | 否 | 子索引。 | 263 264## 事件 265不支持[通用事件](ts-universal-events-click.md)。 266 267## 示例 268通过树视图组件的控制器对树的节点进行新增、删除、重命名，展示新增不同参数节点的实现效果。 269```ts 270import { TreeController, TreeListener, TreeListenerManager, TreeListenType, NodeParam, TreeView, CallbackParam } from '@kit.ArkUI' 271 272@Entry 273@Component 274struct TreeViewDemo { 275 private treeController: TreeController = new TreeController(); 276 private treeListener: TreeListener = TreeListenerManager.getInstance().getTreeListener(); 277 @State clickNodeId: number = 0; 278 279 aboutToDisappear(): void { 280 this.treeListener.off(TreeListenType.NODE_CLICK, undefined); 281 this.treeListener.off(TreeListenType.NODE_ADD, undefined); 282 this.treeListener.off(TreeListenType.NODE_DELETE, undefined); 283 this.treeListener.off(TreeListenType.NODE_MOVE, undefined); 284 } 285 286 @Builder menuBuilder1() { 287 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 288 Text('新增').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 289 .onClick((event: ClickEvent) => { 290 this.treeController.addNode(); 291 }) 292 Divider() 293 Text('删除').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 294 .onClick((event: ClickEvent) => { 295 this.treeController.removeNode(); 296 }) 297 Divider() 298 Text('重命名').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 299 .onClick((event: ClickEvent) => { 300 this.treeController.modifyNode(); 301 }) 302 }.width(100).border({width: 1, color: 0x80808a, radius: '16dp'}) 303 } 304 305 aboutToAppear(): void { 306 this.treeListener.on(TreeListenType.NODE_CLICK, (callbackParam: CallbackParam) => { 307 this.clickNodeId = callbackParam.currentNodeId; 308 }) 309 this.treeListener.on(TreeListenType.NODE_ADD, (callbackParam: CallbackParam) => { 310 this.clickNodeId = callbackParam.currentNodeId; 311 }) 312 this.treeListener.on(TreeListenType.NODE_DELETE, (callbackParam: CallbackParam) => { 313 this.clickNodeId = callbackParam.currentNodeId; 314 }) 315 this.treeListener.once(TreeListenType.NODE_MOVE, (callbackParam: CallbackParam) => { 316 this.clickNodeId = callbackParam.currentNodeId; 317 }) 318 319 let normalResource: Resource = $r('app.media.ic_public_collect_normal'); 320 let selectedResource: Resource = $r('app.media.ic_public_collect_selected'); 321 let editResource: Resource = $r('app.media.ic_public_collect_edit'); 322 let nodeParam: NodeParam = { parentNodeId:-1, currentNodeId: 1, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 323 editIcon: editResource, primaryTitle: "目录1验证悬浮框自适应效果是否OK", 324 secondaryTitle: "6" }; 325 this.treeController 326 .addNode(nodeParam) 327 .addNode({parentNodeId:1, currentNodeId: 2, isFolder: false, primaryTitle: "项目1_1" }) 328 .addNode({ parentNodeId:-1, currentNodeId: 7, isFolder: true, primaryTitle: "目录2" }) 329 .addNode({ parentNodeId:-1, currentNodeId: 23, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 330 editIcon: editResource, primaryTitle: "目录3" }) 331 .addNode({ parentNodeId:-1, currentNodeId: 24, isFolder: false, primaryTitle: "项目4" }) 332 .addNode({ parentNodeId:-1, currentNodeId: 31, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 333 editIcon: editResource, primaryTitle: "目录5", secondaryTitle: "0" }) 334 .addNode({ parentNodeId:-1, currentNodeId: 32, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 335 editIcon: editResource, primaryTitle: "目录6", secondaryTitle: "0" }) 336 .addNode({ parentNodeId:32, currentNodeId: 35, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 337 editIcon: editResource, primaryTitle: "目录6-1", secondaryTitle: "0" }) 338 .addNode({ parentNodeId:-1, currentNodeId: 33, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 339 editIcon: editResource, primaryTitle: "目录7", secondaryTitle: "0" }) 340 .addNode({ parentNodeId:33, currentNodeId: 34, isFolder: false, primaryTitle: "项目8" }) 341 .addNode({ parentNodeId:-1, currentNodeId: 36, isFolder: false, primaryTitle: "项目9" }) 342 .buildDone(); 343 this.treeController.refreshNode(-1, "父节点", "子节点"); 344 } 345 346 build() { 347 Column(){ 348 SideBarContainer(SideBarContainerType.Embed) 349 { 350 TreeView({ treeController: this.treeController }) 351 Row() { 352 Divider().vertical(true).strokeWidth(2).color(0x000000).lineCap(LineCapStyle.Round) 353 Column({ space: 30 }) { 354 Text('ClickNodeId=' + this.clickNodeId).fontSize('16fp') 355 Button('Add', { type: ButtonType.Normal, stateEffect: true }) 356 .borderRadius(8).backgroundColor(0x317aff).width(90) 357 .onClick((event: ClickEvent) => { 358 this.treeController.addNode(); 359 }) 360 Button('Modify', { type: ButtonType.Normal, stateEffect: true }) 361 .borderRadius(8).backgroundColor(0x317aff).width(90) 362 .onClick((event: ClickEvent) => { 363 this.treeController.modifyNode(); 364 }) 365 Button('Remove', { type: ButtonType.Normal, stateEffect: true }) 366 .borderRadius(8).backgroundColor(0x317aff).width(120) 367 .onClick((event: ClickEvent) => { 368 this.treeController.removeNode(); 369 }) 370 }.height('100%').width('70%').alignItems(HorizontalAlign.Start).margin(10) 371 } 372 } 373 .focusable(true) 374 .showControlButton(false) 375 .showSideBar(true) 376 } 377 }} 378``` 379 380 381
