1# @ohos.arkui.advanced.TreeView (树视图) 2 3 4树视图作为一种分层显示的列表，适合显示嵌套结构。拥有父列表项和子列表项，可展开或折叠。 5 6 7用于效率型应用，如备忘录、电子邮件、图库中的侧边导航栏中。 8 9 10> **说明：** 11> 12> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 13 14 15## 导入模块 16 17``` 18import { TreeView } from "@ohos.arkui.advanced.TreeView" 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**系统能力：** SystemCapability.ArkUI.ArkUI.Full 36 37 38**参数：** 39 40 41| 名称 | 参数类型 | 必填 | 说明 | 42| -------- | -------- | -------- | -------- | 43| treeController | [TreeController](#treecontroller) | 是 | 树视图节点信息。 | 44 45 46## TreeController 47 48树视图组件的控制器，可以将此对象绑定至树视图组件，然后通过它控制树的节点信息，同一个控制器不可以控制多个树视图组件。 49 50 51### addNode 52 53 54addNode(nodeParam?: NodeParam): void 55 56 57点击某个节点后，调用该方法可以触发新增孩子节点 58 59 60**参数：** 61 62 63| 名称 | 参数类型 | 必填 | 说明 | 64| -------- | -------- | -------- | -------- | 65| nodeParam | [NodeParam](#nodeparam) | 否 | 节点信息。 | 66 67 68### removeNode 69 70removeNode(): void 71 72点击某个节点后，调用该方法可以触发删除该节点 73 74 75### modifyNode 76 77 78modifyNode(): void 79 80 81点击某个节点后，调用该方法可以触发修改该节点 82 83 84### buildDone 85 86buildDone(): void 87 88建立树视图。节点增加完毕后，必须调用该方法，触发树信息的保存 89 90 91### refreshNode 92 93refreshNode(parentId: number, parentSubTitle: ResourceStr, currentSubtitle: ResourceStr): void 94 95更新树视图。调用该方法，更新当前节点的信息。 96 97**参数：** 98 99| 名称 | 参数类型 | 必填 | 说明 | 100| -------- | -------- | -------- | -------- | 101| parentId | number | 是 | 父节点Id。 | 102| parentSubTitle | [ResourceStr](ts-types.md#resourcestr) | 是 | 父节点副文本。 | 103| currentSubtitle | [ResourceStr](ts-types.md#resourcestr) | 是 | 当前节点副文本。 | 104 105 106## NodeParam 107 108| 名称 | 类型 | 必填 | 说明 | 109| -------- | -------- | -------- | -------- | 110| parentNodeId | number | 否 | 父节点。 | 111| currentNodeId | number | 否 | 当前子节点。 | 112| isFolder | boolean | 否 | 是否是目录。默认值：false。true：是目录，false：不是目录。 | 113| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标。 | 114| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选中图标。 | 115| editIcon | [ResourceStr](ts-types.md#resourcestr) | 否 | 编辑图标。 | 116| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 主标题。 | 117| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 副标题。 | 118| container | () => void | 否 | 绑定在节点上的右键子组件，子组件由@Builder修饰。 | 119 120 121## TreeListenerManager 122 123树视图组件的监听器，可以将此对象绑定至树视图组件，然后通过它监听树的节点的变化，同一个监听器不可以控制多个树视图组件。 124 125 126### getInstance 127 128getInstance(): [TreeListenerManager](#treelistenermanager) 129 130获取监听管理器单例对象 131 132 133### getTreeListener 134 135getTreeListener(): [TreeListener](#treelistener) 136 137获取监听器 138 139 140## TreeListener 141 142树视图组件的监听器，可以将此对象绑定至树视图组件，然后通过它监听树的节点的变化，同一个监听器不可以控制多个树视图组件。 143 144 145### on 146 147on(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void; 148 149注册监听 150 151**参数：** 152 153| 名称 | 参数类型 | 必填 | 说明 | 154| -------- | -------- | -------- | -------- | 155| type | [TreeListenType](#treelistentype) | 是 | 监听类型。 | 156| callback | (callbackParam: [CallbackParam](#callbackparam)) => void | 是 | 节点信息。 | 157 158 159### once 160 161once(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void; 162 163注册一次监听 164 165 166**参数：** 167 168| 名称 | 参数类型 | 必填 | 说明 | 169| -------- | -------- | -------- | -------- | 170| type | [TreeListenType](#treelistentype) | 是 | 监听类型。 | 171| callback | (callbackParam: [CallbackParam](#callbackparam)) => void | 是 | 节点信息。 | 172 173 174### off 175 176 177off(type: TreeListenType, callback?: (callbackParam: CallbackParam) => void): void; 178 179 180取消监听 181 182**参数：** 183 184 185| 名称 | 参数类型 | 必填 | 说明 | 186| -------- | -------- | -------- | -------- | 187| type | [TreeListenType](#treelistentype) | 是 | 监听类型。 | 188| callback | (callbackParam: [CallbackParam](#callbackparam)) => void | 否 | 节点信息。 | 189 190 191## TreeListenType 192 193| 名称 | 说明 | 194| -------- | -------- | 195| NODE_CLICK | 监听节点点击事件。 | 196| NODE_ADD | 监听节点增加事件。 | 197| NODE_DELETE | 监听节点删除事件。 | 198| NODE_MODIFY | 监听节点修改事件。 | 199| NODE_MOVE | 监听节点移动事件。 | 200 201 202## CallbackParam 203 204| 名称 | 类型 | 必填 | 说明 | 205| -------- | -------- | -------- | -------- | 206| currentNodeId | number | 是 | 当前子节点。 | 207| parentNodeId | number | 否 | 父节点。 | 208| childIndex | number | 否 | 子索引。 | 209 210## 事件 211不支持[通用事件](ts-universal-events-click.md) 212 213## 示例 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('新增').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 235 .onClick((event: ClickEvent) => { 236 this.treeController.addNode(); 237 }) 238 Divider() 239 Text('删除').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 240 .onClick((event: ClickEvent) => { 241 this.treeController.removeNode(); 242 }) 243 Divider() 244 Text('重命名').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: "目录1验证悬浮框自适应效果是否OK", 270 secondaryTitle: "6" }; 271 this.treeController 272 .addNode(nodeParam) 273 .addNode({parentNodeId:1, currentNodeId: 2, isFolder: false, primaryTitle: "项目1_1" }) 274 .addNode({ parentNodeId:-1, currentNodeId: 7, isFolder: true, primaryTitle: "目录2" }) 275 .addNode({ parentNodeId:-1, currentNodeId: 23, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 276 editIcon: editResource, primaryTitle: "目录3" }) 277 .addNode({ parentNodeId:-1, currentNodeId: 24, isFolder: false, primaryTitle: "项目4" }) 278 .addNode({ parentNodeId:-1, currentNodeId: 31, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 279 editIcon: editResource, primaryTitle: "目录5", secondaryTitle: "0" }) 280 .addNode({ parentNodeId:-1, currentNodeId: 32, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 281 editIcon: editResource, primaryTitle: "目录6", secondaryTitle: "0" }) 282 .addNode({ parentNodeId:32, currentNodeId: 35, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 283 editIcon: editResource, primaryTitle: "目录6-1", secondaryTitle: "0" }) 284 .addNode({ parentNodeId:-1, currentNodeId: 33, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 285 editIcon: editResource, primaryTitle: "目录7", secondaryTitle: "0" }) 286 .addNode({ parentNodeId:33, currentNodeId: 34, isFolder: false, primaryTitle: "项目8" }) 287 .addNode({ parentNodeId:-1, currentNodeId: 36, isFolder: false, primaryTitle: "项目9" }) 288 .buildDone(); 289 this.treeController.refreshNode(-1, "父节点", "子节点"); 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
