1# TreeView 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @fengluochenai--> 5<!--Designer: @YanSanzo--> 6<!--Tester: @tinygreyy--> 7<!--Adviser: @HelloCrease--> 8 9 10树视图作为一种分层显示的列表，适合显示嵌套结构。拥有父列表项和子列表项，可展开或折叠。 11 12 13用于效率型应用，如备忘录、电子邮件、图库中的侧边导航栏中。 14 15 16> **说明：** 17> 18> 该组件从API version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 19> 20 21 22## 导入模块 23 24``` 25import { TreeView } from "@kit.ArkUI"; 26``` 27 28 29## 子组件 30 31无 32 33## 属性 34不支持[通用属性](ts-component-general-attributes.md)。 35 36## TreeView 37 38TreeView({ treeController: TreeController }) 39 40**装饰器类型：**\@Component 41 42**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 43 44**系统能力：** SystemCapability.ArkUI.ArkUI.Full 45 46**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 47 48 49| 名称 | 类型 | 必填 | 说明 | 50| -------- | -------- | -------- | -------- | 51| treeController | [TreeController](#treecontroller) | 是 | 树视图节点信息。 | 52 53 54## TreeController 55 56树视图组件的控制器，可以将此对象绑定至树视图组件，然后通过它控制树的节点信息，同一个控制器不可以控制多个树视图组件。 57 58**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 59 60**系统能力：** SystemCapability.ArkUI.ArkUI.Full 61 62**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 63 64 65### addNode 66 67 68addNode(nodeParam?: NodeParam): TreeController 69 70点击某个节点后，调用该方法可以触发新增孩子节点。 71 72**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 73 74**系统能力：** SystemCapability.ArkUI.ArkUI.Full 75 76**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 77 78**参数：** 79 80| 参数名 | 类型 | 必填 | 说明 | 81| -------- | -------- | -------- | -------- | 82| nodeParam | [NodeParam](#nodeparam) | 否 | 节点信息。 | 83 84**返回值：** 85 86| 类型 | 说明 | 87| --------------------------------- | -------------------- | 88| [TreeController](#treecontroller) | 树视图组件的控制器。 | 89 90### removeNode 91 92removeNode(): void 93 94点击某个节点后，调用该方法可以触发删除该节点。 95 96**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 97 98**系统能力：** SystemCapability.ArkUI.ArkUI.Full 99 100**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 101 102 103### modifyNode 104 105 106modifyNode(): void 107 108点击某个节点后，调用该方法可以触发修改该节点。 109 110**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 111 112**系统能力：** SystemCapability.ArkUI.ArkUI.Full 113 114**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 115 116 117### buildDone 118 119buildDone(): void 120 121建立树视图。节点增加完毕后，必须调用该方法，触发树信息的保存。 122 123**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 124 125**系统能力：** SystemCapability.ArkUI.ArkUI.Full 126 127**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 128 129 130### refreshNode 131 132refreshNode(parentId: number, parentSubTitle: ResourceStr, currentSubtitle: ResourceStr): void 133 134更新树视图。调用该方法，更新当前节点的信息。 135 136**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 137 138**系统能力：** SystemCapability.ArkUI.ArkUI.Full 139 140**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 141 142**参数：** 143 144| 参数名 | 类型 | 必填 | 说明 | 145| -------- | -------- | -------- | -------- | 146| parentId | number | 是 | 父节点Id。<br />取值范围：大于等于-1。 | 147| parentSubTitle | [ResourceStr](ts-types.md#resourcestr) | 是 | 父节点副文本。 | 148| currentSubtitle | [ResourceStr](ts-types.md#resourcestr) | 是 | 当前节点副文本。 | 149 150## NodeParam 151 152**系统能力：** SystemCapability.ArkUI.ArkUI.Full 153 154**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 155 156| 名称 | 类型 | 必填 | 说明 | 157| -------- | -------- | -------- |--------------------------------------------------------------------------------------------------------------------------------------------------| 158| parentNodeId | number | 否 | 父节点Id。<br />取值范围：大于等于-1。<br />默认值：-1，根节点id值为-1。若设置数值小于-1，做不生效处理。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 159| currentNodeId | number | 否 | 当前子节点Id。<br />取值范围：大于等于-1。<br />不能为根节点id，不能为null，否则会抛出异常。且不能设置两个相同的currentNodeId。<br />默认值：-1 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 160| isFolder | boolean | 否 | 是否是目录。<br />默认值：false<br />true：是目录，false：不是目录。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 161| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标。<br/>默认值：空字符串 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 162| symbolIconStyle<sup>18+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-symbolglyphmodifier.md#symbolglyphmodifier) | 否 | Symbol图标，优先级大于icon。<br/>默认值：undefined <br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 163| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选中图标。<br/>默认值：空字符串 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 164| symbolSelectedIconStyle<sup>18+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-symbolglyphmodifier.md#symbolglyphmodifier) | 否 | Symbol选中图标，优先级大于selectedIcon。<br/>默认值：undefined <br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 165| editIcon | [ResourceStr](ts-types.md#resourcestr) | 否 | 编辑图标。<br/>默认值：空字符串 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 166| symbolEditIconStyle<sup>18+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-symbolglyphmodifier.md#symbolglyphmodifier) | 否 | Symbol编辑图标，优先级大于editIcon。<br/>默认值：undefined <br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 167| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 主标题。<br/>默认值：空字符串 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 168| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 副标题。<br/>默认值：空字符串 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 169| container | () => void | 否 | 绑定在节点上的右键子组件，子组件由@Builder修饰。<br/>默认值：() => void <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 170 171 172## TreeListenerManager 173 174树视图组件的监听器，可以将此对象绑定至树视图组件，然后通过它监听树的节点的变化，同一个监听器不可以控制多个树视图组件。 175 176**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 177 178 179### getInstance 180 181static getInstance(): TreeListenerManager 182 183获取监听管理器单例对象。 184 185**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 186 187**系统能力：** SystemCapability.ArkUI.ArkUI.Full 188 189**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 190 191**返回值**: 192 193| 类型 | 说明 | 194| --------------- |------------------| 195| [TreeListenerManager](#treelistenermanager) | 返回获取到的监听管理器单例对象。 | 196 197 198### getTreeListener 199 200getTreeListener(): TreeListener 201 202获取监听器。 203 204**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 205 206**系统能力：** SystemCapability.ArkUI.ArkUI.Full 207 208**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 209 210**返回值**: 211 212| 类型 | 说明 | 213| ------------ |------------| 214| [TreeListener](#treelistener) | 返回获取到的监听器。 | 215 216 217## TreeListener 218 219树视图组件的监听器，可以将此对象绑定至树视图组件，然后通过它监听树的节点的变化，同一个监听器不可以控制多个树视图组件。 220 221 222### on 223 224on(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void; 225 226注册监听。 227 228**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 229 230**系统能力：** SystemCapability.ArkUI.ArkUI.Full 231 232**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 233 234**参数：** 235 236| 参数名 | 类型 | 必填 | 说明 | 237| -------- | -------- | -------- | -------- | 238| type | [TreeListenType](#treelistentype) | 是 | 监听类型。 | 239| callback | (callbackParam: [CallbackParam](#callbackparam)) => void | 是 | 节点信息。 | 240 241 242### once 243 244once(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void; 245 246注册一次监听。 247 248**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 249 250**系统能力：** SystemCapability.ArkUI.ArkUI.Full 251 252**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 253 254**参数：** 255 256| 参数名 | 类型 | 必填 | 说明 | 257| -------- | -------- | -------- | -------- | 258| type | [TreeListenType](#treelistentype) | 是 | 监听类型。 | 259| callback | (callbackParam: [CallbackParam](#callbackparam)) => void | 是 | 节点信息。 | 260 261 262### off 263 264 265off(type: TreeListenType, callback?: (callbackParam: CallbackParam) => void): void; 266 267取消监听。 268 269**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 270 271**系统能力：** SystemCapability.ArkUI.ArkUI.Full 272 273**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 274 275**参数：** 276 277| 参数名 | 类型 | 必填 | 说明 | 278| -------- | -------- | -------- | -------- | 279| type | [TreeListenType](#treelistentype) | 是 | 监听类型。 | 280| callback | (callbackParam: [CallbackParam](#callbackparam)) => void | 否 | 节点信息。 | 281 282## TreeListenType 283 284**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 285 286**系统能力：** SystemCapability.ArkUI.ArkUI.Full 287 288**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 289 290| 名称 | 值 | 说明 | 291| -------- | -------- | -------- | 292| NODE_CLICK | "NodeClick" | 监听节点点击事件。 | 293| NODE_ADD | "NodeAdd" | 监听节点增加事件。 | 294| NODE_DELETE | "NodeDelete" | 监听节点删除事件。 | 295| NODE_MODIFY | "NodeModify" | 监听节点修改事件。 | 296| NODE_MOVE | "NodeMove" | 监听节点移动事件。 | 297 298## CallbackParam 299 300**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 301 302**系统能力：** SystemCapability.ArkUI.ArkUI.Full 303 304**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 305 306| 名称 | 类型 | 必填 | 说明 | 307| -------- | -------- | -------- |------------------------------------------| 308| currentNodeId | number | 是 | 返回当前子节点id。<br />取值范围：大于等于0。 | 309| parentNodeId | number | 否 | 返回当前父节点id。<br />取值范围：大于等于-1。<br />默认值：-1 | 310| childIndex | number | 否 | 返回子索引。<br />取值范围：大于等于-1。<br />默认值：-1 | 311 312## 事件 313不支持[通用事件](ts-component-general-events.md)。 314 315## 示例 316 317### 示例1（设置简单树视图） 318 319通过树视图组件的控制器对树的节点进行新增、删除、重命名，展示新增不同参数节点的实现效果。 320 321```ts 322import { TreeController, TreeListener, TreeListenerManager, TreeListenType, NodeParam, TreeView, CallbackParam } from '@kit.ArkUI'; 323 324@Entry 325@Component 326struct TreeViewDemo { 327 private treeController: TreeController = new TreeController(); 328 private treeListener: TreeListener = TreeListenerManager.getInstance().getTreeListener(); 329 @State clickId: number = 0; 330 331 aboutToDisappear(): void { 332 this.treeListener.off(TreeListenType.NODE_CLICK, undefined); 333 this.treeListener.off(TreeListenType.NODE_ADD, undefined); 334 this.treeListener.off(TreeListenType.NODE_DELETE, undefined); 335 this.treeListener.off(TreeListenType.NODE_MOVE, undefined); 336 } 337 338 @Builder menuBuilder1() { 339 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 340 Text('新增').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 341 .onClick((event: ClickEvent) => { 342 this.treeController.addNode(); 343 }) 344 Divider() 345 Text('删除').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 346 .onClick((event: ClickEvent) => { 347 this.treeController.removeNode(); 348 }) 349 Divider() 350 Text('重命名').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 351 .onClick((event: ClickEvent) => { 352 this.treeController.modifyNode(); 353 }) 354 }.width(100).border({width: 1, color: 0x80808a, radius: '16dp'}) 355 } 356 357 aboutToAppear(): void { 358 this.treeListener.on(TreeListenType.NODE_CLICK, (callbackParam: CallbackParam) => { 359 this.clickId = callbackParam.currentNodeId; 360 }) 361 this.treeListener.on(TreeListenType.NODE_ADD, (callbackParam: CallbackParam) => { 362 this.clickId = callbackParam.currentNodeId; 363 }) 364 this.treeListener.on(TreeListenType.NODE_DELETE, (callbackParam: CallbackParam) => { 365 this.clickId = callbackParam.currentNodeId; 366 }) 367 this.treeListener.once(TreeListenType.NODE_MOVE, (callbackParam: CallbackParam) => { 368 this.clickId = callbackParam.currentNodeId; 369 }) 370 371 let normalResource: Resource = $r('sys.media.ohos_ic_normal_white_grid_folder'); 372 let selectedResource: Resource = $r('sys.media.ohos_ic_public_select_all'); 373 let editResource: Resource = $r('sys.media.ohos_ic_public_edit'); 374 let nodeParam: NodeParam = { parentNodeId:-1, currentNodeId: 1, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 375 editIcon: editResource, primaryTitle: "目录1验证悬浮框自适应效果是否OK", 376 secondaryTitle: "6" }; 377 this.treeController 378 .addNode(nodeParam) 379 .addNode({parentNodeId:1, currentNodeId: 2, isFolder: false, primaryTitle: "项目1_1" }) 380 .addNode({ parentNodeId:-1, currentNodeId: 7, isFolder: true, primaryTitle: "目录2" }) 381 .addNode({ parentNodeId:-1, currentNodeId: 23, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 382 editIcon: editResource, primaryTitle: "目录3" }) 383 .addNode({ parentNodeId:-1, currentNodeId: 24, isFolder: false, primaryTitle: "项目4" }) 384 .addNode({ parentNodeId:-1, currentNodeId: 31, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 385 editIcon: editResource, primaryTitle: "目录5", secondaryTitle: "0" }) 386 .addNode({ parentNodeId:-1, currentNodeId: 32, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 387 editIcon: editResource, primaryTitle: "目录6", secondaryTitle: "0" }) 388 .addNode({ parentNodeId:32, currentNodeId: 35, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 389 editIcon: editResource, primaryTitle: "目录6-1", secondaryTitle: "0" }) 390 .addNode({ parentNodeId:-1, currentNodeId: 33, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 391 editIcon: editResource, primaryTitle: "目录7", secondaryTitle: "0" }) 392 .addNode({ parentNodeId:33, currentNodeId: 34, isFolder: false, primaryTitle: "项目8" }) 393 .addNode({ parentNodeId:-1, currentNodeId: 36, isFolder: false, primaryTitle: "项目9" }) 394 .buildDone(); 395 this.treeController.refreshNode(-1, "父节点", "子节点"); 396 } 397 398 build() { 399 Column(){ 400 SideBarContainer(SideBarContainerType.Embed) 401 { 402 TreeView({ treeController: this.treeController }) 403 Row() { 404 Divider().vertical(true).strokeWidth(2).color(0x000000).lineCap(LineCapStyle.Round) 405 Column({ space: 30 }) { 406 Text('ClickId=' + this.clickId).fontSize('16fp') 407 Button('Add', { type: ButtonType.Normal, stateEffect: true }) 408 .borderRadius(8).backgroundColor(0x317aff).width(90) 409 .onClick((event: ClickEvent) => { 410 this.treeController.addNode(); 411 }) 412 Button('Modify', { type: ButtonType.Normal, stateEffect: true }) 413 .borderRadius(8).backgroundColor(0x317aff).width(90) 414 .onClick((event: ClickEvent) => { 415 this.treeController.modifyNode(); 416 }) 417 Button('Remove', { type: ButtonType.Normal, stateEffect: true }) 418 .borderRadius(8).backgroundColor(0x317aff).width(120) 419 .onClick((event: ClickEvent) => { 420 this.treeController.removeNode(); 421 }) 422 }.height('100%').width('70%').alignItems(HorizontalAlign.Start).margin(10) 423 } 424 } 425 .focusable(true) 426 .showControlButton(false) 427 .showSideBar(true) 428 } 429 }} 430``` 431 432 433 434### 示例2（设置Symbol类型图标） 435 436从API version 18开始，该示例通过设置NodeParam的属性symbolIconStyle、symbolEditIconStyle、symbolSelectedIconStyle，展示了自定义Symbol类型图标。 437 438```ts 439import { TreeController, TreeListener, TreeListenerManager, TreeListenType, NodeParam, TreeView, CallbackParam, 440 SymbolGlyphModifier } from '@kit.ArkUI'; 441 442@Entry 443@Component 444struct TreeViewDemo { 445 private treeController: TreeController = new TreeController(); 446 private treeListener: TreeListener = TreeListenerManager.getInstance().getTreeListener(); 447 @State clickNodeId: number = 0; 448 449 aboutToDisappear(): void { 450 this.treeListener.off(TreeListenType.NODE_CLICK, undefined); 451 this.treeListener.off(TreeListenType.NODE_ADD, undefined); 452 this.treeListener.off(TreeListenType.NODE_DELETE, undefined); 453 this.treeListener.off(TreeListenType.NODE_MOVE, undefined); 454 } 455 456 @Builder menuBuilder1() { 457 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 458 Text('新增').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 459 .onClick((event: ClickEvent) => { 460 this.treeController.addNode(); 461 }) 462 Divider() 463 Text('删除').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 464 .onClick((event: ClickEvent) => { 465 this.treeController.removeNode(); 466 }) 467 Divider() 468 Text('重命名').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) 469 .onClick((event: ClickEvent) => { 470 this.treeController.modifyNode(); 471 }) 472 }.width(100).border({width: 1, color: 0x80808a, radius: '16dp'}) 473 } 474 475 aboutToAppear(): void { 476 this.treeListener.on(TreeListenType.NODE_CLICK, (callbackParam: CallbackParam) => { 477 this.clickNodeId = callbackParam.currentNodeId; 478 }) 479 this.treeListener.on(TreeListenType.NODE_ADD, (callbackParam: CallbackParam) => { 480 this.clickNodeId = callbackParam.currentNodeId; 481 }) 482 this.treeListener.on(TreeListenType.NODE_DELETE, (callbackParam: CallbackParam) => { 483 this.clickNodeId = callbackParam.currentNodeId; 484 }) 485 this.treeListener.once(TreeListenType.NODE_MOVE, (callbackParam: CallbackParam) => { 486 this.clickNodeId = callbackParam.currentNodeId; 487 }) 488 489 let normalResource: Resource = $r('sys.symbol.house'); 490 let selectedResource: Resource = $r('sys.symbol.car'); 491 let editResource: Resource = $r('sys.symbol.calendar'); 492 let normalSymbolResource: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.bell')).fontColor([Color.Red]); 493 let selectedSymbolResource: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.heart')).fontColor([Color.Blue]); 494 let editSymbolResource: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.cake')).fontColor([Color.Pink]); 495 let nodeParam: NodeParam = { parentNodeId:-1, currentNodeId: 1, isFolder: true, icon: normalResource, selectedIcon: selectedResource, 496 editIcon: editResource, primaryTitle: "目录1", 497 secondaryTitle: "6" }; 498 this.treeController 499 .addNode(nodeParam) 500 .addNode({parentNodeId:1, currentNodeId: 2, isFolder: false, primaryTitle: "项目1_1" }) 501 .addNode({ parentNodeId:-1, currentNodeId: 7, isFolder: true, primaryTitle: "目录2" }) 502 .addNode({ parentNodeId:-1, currentNodeId: 23, isFolder: true, icon: normalResource, symbolIconStyle: normalSymbolResource, 503 selectedIcon: selectedResource, symbolSelectedIconStyle: selectedSymbolResource, editIcon: editResource, 504 symbolEditIconStyle: editSymbolResource, primaryTitle: "目录3" }) 505 .addNode({ parentNodeId:-1, currentNodeId: 24, isFolder: false, primaryTitle: "项目4" }) 506 .addNode({ parentNodeId:-1, currentNodeId: 31, isFolder: true, icon: normalResource, symbolIconStyle: normalSymbolResource, 507 selectedIcon: selectedResource, symbolSelectedIconStyle: selectedSymbolResource, editIcon: editResource, 508 symbolEditIconStyle: editSymbolResource, primaryTitle: "目录5", secondaryTitle: "0" }) 509 .addNode({ parentNodeId:-1, currentNodeId: 32, isFolder: true, icon: normalResource, symbolIconStyle: normalSymbolResource, 510 selectedIcon: selectedResource, symbolSelectedIconStyle: selectedSymbolResource, editIcon: editResource, 511 symbolEditIconStyle: editSymbolResource, primaryTitle: "目录6", secondaryTitle: "0" }) 512 .addNode({ parentNodeId:32, currentNodeId: 35, isFolder: true, icon: normalResource, symbolIconStyle: normalSymbolResource, 513 selectedIcon: selectedResource, symbolSelectedIconStyle: selectedSymbolResource, editIcon: editResource, 514 symbolEditIconStyle: editSymbolResource, primaryTitle: "目录6-1", secondaryTitle: "0" }) 515 .addNode({ parentNodeId:-1, currentNodeId: 33, isFolder: true, icon: normalResource, symbolIconStyle: normalSymbolResource, 516 selectedIcon: selectedResource, symbolSelectedIconStyle: selectedSymbolResource, editIcon: editResource, 517 symbolEditIconStyle: editSymbolResource, primaryTitle: "目录7", secondaryTitle: "0" }) 518 .addNode({ parentNodeId:33, currentNodeId: 34, isFolder: false, primaryTitle: "项目8" }) 519 .addNode({ parentNodeId:-1, currentNodeId: 36, isFolder: false, primaryTitle: "项目9" }) 520 .buildDone(); 521 this.treeController.refreshNode(-1, "父节点", "子节点"); 522 } 523 524 build() { 525 Column(){ 526 SideBarContainer(SideBarContainerType.Embed) 527 { 528 TreeView({ treeController: this.treeController }) 529 Row() { 530 Divider().vertical(true).strokeWidth(2).color(0x000000).lineCap(LineCapStyle.Round) 531 Column({ space: 30 }) { 532 Text('ClickNodeId=' + this.clickNodeId).fontSize('16fp') 533 Button('Add', { type: ButtonType.Normal, stateEffect: true }) 534 .borderRadius(8).backgroundColor(0x317aff).width(90) 535 .onClick((event: ClickEvent) => { 536 this.treeController.addNode(); 537 }) 538 Button('Modify', { type: ButtonType.Normal, stateEffect: true }) 539 .borderRadius(8).backgroundColor(0x317aff).width(90) 540 .onClick((event: ClickEvent) => { 541 this.treeController.modifyNode(); 542 }) 543 Button('Remove', { type: ButtonType.Normal, stateEffect: true }) 544 .borderRadius(8).backgroundColor(0x317aff).width(120) 545 .onClick((event: ClickEvent) => { 546 this.treeController.removeNode(); 547 }) 548 }.height('100%').width('80%').alignItems(HorizontalAlign.Start).margin(10) 549 } 550 } 551 .focusable(true) 552 .showControlButton(false) 553 .showSideBar(true) 554 } 555 }} 556``` 557 558
