1# TreeView 2 3 4The tree view component is used to display a hierarchical list of items. Each item can contain subitems, which may be expanded or collapsed. 5 6 7This component is applicable in productivity applications, such as side navigation bars in notepad, email, and Gallery applications. 8 9 10> **NOTE** 11> 12> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 13 14 15## Modules to Import 16 17``` 18import { TreeView } from "@kit.ArkUI" 19``` 20 21 22## Child Components 23 24Not supported 25 26## Attributes 27The [universal attributes](ts-universal-attributes-size.md) are not supported. 28 29## TreeView 30 31TreeView({ treeController: TreeController }) 32 33**Decorator**: @Component 34 35**Atomic service API**: This API can be used in atomic services since API version 11. 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Full 38 39 40**Parameters** 41 42 43| Name| Type| Mandatory| Description| 44| -------- | -------- | -------- | -------- | 45| treeController | [TreeController](#treecontroller) | Yes| Node information of the tree view.| 46 47 48## TreeController 49 50Implements a **TreeController** object, which can be bound to a tree view component to control the node information of the component. One **TreeController** object can be bound to only one tree view component. 51 52**Atomic service API**: This API can be used in atomic services since API version 11. 53 54 55### addNode 56 57 58addNode(nodeParam?: NodeParam): void 59 60Adds a child node to the selected node. 61 62**Atomic service API**: This API can be used in atomic services since API version 11. 63 64 65**Parameters** 66 67 68| Name| Type| Mandatory| Description| 69| -------- | -------- | -------- | -------- | 70| nodeParam | [NodeParam](#nodeparam) | No| Node information.| 71 72 73### removeNode 74 75removeNode(): void 76 77Removes the selected node. 78 79**Atomic service API**: This API can be used in atomic services since API version 11. 80 81 82### modifyNode 83 84 85modifyNode(): void 86 87Modifies the selected node. 88 89**Atomic service API**: This API can be used in atomic services since API version 11. 90 91 92### buildDone 93 94buildDone(): void 95 96Builds a tree view. After a node is added, this API must be called to save the tree information. 97 98**Atomic service API**: This API can be used in atomic services since API version 11. 99 100 101### refreshNode 102 103refreshNode(parentId: number, parentSubTitle: ResourceStr, currentSubtitle: ResourceStr): void 104 105Refreshes the tree view. You can call this API to update the information about the current node. 106 107**Atomic service API**: This API can be used in atomic services since API version 11. 108 109**Parameters** 110 111| Name| Type| Mandatory| Description| 112| -------- | -------- | -------- | -------- | 113| parentId | number | Yes| ID of the parent node.| 114| parentSubTitle | [ResourceStr](ts-types.md#resourcestr) | Yes| Secondary text of the parent node.| 115| currentSubtitle | [ResourceStr](ts-types.md#resourcestr) | Yes| Secondary text of the current node.| 116 117## NodeParam 118 119**Atomic service API**: This API can be used in atomic services since API version 11. 120 121| Name| Type| Mandatory| Description| 122| -------- | -------- | -------- | -------- | 123| parentNodeId | number | No| Parent node.| 124| currentNodeId | number | No| Current child node.| 125| isFolder | boolean | No| Whether the node is a directory.<br> Default value: **false**.<br> **true**: The node is a directory.<br>**false**: The node is not a directory.| 126| icon | [ResourceStr](ts-types.md#resourcestr) | No| Icon.| 127| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | No| Icon of the selected node.| 128| editIcon | [ResourceStr](ts-types.md#resourcestr) | No| Edit icon.| 129| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | No| Primary title.| 130| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | No| Secondary title.| 131| container | () => void | No| Right-click child component bound to the node. The child component is decorated with @Builder.| 132 133 134## TreeListenerManager 135 136Implements a **TreeListenerManager** object, which can be bound to a tree view component to listen for changes of tree nodes. One **TreeListenerManager** object can be bound to only one tree view component. 137 138 139### getInstance 140 141static getInstance(): TreeListenerManager 142 143Obtains a **TreeListenerManager** singleton object. 144 145**Atomic service API**: This API can be used in atomic services since API version 11. 146 147**Return value** 148 149| Type | Description | 150| --------------- |------------------| 151| [TreeListenerManager](#treelistenermanager) | **TreeListenerManager** singleton object.| 152 153 154### getTreeListener 155 156getTreeListener(): TreeListener 157 158Obtains a listener. 159 160**Atomic service API**: This API can be used in atomic services since API version 11. 161 162**Return value** 163 164| Type | Description | 165| ------------ |------------| 166| [TreeListener](#treelistener) | Obtained listener.| 167 168 169## TreeListener 170 171Listener of the tree view component. You can bind it to the tree view component and use it to listen for changes of tree nodes. A listener can be bound to only one tree view component. 172 173 174### on 175 176on(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void; 177 178Register a listener. 179 180**Atomic service API**: This API can be used in atomic services since API version 11. 181 182**Parameters** 183 184| Name| Type| Mandatory| Description| 185| -------- | -------- | -------- | -------- | 186| type | [TreeListenType](#treelistentype) | Yes| Listening type.| 187| callback | (callbackParam: [CallbackParam](#callbackparam)) => void | Yes| Node information.| 188 189 190### once 191 192once(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void; 193 194Registers a one-off listener. 195 196**Atomic service API**: This API can be used in atomic services since API version 11. 197 198 199**Parameters** 200 201| Name| Type| Mandatory| Description| 202| -------- | -------- | -------- | -------- | 203| type | [TreeListenType](#treelistentype) | Yes| Listening type.| 204| callback | (callbackParam: [CallbackParam](#callbackparam)) => void | Yes| Node information.| 205 206 207### off 208 209 210off(type: TreeListenType, callback?: (callbackParam: CallbackParam) => void): void; 211 212Unregisters a listener. 213 214**Atomic service API**: This API can be used in atomic services since API version 11. 215 216**Parameters** 217 218 219| Name| Type| Mandatory| Description| 220| -------- | -------- | -------- | -------- | 221| type | [TreeListenType](#treelistentype) | Yes| Listening type.| 222| callback | (callbackParam: [CallbackParam](#callbackparam)) => void | No| Node information.| 223 224## TreeListenType 225 226**Atomic service API**: This API can be used in atomic services since API version 11. 227 228| Name| Description| 229| -------- | -------- | 230| NODE_CLICK | Listens for click events of nodes.| 231| NODE_ADD | Listens for add events of nodes.| 232| NODE_DELETE | Listens for delete events of nodes.| 233| NODE_MODIFY | Listens for modify events of nodes.| 234| NODE_MOVE | Listens for move events of nodes.| 235 236## CallbackParam 237 238**Atomic service API**: This API can be used in atomic services since API version 11. 239 240| Name| Type| Mandatory| Description| 241| -------- | -------- | -------- | -------- | 242| currentNodeId | number | Yes| Current child node.| 243| parentNodeId | number | No| Parent node.| 244| childIndex | number | No| Child index.| 245 246## Events 247The [universal events](ts-universal-events-click.md) are not supported. 248 249## Example 250 251```ts 252import { TreeController, TreeListener, TreeListenerManager, TreeListenType, NodeParam, TreeView, CallbackParam } from '@kit.ArkUI' 253 254@Entry 255@Component 256struct TreeViewDemo { 257 private treeController: TreeController = new TreeController(); 258 private treeListener: TreeListener = TreeListenerManager.getInstance().getTreeListener(); 259 @State clickNodeId: number = 0; 260 261 aboutToDisappear(): void { 262 this.treeListener.off(TreeListenType.NODE_CLICK, undefined); 263 this.treeListener.off(TreeListenType.NODE_ADD, undefined); 264 this.treeListener.off(TreeListenType.NODE_DELETE, undefined); 265 this.treeListener.off(TreeListenType.NODE_MOVE, undefined); 266 } 267 268 @Builder menuBuilder1() { 269 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 270 Text('Add').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 271 .onClick((event: ClickEvent) => { 272 this.treeController.addNode(); 273 }) 274 Divider() 275 Text('Delete').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 276 .onClick((event: ClickEvent) => { 277 this.treeController.removeNode(); 278 }) 279 Divider() 280 Text('Rename').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 281 .onClick((event: ClickEvent) => { 282 this.treeController.modifyNode(); 283 }) 284 }.width(100).border({width: 1, color: 0x80808a, radius: '16dp'}) 285 } 286 287 aboutToAppear(): void { 288 this.treeListener.on(TreeListenType.NODE_CLICK, (callbackParam: CallbackParam) => { 289 this.clickNodeId = callbackParam.currentNodeId; 290 }) 291 this.treeListener.on(TreeListenType.NODE_ADD, (callbackParam: CallbackParam) => { 292 this.clickNodeId = callbackParam.currentNodeId; 293 }) 294 this.treeListener.on(TreeListenType.NODE_DELETE, (callbackParam: CallbackParam) => { 295 this.clickNodeId = callbackParam.currentNodeId; 296 }) 297 this.treeListener.once(TreeListenType.NODE_MOVE, (callbackParam: CallbackParam) => { 298 this.clickNodeId = callbackParam.currentNodeId; 299 }) 300 301 let normalResource: Resource = $r('app.media.ic_public_collect_normal'); 302 let selectedResource: Resource = $r('app.media.ic_public_collect_selected'); 303 let editResource: Resource = $r('app.media.ic_public_collect_edit'); 304 let nodeParam: NodeParam = { parentNodeId:-1, currentNodeId: 1, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 305 editIcon: editResource, primaryTitle: "Directory 1: Verify the effect of the floating box", 306 secondaryTitle: "6" }; 307 this.treeController 308 .addNode(nodeParam) 309 .addNode({parentNodeId:1, currentNodeId: 2, isFolder: false, primaryTitle: "Project 1_1" }) 310 .addNode({ parentNodeId:-1, currentNodeId: 7, isFolder: true, primaryTitle: "Directory 2" }) 311 .addNode({ parentNodeId:-1, currentNodeId: 23, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 312 editIcon: editResource, primaryTitle: "Directory 3" }) 313 .addNode({ parentNodeId:-1, currentNodeId: 24, isFolder: false, primaryTitle: "Project 4" }) 314 .addNode({ parentNodeId:-1, currentNodeId: 31, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 315 editIcon: editResource, primaryTitle: "Directory 5", secondaryTitle: "0" }) 316 .addNode({ parentNodeId:-1, currentNodeId: 32, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 317 editIcon: editResource, primaryTitle: "Directory 6", secondaryTitle: "0" }) 318 .addNode({ parentNodeId:32, currentNodeId: 35, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 319 editIcon: editResource, primaryTitle: "Directory 6-1", secondaryTitle: "0" }) 320 .addNode({ parentNodeId:-1, currentNodeId: 33, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 321 editIcon: editResource, primaryTitle: "Directory 7", secondaryTitle: "0" }) 322 .addNode({ parentNodeId:33, currentNodeId: 34, isFolder: false, primaryTitle: "Project 8" }) 323 .addNode({ parentNodeId:-1, currentNodeId: 36, isFolder: false, primaryTitle: "Project 9" }) 324 .buildDone(); 325 this.treeController.refreshNode (-1, "Parent", "Child"); 326 } 327 328 build() { 329 Column(){ 330 SideBarContainer(SideBarContainerType.Embed) 331 { 332 TreeView({ treeController: this.treeController }) 333 Row() { 334 Divider().vertical(true).strokeWidth(2).color(0x000000).lineCap(LineCapStyle.Round) 335 Column({ space: 30 }) { 336 Text('ClickNodeId=' + this.clickNodeId).fontSize('16fp') 337 Button('Add', { type: ButtonType.Normal, stateEffect: true }) 338 .borderRadius(8).backgroundColor(0x317aff).width(90) 339 .onClick((event: ClickEvent) => { 340 this.treeController.addNode(); 341 }) 342 Button('Modify', { type: ButtonType.Normal, stateEffect: true }) 343 .borderRadius(8).backgroundColor(0x317aff).width(90) 344 .onClick((event: ClickEvent) => { 345 this.treeController.modifyNode(); 346 }) 347 Button('Remove', { type: ButtonType.Normal, stateEffect: true }) 348 .borderRadius(8).backgroundColor(0x317aff).width(120) 349 .onClick((event: ClickEvent) => { 350 this.treeController.removeNode(); 351 }) 352 }.height('100%').width('70%').alignItems(HorizontalAlign.Start).margin(10) 353 } 354 } 355 .focusable(true) 356 .showControlButton(false) 357 .showSideBar(true) 358 } 359 }} 360``` 361 362 363
