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