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