1# FrameNode 2 3**FrameNode** represents an entity node in the component tree. It can be used by a [NodeController](./js-apis-arkui-nodeController.md#nodecontroller) to mount a [BuilderNode](./js-apis-arkui-builderNode.md#buildernode) (that holds the FrameNode) to a [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) or mount a [RenderNode](./js-apis-arkui-renderNode.md#rendernode) to another FrameNode. 4 5> **NOTE** 6> 7> The initial APIs of this module are supported since API version 11. Newly added APIs will be marked with a superscript to indicate their earliest API version. 8> 9> **FrameNode** is not available in DevEco Studio Previewer. 10> 11> FrameNodes cannot be dragged. 12 13## Modules to Import 14 15```ts 16import { FrameNode, LayoutConstraint, ExpandMode, typeNode, NodeAdapter } from "@kit.ArkUI"; 17``` 18 19## CrossLanguageOptions<sup>15+</sup> 20 21Provides options for configuring or querying the cross-language access permissions for a FrameNode. For example, for nodes created using ArkTS, this API can control whether non-ArkTS languages are allowed to access or modify the properties of these nodes. 22 23**Atomic service API**: This API can be used in atomic services since API version 15. 24 25**System capability**: SystemCapability.ArkUI.ArkUI.Full 26 27| Name | Type | Read Only| Optional| Description | 28| ------ | ------ | ---- | ---- | ---------------------- | 29| attributeSetting | boolean | No | Yes | Whether the FrameNode supports cross-language settings. The default value is **false**.| 30 31## ExpandMode<sup>15+</sup> 32 33Enumerates the expansion mode of child nodes. 34 35**Atomic service API**: This API can be used in atomic services since API version 15. 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Full 38 39| Name| Value| Description| 40| -------- | -------- | -------- | 41| NOT_EXPAND | 0 | The child nodes of the current FrameNode are not expanded. If the FrameNode contains [LazyForEach](./arkui-ts/ts-rendering-control-lazyforeach.md) child nodes, the child nodes are not expanded when the nodes in the main tree are being obtained. The child node sequence numbers are calculated based on the nodes in the main tree.| 42| EXPAND | 1 | The child nodes of the current FrameNode are expanded. If the FrameNode contains [LazyForEach](./arkui-ts/ts-rendering-control-lazyforeach.md) child nodes, all child nodes are expanded when being obtained. The child node sequence numbers are calculated based on all child nodes.| 43| LAZY_EXPAND | 2 | The child nodes of the current FrameNode are expanded on demand. If the FrameNode contains [LazyForEach](./arkui-ts/ts-rendering-control-lazyforeach.md) child nodes, the child nodes are not expanded when the nodes in the main tree are being obtained, but are expanded when nodes not in the main tree are being obtained. The child node sequence numbers are calculated based on all child nodes.| 44 45## FrameNode 46 47### constructor 48 49constructor(uiContext: UIContext) 50 51Constructor used to create a FrameNode. 52 53**Atomic service API**: This API can be used in atomic services since API version 12. 54 55**System capability**: SystemCapability.ArkUI.ArkUI.Full 56 57**Parameters** 58 59| Name | Type | Mandatory| Description | 60| --------- | ----------------------------------------- | ---- | ---------------------------------- | 61| uiContext | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 62 63### getRenderNode 64 65getRenderNode(): RenderNode | null 66 67Obtains the RenderNode instance held in this FrameNode. 68 69**Atomic service API**: This API can be used in atomic services since API version 12. 70 71**System capability**: SystemCapability.ArkUI.ArkUI.Full 72 73**Return value** 74 75| Type | Description | 76| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 77| [RenderNode](./js-apis-arkui-renderNode.md#rendernode) \| null | **RenderNode** instance. If the current FrameNode does not hold any RenderNode, **null** is returned. If the current FrameNode is a node created by a declarative component, **null** is returned.| 78 79**Example** 80 81```ts 82import { NodeController, FrameNode } from '@kit.ArkUI'; 83 84class MyNodeController extends NodeController { 85 private rootNode: FrameNode | null = null; 86 87 makeNode(uiContext: UIContext): FrameNode | null { 88 this.rootNode = new FrameNode(uiContext); 89 90 const renderNode = this.rootNode.getRenderNode(); 91 if (renderNode !== null) { 92 renderNode.size = { width: 100, height: 100 }; 93 renderNode.backgroundColor = 0XFFFF0000; 94 } 95 96 return this.rootNode; 97 } 98} 99 100@Entry 101@Component 102struct Index { 103 private myNodeController: MyNodeController = new MyNodeController(); 104 105 build() { 106 Row() { 107 NodeContainer(this.myNodeController) 108 } 109 } 110} 111``` 112### isModifiable<sup>12+</sup> 113 114isModifiable(): boolean 115 116Checks whether this FrameNode is modifiable. 117 118**Atomic service API**: This API can be used in atomic services since API version 12. 119 120**System capability**: SystemCapability.ArkUI.ArkUI.Full 121 122**Return value** 123 124| Type | Description | 125| ------- | ------------------------------------------------------------------------------------------------------------------------------------- | 126| boolean | Whether the current FrameNode is modifiable. When **false** is returned, the FrameNode does not support the **appendChild**, **insertChildAfter**, **removeChild**, and **clearChildren** operations.| 127 128**Example** 129 130See [Example of Node Operations](#example-of-node-operations). 131 132### appendChild<sup>12+</sup> 133 134appendChild(node: FrameNode): void 135 136Appends a child node to the end of this FrameNode. If this FrameNode is not modifiable, an exception is thrown. When **appendChild** is called, [typeNode](#typenode12) validates the type or number of child nodes. If the validation fails, an exception is thrown. For specific limitations, see [typeNode](#typenode12). 137 138**Atomic service API**: This API can be used in atomic services since API version 12. 139 140**System capability**: SystemCapability.ArkUI.ArkUI.Full 141 142**Parameters** 143 144| Name| Type | Mandatory| Description | 145| ------ | ----------------------- | ---- | --------------------- | 146| node | [FrameNode](#framenode) | Yes | Child node to append.<br>**NOTE**<br> The child node cannot be one created declaratively, which is not modifiable. Only declarative nodes obtained from a BuilderNode can be used as child nodes. If the child node does not meet the specifications, an exception is thrown.<br> The FrameNode cannot have a parent node. Otherwise, an exception is thrown.| 147 148**Error codes** 149 150| ID| Error Message | 151| -------- | -------------------------------- | 152| 100021 | The FrameNode is not modifiable. | 153 154**Example** 155 156See [Example of Node Operations](#example-of-node-operations). 157 158### insertChildAfter<sup>12+</sup> 159 160insertChildAfter(child: FrameNode, sibling: FrameNode | null): void 161 162Inserts a child node after the specified child node of this FrameNode. If this FrameNode is not modifiable, an exception is thrown. 163 164**Atomic service API**: This API can be used in atomic services since API version 12. 165 166**System capability**: SystemCapability.ArkUI.ArkUI.Full 167 168**Parameters** 169 170| Name | Type | Mandatory| Description | 171| ------- | ----------------------------------------- | ---- | ---------------------------------------------------------------------------- | 172| child | [FrameNode](#framenode) | Yes | Child node to add.<br>**NOTE**<br> The child node cannot be a declarative node, that is, a FrameNode that cannot be modified. Only declarative nodes obtained from a BuilderNode can be used as child nodes. If the child node does not meet the specifications, an exception is thrown.<br> The child node cannot have a parent node. Otherwise, an exception is thrown. | 173| sibling | [FrameNode](#framenode) \| null | Yes | Node after which the new child node will be inserted. If this parameter is left empty, the new node is inserted before the first subnode.| 174 175**Error codes** 176 177| ID| Error Message | 178| -------- | -------------------------------- | 179| 100021 | The FrameNode is not modifiable. | 180 181**Example** 182 183See [Example of Node Operations](#example-of-node-operations). 184 185### removeChild<sup>12+</sup> 186 187removeChild(node: FrameNode): void 188 189Deletes the specified child node from this FrameNode. If this FrameNode is not modifiable, an exception is thrown. 190 191**Atomic service API**: This API can be used in atomic services since API version 12. 192 193**System capability**: SystemCapability.ArkUI.ArkUI.Full 194 195**Parameters** 196 197| Name| Type | Mandatory| Description | 198| ------ | ----------------------- | ---- | ------------------ | 199| node | [FrameNode](#framenode) | Yes | Child node to delete.| 200 201**Error codes** 202 203| ID| Error Message | 204| -------- | -------------------------------- | 205| 100021 | The FrameNode is not modifiable. | 206 207**Example** 208 209See [Example of Node Operations](#example-of-node-operations). 210 211### clearChildren<sup>12+</sup> 212 213clearChildren(): void 214 215Clears all child nodes of this FrameNode. If this FrameNode is not modifiable, an exception is thrown. 216 217**Atomic service API**: This API can be used in atomic services since API version 12. 218 219**System capability**: SystemCapability.ArkUI.ArkUI.Full 220 221**Error codes** 222 223| ID| Error Message | 224| -------- | -------------------------------- | 225| 100021 | The FrameNode is not modifiable. | 226 227**Example** 228 229See [Example of Node Operations](#example-of-node-operations). 230 231### getChild<sup>12+</sup> 232 233getChild(index: number): FrameNode | null 234 235Obtains the child node in the specified position of this RenderNode. 236 237**Atomic service API**: This API can be used in atomic services since API version 12. 238 239**System capability**: SystemCapability.ArkUI.ArkUI.Full 240 241**Parameters** 242 243| Name| Type | Mandatory| Description | 244| ------ | ------ | ---- | -------------------------- | 245| index | number | Yes | Index of the child node to obtain.| 246 247**Return value** 248 249| Type | Description | 250| ------------------------------- | ------------------------------------------------------------- | 251| [FrameNode](#framenode) \| null | Child node obtained. If the FrameNode does not contain the specified child node, null is returned.| 252 253**Example** 254 255See [Example of Node Operations](#example-of-node-operations). 256 257### getChild<sup>15+</sup> 258 259getChild(index: number, expandMode?: ExpandMode): FrameNode | null 260 261Obtains a child node at a specified index from this FrameNode, with optional support for specifying the expansion mode of the child node. 262 263**Atomic service API**: This API can be used in atomic services since API version 15. 264 265**System capability**: SystemCapability.ArkUI.ArkUI.Full 266 267**Parameters** 268 269| Name| Type | Mandatory| Description | 270| ------ | ------ | ---- | -------------------------- | 271| index | number | Yes | Index of the child node to obtain.| 272| expandMode | [ExpandMode](#expandmode15) | No| Expansion mode of the child node.<br>Default value: **ExpandMode.Expand**| 273 274**Return value** 275 276| Type | Description | 277| ------------------------------- | ------------------------------------------------------------- | 278| [FrameNode](#framenode) \| null | Child node obtained. If the FrameNode does not contain the specified child node, null is returned.| 279 280**Example** 281 282See [Example of Node Operations in the LazyForEach Scenario](#example-of-node-operations-in-the-lazyforeach-scenario). 283 284### getFirstChildIndexWithoutExpand<sup>15+</sup> 285 286getFirstChildIndexWithoutExpand(): number 287 288Obtains the sequence number of the first child node of this node that is in the main node tree. The child node sequence numbers are calculated based on all child nodes. 289 290**Atomic service API**: This API can be used in atomic services since API version 15. 291 292**System capability**: SystemCapability.ArkUI.ArkUI.Full 293 294**Return value** 295 296| Type | Description | 297| ------ | ---------------------------------------- | 298| number | Sequence number of the first child node of this node that is in the main node tree.| 299 300**Example** 301 302See [Example of Node Operations in the LazyForEach Scenario](#example-of-node-operations-in-the-lazyforeach-scenario). 303 304### getLastChildIndexWithoutExpand<sup>15+</sup> 305 306getLastChildIndexWithoutExpand(): number 307 308Obtains the sequence number of the last child node of this node that is in the main node tree. The child node sequence numbers are calculated based on all child nodes. 309 310**Atomic service API**: This API can be used in atomic services since API version 15. 311 312**System capability**: SystemCapability.ArkUI.ArkUI.Full 313 314**Return value** 315 316| Type | Description | 317| ------ | ------------------------------------------ | 318| number | Sequence number of the last child node of this node that is in the main node tree.| 319 320**Example** 321 322See [Example of Node Operations in the LazyForEach Scenario](#example-of-node-operations-in-the-lazyforeach-scenario). 323 324### getFirstChild<sup>12+</sup> 325 326getFirstChild(): FrameNode | null 327 328Obtains the first child node of this FrameNode. 329 330**Atomic service API**: This API can be used in atomic services since API version 12. 331 332**System capability**: SystemCapability.ArkUI.ArkUI.Full 333 334**Return value** 335 336| Type | Description | 337| ------------------------------- | --------------------------------------------------------- | 338| [FrameNode](#framenode) \| null | First child node. If the FrameNode does not contain any child node, null is returned.| 339 340**Example** 341 342See [Example of Node Operations](#example-of-node-operations). 343 344### getNextSibling<sup>12+</sup> 345 346getNextSibling(): FrameNode | null 347 348Obtains the next sibling node of this FrameNode. 349 350**Atomic service API**: This API can be used in atomic services since API version 12. 351 352**System capability**: SystemCapability.ArkUI.ArkUI.Full 353 354**Return value** 355 356| Type | Description | 357| ------------------------------- | ------------------------------------------------------------------------------------ | 358| [FrameNode](#framenode) \| null | Next sibling node of the current FrameNode. If the FrameNode does not have the next sibling node, null is returned.| 359 360**Example** 361 362See [Example of Node Operations](#example-of-node-operations). 363 364### getPreviousSibling<sup>12+</sup> 365 366getPreviousSibling(): FrameNode | null 367 368Obtains the previous sibling node of this FrameNode. 369 370**Atomic service API**: This API can be used in atomic services since API version 12. 371 372**System capability**: SystemCapability.ArkUI.ArkUI.Full 373 374**Return value** 375 376| Type | Description | 377| -------------------------------- | ------------------------------------------------------------------------------------ | 378| [FrameNode](#framenode) \| null | Previous sibling node of the current FrameNode. If the FrameNode does not have the previous sibling node, null is returned.| 379 380**Example** 381 382See [Example of Node Operations](#example-of-node-operations). 383 384### getParent<sup>12+</sup> 385 386getParent(): FrameNode | null; 387 388Obtains the parent node of this FrameNode. 389 390**Atomic service API**: This API can be used in atomic services since API version 12. 391 392**System capability**: SystemCapability.ArkUI.ArkUI.Full 393 394**Return value** 395 396| Type | Description | 397| -------------------------------- | -------------------------------------------------------------------- | 398| [FrameNode](#framenode) \| null | Parent node of the current FrameNode. If the FrameNode does not contain a parent node, null is returned.| 399 400**Example** 401 402See [Example of Node Operations](#example-of-node-operations). 403 404 405### getChildrenCount<sup>12+</sup> 406 407 getChildrenCount(): number; 408 409Obtains the number of child nodes of this FrameNode. 410 411**Atomic service API**: This API can be used in atomic services since API version 12. 412 413**System capability**: SystemCapability.ArkUI.ArkUI.Full 414 415**Return value** 416 417| Type | Description | 418| -------- | ------------------------------- | 419| number | Number of child nodes of the current FrameNode.| 420 421**Example** 422 423See [Example of Node Operations](#example-of-node-operations). 424 425### getPositionToWindow<sup>12+</sup> 426 427 getPositionToWindow(): Position 428 429Obtains the position offset of this FrameNode relative to the window, in vp. 430 431**Atomic service API**: This API can be used in atomic services since API version 12. 432 433**System capability**: SystemCapability.ArkUI.ArkUI.Full 434 435**Return value** 436 437| Type | Description | 438| -------- | ------------------------------- | 439| [Position](./js-apis-arkui-graphics.md#position) | Position offset of the node relative to the window, in vp.| 440 441**Example** 442 443See [Example of Node Operations](#example-of-node-operations). 444 445 446### getPositionToParent<sup>12+</sup> 447 448getPositionToParent(): Position 449 450Obtains the position offset of this FrameNode relative to the parent component, in vp. 451 452**Atomic service API**: This API can be used in atomic services since API version 12. 453 454**System capability**: SystemCapability.ArkUI.ArkUI.Full 455 456**Return value** 457 458| Type | Description | 459| -------------------------------------------------------------- | --------------------------------------------------------------------- | 460| [Position](./js-apis-arkui-graphics.md#position) | Position offset of the node relative to the parent component, in vp.| 461 462**Example** 463 464See [Example of Node Operations](#example-of-node-operations). 465 466### getPositionToScreen<sup>12+</sup> 467 468 getPositionToScreen(): Position 469 470Obtains the position offset of this FrameNode relative to the screen, in vp. 471 472**Atomic service API**: This API can be used in atomic services since API version 12. 473 474**System capability**: SystemCapability.ArkUI.ArkUI.Full 475 476**Return value** 477 478| Type | Description | 479| -------- | ------------------------------- | 480| [Position](./js-apis-arkui-graphics.md#position) | Position offset of the node relative to the screen, in vp.| 481 482**Example** 483 484See [Example of Node Operations](#example-of-node-operations). 485 486 487### getPositionToParentWithTransform<sup>12+</sup> 488 489getPositionToParentWithTransform(): Position 490 491Obtains the position offset of this FrameNode relative to the parent component, taking into account drawing attributes such as **transform** and **translate**. The coordinates returned are the coordinates of the upper left corner during layout after transformation. The unit is vp. 492 493**Atomic service API**: This API can be used in atomic services since API version 12. 494 495**System capability**: SystemCapability.ArkUI.ArkUI.Full 496 497**Return value** 498 499| Type | Description | 500| -------------------------------------------------------------- | --------------------------------------------------------------------- | 501| [Position](./js-apis-arkui-graphics.md#position) | Position offset of the node relative to the parent component, in vp. If other drawing attributes (such as **transform** and **translate**) are set, the return value may slightly deviate due to the precision of floating point numbers.| 502 503**Example** 504 505See [Example of Node Operations](#example-of-node-operations). 506 507### getPositionToWindowWithTransform<sup>12+</sup> 508 509getPositionToWindowWithTransform(): Position 510 511Obtains the position offset of this FrameNode relative to the window, taking into account drawing attributes such as **transform** and **translate**. The coordinates returned are the coordinates of the upper left corner during layout after transformation. The unit is vp. 512 513**Atomic service API**: This API can be used in atomic services since API version 12. 514 515**System capability**: SystemCapability.ArkUI.ArkUI.Full 516 517**Return value** 518 519| Type | Description | 520| -------------------------------------------------------------- | --------------------------------------------------------------------- | 521| [Position](./js-apis-arkui-graphics.md#position) | Position offset of the node relative to the window, in vp. If other drawing attributes (such as **transform** and **translate**) are set, the return value may slightly deviate due to the precision of floating point numbers.| 522 523**Example** 524 525See [Example of Node Operations](#example-of-node-operations). 526 527### getPositionToScreenWithTransform<sup>12+</sup> 528 529getPositionToScreenWithTransform(): Position 530 531Obtains the position offset of this FrameNode relative to the screen, taking into account drawing attributes such as **transform** and **translate**. The coordinates returned are the coordinates of the upper left corner during layout after transformation. The unit is vp. 532 533**Atomic service API**: This API can be used in atomic services since API version 12. 534 535**System capability**: SystemCapability.ArkUI.ArkUI.Full 536 537**Return value** 538 539| Type | Description | 540| -------------------------------------------------------------- | --------------------------------------------------------------------- | 541| [Position](./js-apis-arkui-graphics.md#position) | Position offset of the node relative to the screen, in vp. If other drawing attributes (such as **transform** and **translate**) are set, the return value may slightly deviate due to the precision of floating point numbers.| 542 543**Example** 544 545See [Example of Node Operations](#example-of-node-operations). 546 547 548### getMeasuredSize<sup>12+</sup> 549 550getMeasuredSize(): Size 551 552Obtains the measured size of this FrameNode, in px. 553 554**Atomic service API**: This API can be used in atomic services since API version 12. 555 556**System capability**: SystemCapability.ArkUI.ArkUI.Full 557 558**Return value** 559 560| Type | Description | 561| -------------------------------------------------------------- | --------------------------------------------------------------------- | 562| [Size](./js-apis-arkui-graphics.md#size) | Measured size of the node, in px.| 563 564**Example** 565 566See [Example of Node Operations](#example-of-node-operations). 567 568 569### getLayoutPosition<sup>12+</sup> 570 571getLayoutPosition(): Position 572 573Obtains the position offset of this FrameNode relative to the parent component after layout, in px. The offset is the result of the parent component's layout on this node; therefore, the **offset** attribute that takes effect after layout and the **position** attribute that does not participate in layout do not affect this offset value. 574 575**Atomic service API**: This API can be used in atomic services since API version 12. 576 577**System capability**: SystemCapability.ArkUI.ArkUI.Full 578 579**Return value** 580 581| Type | Description | 582| -------------------------------------------------------------- | --------------------------------------------------------------------- | 583| [Position](./js-apis-arkui-graphics.md#position) | Position offset of the current FrameNode relative to the parent component after layout, in px.| 584 585**Example** 586 587See [Example of Node Operations](#example-of-node-operations). 588 589### getUserConfigBorderWidth<sup>12+</sup> 590 591getUserConfigBorderWidth(): Edges\<LengthMetrics\> 592 593Obtains the border width set by the user. 594 595**Atomic service API**: This API can be used in atomic services since API version 12. 596 597**System capability**: SystemCapability.ArkUI.ArkUI.Full 598 599**Return value** 600 601| Type | Description | 602| -------------------------------------------------------------- | --------------------------------------------------------------------- | 603| [Edges](./js-apis-arkui-graphics.md#edgest12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | Border width set by the user.| 604 605**Example** 606 607See [Example of Node Operations](#example-of-node-operations). 608 609### getUserConfigPadding<sup>12+</sup> 610 611getUserConfigPadding(): Edges\<LengthMetrics\> 612 613Obtains the padding set by the user. 614 615**Atomic service API**: This API can be used in atomic services since API version 12. 616 617**System capability**: SystemCapability.ArkUI.ArkUI.Full 618 619**Return value** 620 621| Type | Description | 622| -------------------------------------------------------------- | --------------------------------------------------------------------- | 623| [Edges](./js-apis-arkui-graphics.md#edgest12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | Padding set by the user.| 624 625**Example** 626 627See [Example of Node Operations](#example-of-node-operations). 628 629### getUserConfigMargin<sup>12+</sup> 630 631getUserConfigMargin(): Edges\<LengthMetrics\> 632 633Obtains the margin set by the user. 634 635**Atomic service API**: This API can be used in atomic services since API version 12. 636 637**System capability**: SystemCapability.ArkUI.ArkUI.Full 638 639**Return value** 640 641| Type | Description | 642| -------------------------------------------------------------- | --------------------------------------------------------------------- | 643| [Edges](./js-apis-arkui-graphics.md#edgest12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | Margin set by the user.| 644 645**Example** 646 647See [Example of Node Operations](#example-of-node-operations). 648 649### getUserConfigSize<sup>12+</sup> 650 651getUserConfigSize(): SizeT\<LengthMetrics\> 652 653Obtains the width and height set by the user. 654 655**Atomic service API**: This API can be used in atomic services since API version 12. 656 657**System capability**: SystemCapability.ArkUI.ArkUI.Full 658 659**Return value** 660 661| Type | Description | 662| ------------------------------------------------------------ | ---------------- | 663| [SizeT](./js-apis-arkui-graphics.md#sizett12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | Width and height set by the user.| 664 665**Example** 666 667See [Example of Node Operations](#example-of-node-operations). 668 669### getId<sup>12+</sup> 670 671getId(): string 672 673Obtains the node ID set by the user (the [ID](./arkui-ts/ts-universal-attributes-component-id.md) set in the universal attributes). 674 675**Atomic service API**: This API can be used in atomic services since API version 12. 676 677**System capability**: SystemCapability.ArkUI.ArkUI.Full 678 679**Return value** 680 681| Type | Description | 682| -------------------------------------------------------------- | --------------------------------------------------------------------- | 683| string | Node ID set by the user (the [ID](./arkui-ts/ts-universal-attributes-component-id.md) set in the universal attributes).| 684 685**Example** 686 687See [Example of Node Operations](#example-of-node-operations). 688 689### getUniqueId<sup>12+</sup> 690 691getUniqueId(): number 692 693Obtains the system-assigned unique ID of the node. 694 695**Atomic service API**: This API can be used in atomic services since API version 12. 696 697**System capability**: SystemCapability.ArkUI.ArkUI.Full 698 699**Return value** 700 701| Type | Description | 702| -------------------------------------------------------------- | --------------------------------------------------------------------- | 703| number | System-assigned unique ID of the node.| 704 705**Example** 706 707See [Example of Node Operations](#example-of-node-operations). 708 709### getNodeType<sup>12+</sup> 710 711getNodeType(): string 712 713Obtains the type of the node. Built-in component types are named after the components themselves, for example, the type of a **Button** component is Button. For custom components, if they have rendering content, their type is __Common__. 714 715**Atomic service API**: This API can be used in atomic services since API version 12. 716 717**System capability**: SystemCapability.ArkUI.ArkUI.Full 718 719**Return value** 720 721| Type | Description | 722| -------------------------------------------------------------- | --------------------------------------------------------------------- | 723| string | Type of the node.| 724 725**Example** 726 727See [Example of Node Operations](#example-of-node-operations). 728 729### getOpacity<sup>12+</sup> 730 731getOpacity(): number 732 733Obtains the opacity of the node. The minimum value is 0, and the maximum value is 1. 734 735**Atomic service API**: This API can be used in atomic services since API version 12. 736 737**System capability**: SystemCapability.ArkUI.ArkUI.Full 738 739**Return value** 740 741| Type | Description | 742| -------------------------------------------------------------- | --------------------------------------------------------------------- | 743| number | Opacity of the node.| 744 745**Example** 746 747See [Example of Node Operations](#example-of-node-operations). 748 749### isVisible<sup>12+</sup> 750 751isVisible(): boolean 752 753Obtains whether the node is visible. 754 755**Atomic service API**: This API can be used in atomic services since API version 12. 756 757**System capability**: SystemCapability.ArkUI.ArkUI.Full 758 759**Return value** 760 761| Type | Description | 762| -------------------------------------------------------------- | --------------------------------------------------------------------- | 763| boolean | Whether the node is visible.| 764 765**Example** 766 767See [Example of Node Operations](#example-of-node-operations). 768 769### isClipToFrame<sup>12+</sup> 770 771isClipToFrame(): boolean 772 773Checks whether the node is clipped to the component area. This API returns **true** after the [dispose](#dispose12) API is called to release the reference to the FrameNode. 774 775**Atomic service API**: This API can be used in atomic services since API version 12. 776 777**System capability**: SystemCapability.ArkUI.ArkUI.Full 778 779**Return value** 780 781| Type | Description | 782| -------------------------------------------------------------- | --------------------------------------------------------------------- | 783| boolean | Whether the node is clipped to the component area.| 784 785**Example** 786 787See [Example of Node Operations](#example-of-node-operations). 788 789### isAttached<sup>12+</sup> 790 791isAttached(): boolean 792 793Obtains whether the node is mounted to the main node tree. 794 795**Atomic service API**: This API can be used in atomic services since API version 12. 796 797**System capability**: SystemCapability.ArkUI.ArkUI.Full 798 799**Return value** 800 801| Type | Description | 802| -------------------------------------------------------------- | --------------------------------------------------------------------- | 803| boolean | Whether the node is mounted to the main node tree.| 804 805**Example** 806 807See [Example of Node Operations](#example-of-node-operations). 808 809### getInspectorInfo<sup>12+</sup> 810 811getInspectorInfo(): Object 812 813Obtains the structure information of the node, which is consistent with what is found in DevEco Studio's built-in <!--RP1-->ArkUI Inspector <!--RP1End-->tool. 814 815**Atomic service API**: This API can be used in atomic services since API version 12. 816 817**System capability**: SystemCapability.ArkUI.ArkUI.Full 818 819**Return value** 820 821| Type | Description | 822| -------------------------------------------------------------- | --------------------------------------------------------------------- | 823| Object | Structure information of the node.| 824 825**Example** 826 827See [Example of Node Operations](#example-of-node-operations). 828 829### getCustomProperty<sup>12+</sup> 830 831getCustomProperty(name: string): Object | undefined 832 833Obtains the component's custom property by its name. 834 835**Atomic service API**: This API can be used in atomic services since API version 12. 836 837**System capability**: SystemCapability.ArkUI.ArkUI.Full 838 839**Parameters** 840 841| Name| Type | Mandatory| Description | 842| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 843| name | string | Yes | Name of the custom property.| 844 845**Return value** 846 847| Type | Description | 848| -------------------------------------------------------------- | --------------------------------------------------------------------- | 849| Object \| undefined | Value of the custom property.| 850 851**Example** 852 853See [Example of Node Operations](#example-of-node-operations). 854 855### dispose<sup>12+</sup> 856 857dispose(): void 858 859Immediately releases the reference to the underlying FrameNode entity. 860 861**Atomic service API**: This API can be used in atomic services since API version 12. 862 863**System capability**: SystemCapability.ArkUI.ArkUI.Full 864 865> **NOTE** 866> 867> After the **dispose** API is called, the FrameNode object no longer corresponds to any entity FrameNode. In this case, attempts to call certain query APIs, such as [getMeasuredSize](#getmeasuredsize12) and [getLayoutPosition](#getlayoutposition12), will result in a JS crash in the application. 868> 869> To check whether the current FrameNode object corresponds to an entity FrameNode, you can use [getUniqueId](#getuniqueid12) API. A **UniqueId** value greater than 0 indicates that the object is associated with an entity FrameNode. 870 871**Example** 872 873```ts 874import { NodeController, FrameNode, BuilderNode } from '@kit.ArkUI'; 875 876@Component 877struct TestComponent { 878 build() { 879 Column() { 880 Text('This is a BuilderNode.') 881 .fontSize(16) 882 .fontWeight(FontWeight.Bold) 883 } 884 .width('100%') 885 .backgroundColor(Color.Gray) 886 } 887 888 aboutToAppear() { 889 console.error('aboutToAppear'); 890 } 891 892 aboutToDisappear() { 893 console.error('aboutToDisappear'); 894 } 895} 896 897@Builder 898function buildComponent() { 899 TestComponent() 900} 901 902class MyNodeController extends NodeController { 903 private rootNode: FrameNode | null = null; 904 private builderNode: BuilderNode<[]> | null = null; 905 906 makeNode(uiContext: UIContext): FrameNode | null { 907 this.rootNode = new FrameNode(uiContext); 908 this.builderNode = new BuilderNode(uiContext, { selfIdealSize: { width: 200, height: 100 } }); 909 this.builderNode.build(new WrappedBuilder(buildComponent)); 910 911 const rootRenderNode = this.rootNode.getRenderNode(); 912 if (rootRenderNode !== null) { 913 rootRenderNode.size = { width: 200, height: 200 }; 914 rootRenderNode.backgroundColor = 0xff00ff00; 915 rootRenderNode.appendChild(this.builderNode!.getFrameNode()!.getRenderNode()); 916 } 917 918 return this.rootNode; 919 } 920 921 disposeFrameNode() { 922 if (this.rootNode !== null && this.builderNode !== null) { 923 this.rootNode.removeChild(this.builderNode.getFrameNode()); 924 this.builderNode.dispose(); 925 926 this.rootNode.dispose(); 927 } 928 } 929 930 removeBuilderNode() { 931 const rootRenderNode = this.rootNode!.getRenderNode(); 932 if (rootRenderNode !== null && this.builderNode !== null && this.builderNode.getFrameNode() !== null) { 933 rootRenderNode.removeChild(this.builderNode!.getFrameNode()!.getRenderNode()); 934 } 935 } 936} 937 938@Entry 939@Component 940struct Index { 941 private myNodeController: MyNodeController = new MyNodeController(); 942 943 build() { 944 Column({ space: 4 }) { 945 NodeContainer(this.myNodeController) 946 Button('FrameNode dispose') 947 .onClick(() => { 948 this.myNodeController.disposeFrameNode(); 949 }) 950 .width('100%') 951 } 952 } 953} 954``` 955 956### commonAttribute<sup>12+</sup> 957 958get commonAttribute(): CommonAttribute 959 960Obtains the **CommonAttribute** object held in this FrameNode for setting common attributes. 961 962Note that only the attributes of a custom node can be modified. 963 964**Atomic service API**: This API can be used in atomic services since API version 12. 965 966**System capability**: SystemCapability.ArkUI.ArkUI.Full 967 968**Return value** 969 970| Type | Description | 971| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 972| CommonAttribute | **CommonAttribute** object held in the current FrameNode for setting common attributes.| 973 974> **NOTE** 975> 976> The visual representation of the FrameNode is similar to that of a [Stack](./arkui-ts/ts-container-stack.md) container that is aligned to the top start edge. 977> 978> For details about the supported attributes, see [CommonModifier](./arkui-ts/ts-universal-attributes-attribute-modifier.md#custom-modifier). 979 980**Example** 981 982See [Basic Event Example](#basic-event-example). 983 984### commonEvent<sup>12+</sup> 985 986get commonEvent(): UICommonEvent 987 988Obtains the **UICommonEvent** object held in this FrameNode to set basic events. The set basic events will compete with declaratively defined events for event handling without overriding them. If two event callbacks are set at the same time, the callback for the declaratively defined event is prioritized. 989 990In scenarios involving **LazyForEach**, where nodes may be destroyed and reconstructed, you need to reset or re-attach event listeners to the newly created nodes to ensure they respond to events correctly. 991 992**Atomic service API**: This API can be used in atomic services since API version 12. 993 994**System capability**: SystemCapability.ArkUI.ArkUI.Full 995 996**Return value** 997 998| Type | Description | 999| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 1000| [UICommonEvent](./arkui-ts/ts-uicommonevent.md#common-event-callback)| **UICommonEvent** object, which is used to set basic events.| 1001 1002**Example** 1003 1004See [Basic Event Example](#basic-event-example) and [Example of Using Basic Events in the LazyForEach Scenario](#example-of-using-basic-events-in-the-lazyforeach-scenario). 1005 1006### gestureEvent<sup>14+</sup> 1007 1008get gestureEvent(): UIGestureEvent 1009 1010Obtains the **UIGestureEvent** object held by this FrameNode, which is used to set gesture events bound to the component. Gesture events set using the **gestureEvent** API will not override gestures bound using the [declarative gesture API](./arkui-ts/ts-gesture-settings.md). If both APIs are used to set gestures, the declarative API takes precedence. 1011 1012**Atomic service API**: This API can be used in atomic services since API version 14. 1013 1014**System capability**: SystemCapability.ArkUI.ArkUI.Full 1015 1016**Return value** 1017 1018| Type | Description | 1019| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 1020| [UIGestureEvent](./arkui-ts/ts-uigestureevent.md) | **UIGestureEvent** object, which is used to set the gestures bound to the component.| 1021 1022**Example** 1023 1024For details, see [Gesture Event Example](#gesture-event-example). 1025 1026### onDraw<sup>12+</sup> 1027 1028onDraw?(context: DrawContext): void 1029 1030Called when this FrameNode performs content rendering. 1031 1032**Atomic service API**: This API can be used in atomic services since API version 12. 1033 1034**System capability**: SystemCapability.ArkUI.ArkUI.Full 1035 1036**Parameters** 1037 1038| Name | Type | Mandatory| Description | 1039| ------- | ------------------------------------------------------ | ---- | ---------------- | 1040| context | [DrawContext](./js-apis-arkui-graphics.md#drawcontext) | Yes | Graphics drawing context. The self-drawing area cannot exceed the component's own size.| 1041 1042**Example** 1043 1044See [Example of Customizing a Node](#example-of-customizing-a-node). 1045 1046### onMeasure<sup>12+</sup> 1047 1048onMeasure(constraint: LayoutConstraint): void 1049 1050Called when this FrameNode needs to determine its size. This API provides custom measurement and overrides the default measurement method. 1051 1052**Atomic service API**: This API can be used in atomic services since API version 12. 1053 1054**System capability**: SystemCapability.ArkUI.ArkUI.Full 1055 1056**Parameters** 1057 1058| Name | Type | Mandatory| Description | 1059| ------- | ------------------------------------------------------ | ---- | ---------------- | 1060| constraint | [LayoutConstraint](#layoutconstraint12) | Yes | Layout constraints used by the component for measurement.| 1061 1062**Example** 1063 1064See [Example of Customizing a Node](#example-of-customizing-a-node). 1065 1066### LayoutConstraint<sup>12+</sup> 1067 1068Describes the layout constraints of the component. 1069 1070**Atomic service API**: This API can be used in atomic services since API version 12. 1071 1072**System capability**: SystemCapability.ArkUI.ArkUI.Full 1073 1074| Name | Type | Mandatory | Description | 1075| -------------- | ------ | ----- | ------------------------------------------ | 1076| maxSize | [Size](./js-apis-arkui-graphics.md#size) | Yes | Maximum size. | 1077| minSize | [Size](./js-apis-arkui-graphics.md#size) | Yes | Minimum size. | 1078| percentReference | [Size](./js-apis-arkui-graphics.md#size) | Yes | Size reference for calculating the percentage of a child node. 1079 1080### onLayout<sup>12+</sup> 1081 1082onLayout(position: Position): void 1083 1084Called when this FrameNode needs to determine its layout. This API provides custom layout and overrides the default layout method. It can be used to specify how the FrameNode and its child nodes are positioned and sized within the layout. 1085 1086**Atomic service API**: This API can be used in atomic services since API version 12. 1087 1088**System capability**: SystemCapability.ArkUI.ArkUI.Full 1089 1090**Parameters** 1091 1092| Name | Type | Mandatory| Description | 1093| ------- | ------------------------------------------------------ | ---- | ---------------- | 1094| position | [Position](./js-apis-arkui-graphics.md#position) | Yes | Position information used in layout.| 1095 1096**Example** 1097 1098See [Example of Customizing a Node](#example-of-customizing-a-node). 1099 1100### setMeasuredSize<sup>12+</sup> 1101 1102setMeasuredSize(size: Size): void 1103 1104Sets the measured size of this FrameNode. The default unit is PX. If the configured width and height are negative numbers, the value is automatically set to 0. 1105 1106**Atomic service API**: This API can be used in atomic services since API version 12. 1107 1108**System capability**: SystemCapability.ArkUI.ArkUI.Full 1109 1110**Parameters** 1111 1112| Name | Type | Mandatory| Description | 1113| ------- | ------------------------------------------------------ | ---- | ---------------- | 1114| size | [Size](./js-apis-arkui-graphics.md#size) | Yes | Measured size of the FrameNode.| 1115 1116**Example** 1117 1118See [Example of Customizing a Node](#example-of-customizing-a-node). 1119 1120### setLayoutPosition<sup>12+</sup> 1121 1122setLayoutPosition(position: Position): void 1123 1124Sets the position of this FrameNode after layout. The default unit is PX. 1125 1126**Atomic service API**: This API can be used in atomic services since API version 12. 1127 1128**System capability**: SystemCapability.ArkUI.ArkUI.Full 1129 1130**Parameters** 1131 1132| Name | Type | Mandatory| Description | 1133| ------- | ------------------------------------------------------ | ---- | ---------------- | 1134| position | [Position](./js-apis-arkui-graphics.md#position) | Yes | Position of the FrameNode after layout.| 1135 1136**Example** 1137 1138See [Example of Customizing a Node](#example-of-customizing-a-node). 1139 1140### measure<sup>12+</sup> 1141 1142measure(constraint: LayoutConstraint): void 1143 1144Measures this FrameNode and calculates its size based on the layout constraints of the parent container. If the measurement method is overridden, the overridden method is called. It is recommended that this API be called in [onMeasure](#onmeasure12). 1145 1146**Atomic service API**: This API can be used in atomic services since API version 12. 1147 1148**System capability**: SystemCapability.ArkUI.ArkUI.Full 1149 1150**Parameters** 1151 1152| Name | Type | Mandatory| Description | 1153| ------- | ------------------------------------------------------ | ---- | ---------------- | 1154| constraint | [LayoutConstraint](#layoutconstraint12) | Yes | Parent container layout constraints used for measurement.| 1155 1156**Example** 1157 1158See [Example of Customizing a Node](#example-of-customizing-a-node). 1159 1160### layout<sup>12+</sup> 1161 1162layout(position: Position): void 1163 1164Lays out this FrameNode, specifying the layout positions for the FrameNode and its child nodes. If the layout method is overridden, the overridden method is called. It is recommended that this API be called in [onLayout](#onlayout12). 1165 1166**Atomic service API**: This API can be used in atomic services since API version 12. 1167 1168**System capability**: SystemCapability.ArkUI.ArkUI.Full 1169 1170**Parameters** 1171 1172| Name | Type | Mandatory| Description | 1173| ------- | ------------------------------------------------------ | ---- | ---------------- | 1174| position | [Position](./js-apis-arkui-graphics.md#position) | Yes | Position information used in layout.| 1175 1176**Example** 1177 1178See [Example of Customizing a Node](#example-of-customizing-a-node). 1179 1180### setNeedsLayout<sup>12+</sup> 1181 1182setNeedsLayout(): void 1183 1184Marks this FrameNode as needing layout, so that it will be relaid out in the next frame. 1185 1186**Atomic service API**: This API can be used in atomic services since API version 12. 1187 1188**System capability**: SystemCapability.ArkUI.ArkUI.Full 1189 1190**Example** 1191 1192See [Example of Customizing a Node](#example-of-customizing-a-node). 1193 1194### invalidate<sup>12+</sup> 1195 1196invalidate(): void 1197 1198Invalidates this FrameNode to trigger a re-rendering of the self-drawing content. 1199 1200**Atomic service API**: This API can be used in atomic services since API version 12. 1201 1202**System capability**: SystemCapability.ArkUI.ArkUI.Full 1203 1204### addComponentContent<sup>12+</sup> 1205 1206addComponentContent\<T>(content: ComponentContent\<T>): void 1207 1208Adds component content. The current node must be modifiable, which means the return value of [isModifiable](#ismodifiable12) must be **true**. If the node is not modifiable, an exception is thrown. 1209 1210**Atomic service API**: This API can be used in atomic services since API version 12. 1211 1212**System capability**: SystemCapability.ArkUI.ArkUI.Full 1213 1214**Parameters** 1215 1216| Name | Type | Mandatory| Description | 1217| ------- | ------------------------------------------------------ | ---- | ---------------- | 1218| content | [ComponentContent](./js-apis-arkui-ComponentContent.md#componentcontent)\<T> | Yes | Component content to display on the FrameNode.| 1219 1220**Error codes** 1221 1222| ID| Error Message | 1223| -------- | -------------------------------- | 1224| 100021 | The FrameNode is not modifiable. | 1225 1226```ts 1227import { NodeController, FrameNode, ComponentContent, typeNode } from '@kit.ArkUI'; 1228 1229@Builder 1230function buildText() { 1231 Column() { 1232 Text('hello') 1233 .width(50) 1234 .height(50) 1235 .backgroundColor(Color.Yellow) 1236 } 1237} 1238 1239class MyNodeController extends NodeController { 1240 makeNode(uiContext: UIContext): FrameNode | null { 1241 let node = new FrameNode(uiContext) 1242 node.commonAttribute.width(300).height(300).backgroundColor(Color.Red) 1243 let col = typeNode.createNode(uiContext, "Column") 1244 col.initialize({ space: 10 }) 1245 node.appendChild(col) 1246 let row4 = typeNode.createNode(uiContext, "Row") 1247 row4.attribute.width(200) 1248 .height(200) 1249 .borderWidth(1) 1250 .borderColor(Color.Black) 1251 .backgroundColor(Color.Green) 1252 let component = new ComponentContent<Object>(uiContext, wrapBuilder(buildText)) 1253 if (row4.isModifiable()) { 1254 row4.addComponentContent(component) 1255 col.appendChild(row4) 1256 } 1257 return node 1258 } 1259} 1260 1261@Entry 1262@Component 1263struct FrameNodeTypeTest { 1264 private myNodeController: MyNodeController = new MyNodeController(); 1265 1266 build() { 1267 Row() { 1268 NodeContainer(this.myNodeController); 1269 } 1270 } 1271} 1272``` 1273 1274### disposeTree<sup>12+</sup> 1275 1276disposeTree(): void 1277 1278Traverses down the tree and recursively releases the subtree with this node as the root. 1279 1280**Atomic service API**: This API can be used in atomic services since API version 12. 1281 1282**System capability**: SystemCapability.ArkUI.ArkUI.Full 1283 1284```ts 1285import { FrameNode, NodeController, BuilderNode } from '@kit.ArkUI'; 1286 1287@Component 1288struct TestComponent { 1289 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent2)); 1290 1291 build() { 1292 Column() { 1293 Text('This is a BuilderNode.') 1294 .fontSize(16) 1295 .fontWeight(FontWeight.Bold) 1296 NodeContainer(this.myNodeController) 1297 } 1298 .width('100%') 1299 .backgroundColor(Color.Gray) 1300 } 1301 1302 aboutToAppear() { 1303 console.error('BuilderNode aboutToAppear'); 1304 } 1305 1306 aboutToDisappear() { 1307 console.error('BuilderNode aboutToDisappear'); 1308 } 1309} 1310 1311@Component 1312struct TestComponent2 { 1313 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent3)); 1314 private myNodeController2: MyNodeController = new MyNodeController(wrapBuilder(buildComponent4)); 1315 1316 build() { 1317 Column() { 1318 Text('This is a BuilderNode 2.') 1319 .fontSize(16) 1320 .fontWeight(FontWeight.Bold) 1321 NodeContainer(this.myNodeController) 1322 NodeContainer(this.myNodeController2) 1323 } 1324 .width('100%') 1325 .backgroundColor(Color.Gray) 1326 } 1327 1328 aboutToAppear() { 1329 console.error('BuilderNode 2 aboutToAppear'); 1330 } 1331 1332 aboutToDisappear() { 1333 console.error('BuilderNode 2 aboutToDisappear'); 1334 } 1335} 1336 1337@Component 1338struct TestComponent3 { 1339 build() { 1340 Column() { 1341 Text('This is a BuilderNode 3.') 1342 .fontSize(16) 1343 .fontWeight(FontWeight.Bold) 1344 1345 } 1346 .width('100%') 1347 .backgroundColor(Color.Gray) 1348 } 1349 1350 aboutToAppear() { 1351 console.error('BuilderNode 3 aboutToAppear'); 1352 } 1353 1354 aboutToDisappear() { 1355 console.error('BuilderNode 3 aboutToDisappear'); 1356 } 1357} 1358 1359@Component 1360struct TestComponent4 { 1361 build() { 1362 Column() { 1363 Text('This is a BuilderNode 4.') 1364 .fontSize(16) 1365 .fontWeight(FontWeight.Bold) 1366 1367 } 1368 .width('100%') 1369 .backgroundColor(Color.Gray) 1370 } 1371 1372 aboutToAppear() { 1373 console.error('BuilderNode 4 aboutToAppear'); 1374 } 1375 1376 aboutToDisappear() { 1377 console.error('BuilderNode 4 aboutToDisappear'); 1378 } 1379} 1380 1381@Builder 1382function buildComponent() { 1383 TestComponent() 1384} 1385 1386@Builder 1387function buildComponent2() { 1388 TestComponent2() 1389} 1390 1391@Builder 1392function buildComponent3() { 1393 TestComponent3() 1394} 1395 1396@Builder 1397function buildComponent4() { 1398 TestComponent4() 1399} 1400 1401class MyNodeController extends NodeController { 1402 private rootNode: FrameNode | null = null; 1403 private builderNode: BuilderNode<[]> | null = null; 1404 private wrappedBuilder: WrappedBuilder<[]>; 1405 1406 constructor(builder: WrappedBuilder<[]>) { 1407 super(); 1408 this.wrappedBuilder = builder; 1409 } 1410 1411 makeNode(uiContext: UIContext): FrameNode | null { 1412 this.builderNode = new BuilderNode(uiContext, { selfIdealSize: { width: 200, height: 100 } }); 1413 this.builderNode.build(this.wrappedBuilder); 1414 1415 return this.builderNode.getFrameNode(); 1416 } 1417 1418 dispose() { 1419 if (this.builderNode !== null) { 1420 this.builderNode.getFrameNode()?.disposeTree() 1421 } 1422 } 1423 1424 removeBuilderNode() { 1425 const rootRenderNode = this.rootNode!.getRenderNode(); 1426 if (rootRenderNode !== null && this.builderNode !== null && this.builderNode.getFrameNode() !== null) { 1427 rootRenderNode.removeChild(this.builderNode!.getFrameNode()!.getRenderNode()); 1428 } 1429 } 1430} 1431 1432@Entry 1433@Component 1434struct Index { 1435 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent)); 1436 1437 build() { 1438 Column({ space: 4 }) { 1439 NodeContainer(this.myNodeController) 1440 Button('BuilderNode dispose') 1441 .onClick(() => { 1442 this.myNodeController.dispose(); 1443 }) 1444 .width('100%') 1445 Button('BuilderNode rebuild') 1446 .onClick(() => { 1447 this.myNodeController.rebuild(); 1448 }) 1449 .width('100%') 1450 } 1451 } 1452} 1453``` 1454 1455**Example** 1456 1457See [Example of Customizing a Node](#example-of-customizing-a-node). 1458 1459### setCrossLanguageOptions<sup>15+</sup> 1460 1461setCrossLanguageOptions(options: CrossLanguageOptions): void 1462 1463Sets the cross-language access options for this FrameNode. This API allows you to specify whether a FrameNode created in ArkTS can be accessed or modified by non-ArkTS languages. If the current FrameNode is not modifiable or does not support setting cross-language access options, an exception will be thrown. 1464 1465> **NOTE** 1466> 1467> Currently, only [Scroll](#scroll12) type [TypedFrameNode](#typedframenode12) supports setting cross-language access options. 1468 1469**Atomic service API**: This API can be used in atomic services since API version 15. 1470 1471**System capability**: SystemCapability.ArkUI.ArkUI.Full 1472 1473**Parameters** 1474 1475| Name | Type | Mandatory| Description | 1476| ------------ | ----------------------- | ---- | --------------------- | 1477| options | [CrossLanguageOptions](#crosslanguageoptions15) | Yes | Cross-language access options.| 1478 1479**Error codes** 1480 1481| ID| Error Message | 1482| -------- | -------------------------------- | 1483| 100022 | The FrameNode cannot be set whether to support cross-language common attribute setting. | 1484 1485**Example** 1486 1487See [Example of Node Operations](#example-of-node-operations). 1488 1489### getCrossLanguageOptions<sup>15+</sup> 1490 1491getCrossLanguageOptions(): CrossLanguageOptions 1492 1493Obtains the cross-language access options for this FrameNode. This API allows you to check whether a FrameNode created in ArkTS can be accessed or modified by non-ArkTS languages. 1494 1495**Atomic service API**: This API can be used in atomic services since API version 15. 1496 1497**System capability**: SystemCapability.ArkUI.ArkUI.Full 1498 1499**Return value** 1500 1501| Type | Description | 1502| ----------------------- | --------------------- | 1503| [CrossLanguageOptions](#crosslanguageoptions15) | Cross-language access options.| 1504 1505**Example** 1506 1507See [Example of Node Operations](#example-of-node-operations). 1508 1509## TypedFrameNode<sup>12+</sup> 1510 1511Inherits from [FrameNode](#framenode), used to declare a specific type of FrameNode. 1512 1513### Properties 1514 1515**Atomic service API**: This API can be used in atomic services since API version 12. 1516 1517**System capability**: SystemCapability.ArkUI.ArkUI.Full 1518 1519| Name | Type| Read Only| Optional| Description | 1520| ---------- | ---- | ---- | ---- | ------------------------------------------------------------ | 1521| initialize | C | No | No | Creates construction parameters of a component to set or update the initial value of the component.| 1522| attribute | T | No | No | Obtains the attribute setting object of a component to set or update the common and private attributes of the component.| 1523 1524> **NOTE** 1525> 1526> The [commonAttribute](#commonattribute12) API is only effective on **CustomFrameNode**. For **TypedFrameNode**, the behavior of** commonAttribute** is undefined. For setting universal attributes, it is recommended that you use the [attribute](#properties) API, such as **node.attribute.backgroundColor(Color.Pink)**, rather than [commonAttribute](#commonattribute12). 1527 1528## typeNode<sup>12+</sup> 1529 1530Provides APIs for creating a specific type of FrameNode, which can be mounted through the basic API of the FrameNode and be displayed using a placeholder container. 1531 1532When **typeNode** is used to create nodes such as **Text**, **Image**, **Select**, or **Toggle**, if the [UIContext](./js-apis-arkui-UIContext.md) instance corresponding to the passed **UIContext** is destroyed, calling this API will return an invalid FrameNode. This invalid node cannot be properly mounted or displayed. 1533 1534**Example** 1535 1536For details, see [Example of Customizing a Node of a Specific Type](#example-of-customizing-a node-of-a-specific-type). 1537 1538### Text<sup>12+</sup> 1539type Text = TypedFrameNode<TextInterface, TextAttribute> 1540 1541Represents a FrameNode of the **Text** type. This type of node does not allow child components to be added. 1542 1543**Atomic service API**: This API can be used in atomic services since API version 12. 1544 1545**System capability**: SystemCapability.ArkUI.ArkUI.Full 1546 1547| Type | Description | 1548| -------------------------------------------------- | ------------------------------------------------------------ | 1549| TypedFrameNode<TextInterface, TextAttribute> | FrameNode of the **Text** type.<br>**NOTE**<br> **TextInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Text** component.<br> **TextAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Text** component.| 1550 1551### createNode('Text')<sup>12+</sup> 1552createNode(context: UIContext, nodeType: 'Text'): Text 1553 1554Creates a FrameNode of the **Text** type. 1555 1556**Atomic service API**: This API can be used in atomic services since API version 12. 1557 1558**System capability**: SystemCapability.ArkUI.ArkUI.Full 1559 1560**Parameters** 1561 1562| Name| Type| Mandatory| Description | 1563| ------------------ | ------------------ | ------------------- | ------------------- | 1564| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 1565| nodeType | 'Text' | Yes| Node type, which is **Text** in this API.| 1566 1567**Return value** 1568 1569| Type | Description | 1570| ------------------ | ------------------ | 1571| [Text](#text12) | FrameNode node of the **Text** type.| 1572 1573**Example** 1574 1575<!--code_no_check--> 1576 1577```ts 1578typeNode.createNode(uiContext, 'Text'); 1579``` 1580 1581### Column<sup>12+</sup> 1582type Column = TypedFrameNode<ColumnInterface, ColumnAttribute> 1583 1584Represents a FrameNode of the **Column** type. 1585 1586**Atomic service API**: This API can be used in atomic services since API version 12. 1587 1588**System capability**: SystemCapability.ArkUI.ArkUI.Full 1589 1590| Type | Description | 1591| ------------------------------------------------------ | ------------------------------------------------------------ | 1592| TypedFrameNode<ColumnInterface, ColumnAttribute> | FrameNode of the **Column** type.<br>**NOTE**<br> **ColumnInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Column** component.<br> **ColumnAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Column** component.| 1593 1594### createNode('Column')<sup>12+</sup> 1595createNode(context: UIContext, nodeType: 'Column'): Column 1596 1597Creates a FrameNode of the **Column** type. 1598 1599**Atomic service API**: This API can be used in atomic services since API version 12. 1600 1601**System capability**: SystemCapability.ArkUI.ArkUI.Full 1602 1603**Parameters** 1604 1605| Name| Type| Mandatory| Description | 1606| ------------------ | ------------------ | ------------------- | ------------------- | 1607| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 1608| nodeType | 'Column' | Yes| Node type, which is **Column** in this API.| 1609 1610**Return value** 1611 1612| Type | Description | 1613| ------------------ | ------------------ | 1614| [Column](#column12) | FrameNode node of the **Column** type.| 1615 1616**Example** 1617 1618<!--code_no_check--> 1619 1620```ts 1621typeNode.createNode(uiContext, 'Column'); 1622``` 1623### Row<sup>12+</sup> 1624type Row = TypedFrameNode<RowInterface, RowAttribute> 1625 1626Represents a FrameNode of the **Row** type. 1627 1628**Atomic service API**: This API can be used in atomic services since API version 12. 1629 1630**System capability**: SystemCapability.ArkUI.ArkUI.Full 1631 1632| Type | Description | 1633| ------------------------------------------------ | ------------------------------------------------------------ | 1634| TypedFrameNode<RowInterface, RowAttribute> | FrameNode of the **Row** type.<br>**NOTE**<br> **RowInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Row** component.<br> **RowAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Row** component.| 1635 1636### createNode('Row')<sup>12+</sup> 1637createNode(context: UIContext, nodeType: 'Row'): Row 1638 1639Creates a FrameNode of the Row type. 1640 1641**Atomic service API**: This API can be used in atomic services since API version 12. 1642 1643**System capability**: SystemCapability.ArkUI.ArkUI.Full 1644 1645**Parameters** 1646 1647| Name| Type| Mandatory| Description | 1648| ------------------ | ------------------ | ------------------- | ------------------- | 1649| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 1650| nodeType | 'Row' | Yes| Node type, which is Row in this API.| 1651 1652**Return value** 1653 1654| Type | Description | 1655| ------------------ | ------------------ | 1656| [Row](#row12) | FrameNode node of the **Row** type.| 1657 1658**Example** 1659 1660<!--code_no_check--> 1661 1662```ts 1663typeNode.createNode(uiContext, 'Row'); 1664``` 1665### Stack<sup>12+</sup> 1666type Stack = TypedFrameNode<StackInterface, StackAttribute> 1667 1668Represents a FrameNode of the **Stack** type. 1669 1670**Atomic service API**: This API can be used in atomic services since API version 12. 1671 1672**System capability**: SystemCapability.ArkUI.ArkUI.Full 1673 1674| Type | Description | 1675| ---------------------------------------------------- | ------------------------------------------------------------ | 1676| TypedFrameNode<StackInterface, StackAttribute> | FrameNode of the **Stack** type.<br>**NOTE**<br> **StackInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Stack** component.<br> **StackAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Stack** component.| 1677 1678### createNode('Stack')<sup>12+</sup> 1679createNode(context: UIContext, nodeType: 'Stack'): Stack 1680 1681Creates a FrameNode of the **Stack** type. 1682 1683**Atomic service API**: This API can be used in atomic services since API version 12. 1684 1685**System capability**: SystemCapability.ArkUI.ArkUI.Full 1686 1687**Parameters** 1688 1689| Name| Type| Mandatory| Description | 1690| ------------------ | ------------------ | ------------------- | ------------------- | 1691| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 1692| nodeType | 'Stack' | Yes| Node type, which is **Stack** in this API.| 1693 1694**Return value** 1695 1696| Type | Description | 1697| ------------------ | ------------------ | 1698| [Stack](#stack12) | FrameNode node of the **Stack** type.| 1699 1700**Example** 1701 1702<!--code_no_check--> 1703 1704```ts 1705typeNode.createNode(uiContext, 'Stack'); 1706``` 1707### GridRow<sup>12+</sup> 1708type GridRow = TypedFrameNode<GridRowInterface, GridRowAttribute> 1709 1710Represents a FrameNode of the **GridRow** type. This type of node only allows child components of the **GridCol** type. 1711 1712**Atomic service API**: This API can be used in atomic services since API version 12. 1713 1714**System capability**: SystemCapability.ArkUI.ArkUI.Full 1715 1716| Type | Description | 1717| -------------------------------------------------------- | ------------------------------------------------------------ | 1718| TypedFrameNode<GridRowInterface, GridRowAttribute> | FrameNode of the **GridRow** type.<br>**NOTE**<br> **GridRowInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **GridRow** component.<br> **GridRowAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **GridRow** component.| 1719 1720### createNode('GridRow')<sup>12+</sup> 1721createNode(context: UIContext, nodeType: 'GridRow'): GridRow 1722 1723Creates a FrameNode of the **GridRow** type. 1724 1725**Atomic service API**: This API can be used in atomic services since API version 12. 1726 1727**System capability**: SystemCapability.ArkUI.ArkUI.Full 1728 1729**Parameters** 1730 1731| Name| Type| Mandatory| Description | 1732| ------------------ | ------------------ | ------------------- | ------------------- | 1733| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 1734| nodeType | 'GridRow' | Yes| Node type, which is **GridRow** in this API.| 1735 1736**Return value** 1737 1738| Type | Description | 1739| ------------------ | ------------------ | 1740| [GridRow](#gridrow12) | FrameNode node of the **GridRow** type.| 1741 1742**Example** 1743 1744<!--code_no_check--> 1745 1746```ts 1747typeNode.createNode(uiContext, 'GridRow'); 1748``` 1749### GridCol<sup>12+</sup> 1750type GridCol = TypedFrameNode<GridColInterface, GridColAttribute> 1751 1752Represents a FrameNode of the **GridCol** type. This type of node does not allow child components to be added. 1753 1754**Atomic service API**: This API can be used in atomic services since API version 12. 1755 1756**System capability**: SystemCapability.ArkUI.ArkUI.Full 1757 1758| Type | Description | 1759| -------------------------------------------------------- | ------------------------------------------------------------ | 1760| TypedFrameNode<GridColInterface, GridColAttribute> | FrameNode of the GridCol type.<br>**NOTE**<br> **GridColInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **GridCol** component.<br> **GridColAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **GridCol** component.| 1761 1762### createNode('GridCol')<sup>12+</sup> 1763createNode(context: UIContext, nodeType: 'GridCol'): GridCol 1764 1765Creates a FrameNode of the **GridCol** type. 1766 1767**Atomic service API**: This API can be used in atomic services since API version 12. 1768 1769**System capability**: SystemCapability.ArkUI.ArkUI.Full 1770 1771**Parameters** 1772 1773| Name| Type| Mandatory| Description | 1774| ------------------ | ------------------ | ------------------- | ------------------- | 1775| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 1776| nodeType | 'GridCol' | Yes| Node type, which is **GridCol** in this API.| 1777 1778**Return value** 1779 1780| Type | Description | 1781| ------------------ | ------------------ | 1782| [GridCol](#gridcol12) | FrameNode node of the **GridCol** type.| 1783 1784**Example** 1785 1786<!--code_no_check--> 1787 1788```ts 1789typeNode.createNode(uiContext, 'GridCol'); 1790``` 1791### Flex<sup>12+</sup> 1792type Flex = TypedFrameNode<FlexInterface, FlexAttribute> 1793 1794Represents a FrameNode of the Flex type. 1795 1796**Atomic service API**: This API can be used in atomic services since API version 12. 1797 1798**System capability**: SystemCapability.ArkUI.ArkUI.Full 1799 1800| Type | Description | 1801| -------------------------------------------------- | ------------------------------------------------------------ | 1802| TypedFrameNode<FlexInterface, FlexAttribute> | FrameNode of the Flex type.<br>**NOTE**<br> **FlexInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Flex** component.<br> **FlexAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Flex** component.| 1803 1804### createNode('Flex')<sup>12+</sup> 1805createNode(context: UIContext, nodeType: 'Flex'): Flex 1806 1807Creates a FrameNode of the Flex type. 1808 1809**Atomic service API**: This API can be used in atomic services since API version 12. 1810 1811**System capability**: SystemCapability.ArkUI.ArkUI.Full 1812 1813**Parameters** 1814 1815| Name| Type| Mandatory| Description | 1816| ------------------ | ------------------ | ------------------- | ------------------- | 1817| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 1818| nodeType | 'Flex' | Yes| Node type, which is **Flex** in this API.| 1819 1820**Return value** 1821 1822| Type | Description | 1823| ------------------ | ------------------ | 1824| [Flex](#flex12) | FrameNode node of the **Flex** type.| 1825 1826**Example** 1827 1828<!--code_no_check--> 1829 1830```ts 1831typeNode.createNode(uiContext, 'Flex'); 1832``` 1833### Swiper<sup>12+</sup> 1834type Swiper = TypedFrameNode<SwiperInterface, SwiperAttribute> 1835 1836Represents a FrameNode of the **Swiper** type. 1837 1838**Atomic service API**: This API can be used in atomic services since API version 12. 1839 1840**System capability**: SystemCapability.ArkUI.ArkUI.Full 1841 1842| Type | Description | 1843| ------------------------------------------------------ | ------------------------------------------------------------ | 1844| TypedFrameNode<SwiperInterface, SwiperAttribute> | FrameNode of the **Swiper** type.<br>**NOTE**<br> **SwiperInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Swiper** component.<br> **SwiperAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Swiper** component.| 1845 1846### createNode('Swiper')<sup>12+</sup> 1847createNode(context: UIContext, nodeType: 'Swiper'): Swiper 1848 1849Creates a FrameNode of the **Swiper** type. 1850 1851**Atomic service API**: This API can be used in atomic services since API version 12. 1852 1853**System capability**: SystemCapability.ArkUI.ArkUI.Full 1854 1855**Parameters** 1856 1857| Name| Type| Mandatory| Description | 1858| ------------------ | ------------------ | ------------------- | ------------------- | 1859| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 1860| nodeType | 'Swiper' | Yes| Node type, which is **Swiper** in this API.| 1861 1862**Return value** 1863 1864| Type | Description | 1865| ------------------ | ------------------ | 1866| [Swiper](#swiper12) | FrameNode node of the **Swiper** type.| 1867 1868**Example** 1869 1870<!--code_no_check--> 1871 1872```ts 1873typeNode.createNode(uiContext, 'Swiper'); 1874``` 1875### Progress<sup>12+</sup> 1876type Progress = TypedFrameNode<ProgressInterface, ProgressAttribute> 1877 1878Represents a FrameNode of the **Progress** type. This type of node does not allow child components to be added. 1879 1880**Atomic service API**: This API can be used in atomic services since API version 12. 1881 1882**System capability**: SystemCapability.ArkUI.ArkUI.Full 1883 1884| Type | Description | 1885| ---------------------------------------------------------- | ------------------------------------------------------------ | 1886| TypedFrameNode<ProgressInterface, ProgressAttribute> | FrameNode of the **Progress** type.<br>**NOTE**<br> **ProgressInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Progress** component.<br> **ProgressAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Progress** component.| 1887 1888### createNode('Progress')<sup>12+</sup> 1889createNode(context: UIContext, nodeType: 'Progress'): Progress 1890 1891Creates a FrameNode of the **Progress** type. 1892 1893**Atomic service API**: This API can be used in atomic services since API version 12. 1894 1895**System capability**: SystemCapability.ArkUI.ArkUI.Full 1896 1897**Parameters** 1898 1899| Name| Type| Mandatory| Description | 1900| ------------------ | ------------------ | ------------------- | ------------------- | 1901| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 1902| nodeType | 'Progress' | Yes| Node type, which is **Progress** in this API.| 1903 1904**Return value** 1905 1906| Type | Description | 1907| ------------------ | ------------------ | 1908| [Progress](#progress12) | FrameNode node of the **Progress** type.| 1909 1910**Example** 1911 1912<!--code_no_check--> 1913 1914```ts 1915typeNode.createNode(uiContext, 'Progress'); 1916``` 1917### Scroll<sup>12+</sup> 1918type Scroll = TypedFrameNode<ScrollInterface, ScrollAttribute> 1919 1920Represents a FrameNode of the Scroll type. This type of node allows only one child component to be added. 1921 1922**Atomic service API**: This API can be used in atomic services since API version 12. 1923 1924**System capability**: SystemCapability.ArkUI.ArkUI.Full 1925 1926| Type | Description | 1927| ------------------------------------------------------ | ------------------------------------------------------------ | 1928| TypedFrameNode<ScrollInterface, ScrollAttribute> | FrameNode of the Scroll type.<br>**NOTE**<br> **ScrollInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Scroll** component.<br> **ScrollAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Scroll** component.| 1929 1930### createNode('Scroll')<sup>12+</sup> 1931createNode(context: UIContext, nodeType: 'Scroll'): Scroll 1932 1933Creates a FrameNode of the **Scroll** type. 1934 1935**Atomic service API**: This API can be used in atomic services since API version 12. 1936 1937**System capability**: SystemCapability.ArkUI.ArkUI.Full 1938 1939**Parameters** 1940 1941| Name| Type| Mandatory| Description | 1942| ------------------ | ------------------ | ------------------- | ------------------- | 1943| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 1944| nodeType | 'Scroll' | Yes| Node type, which is **Scroll** in this API.| 1945 1946**Return value** 1947 1948| Type | Description | 1949| ------------------ | ------------------ | 1950| [Scroll](#scroll12) | FrameNode node of the **Scroll** type.| 1951 1952**Example** 1953 1954<!--code_no_check--> 1955 1956```ts 1957typeNode.createNode(uiContext, 'Scroll'); 1958``` 1959 1960### getAttribute('Scroll')<sup>15+</sup> 1961getAttribute(node: FrameNode, nodeType: 'Scroll'): ScrollAttribute | undefined 1962 1963Obtains the attributes of a **Scroll** node. If the node is not created using ArkTS, cross-language access must be enabled; otherwise, **undefined** is returned. This API does not support declaratively created nodes. 1964 1965**Atomic service API**: This API can be used in atomic services since API version 15. 1966 1967**System capability**: SystemCapability.ArkUI.ArkUI.Full 1968 1969**Parameters** 1970 1971| Name| Type| Mandatory| Description | 1972| ------------------ | ------------------ | ------------------- | ------------------- | 1973| node | [FrameNode](./js-apis-arkui-frameNode.md) | Yes | Target node from which to obtain attributes.| 1974| nodeType | 'Scroll' | Yes| Node type.| 1975 1976**Return value** 1977 1978| Type | Description | 1979| ------------------ | ------------------ | 1980| ScrollAttribute \| undefined | Attributes of the **Scroll** node, or **undefined** if they fail to be obtained.| 1981 1982**Example** 1983 1984<!--code_no_check--> 1985 1986```ts 1987typeNode.getAttribute(node, 'Scroll'); 1988``` 1989 1990### bindController('Scroll')<sup>15+</sup> 1991bindController(node: FrameNode, controller: Scroller, nodeType: 'Scroll'): void 1992 1993Binds a **Scroller** controller to a **Scroll** node. If the node is not created using ArkTS, cross-language access must be enabled; otherwise, an exception is returned. This API does not support declaratively created nodes. 1994 1995**Atomic service API**: This API can be used in atomic services since API version 15. 1996 1997**System capability**: SystemCapability.ArkUI.ArkUI.Full 1998 1999**Parameters** 2000 2001| Name| Type| Mandatory| Description | 2002| ------------------ | ------------------ | ------------------- | ------------------- | 2003| node | [FrameNode](./js-apis-arkui-frameNode.md) | Yes | Target node to which the scroll controller is bound.| 2004| controller | [Scroller](arkui-ts/ts-container-scroll.md#scroller) | Yes | Scroll controller.| 2005| nodeType | 'Scroll' | Yes| Node type, which is **Scroll** in this API.| 2006 2007**Error codes** 2008 2009| ID| Error Message | 2010| -------- | -------------------------------- | 2011| 401 | Parameter error. Possible causes: 1. The type of the node is error; 2.The node is null or undefined. | 2012| 100021 | The FrameNode is not modifiable. | 2013 2014**Example** 2015 2016<!--code_no_check--> 2017 2018```ts 2019typeNode.bindController(node, scroller, 'Scroll'); 2020``` 2021### RelativeContainer<sup>12+</sup> 2022type RelativeContainer = TypedFrameNode<RelativeContainerInterface, RelativeContainerAttribute> 2023 2024Represents a FrameNode of the **RelativeContainer** type. 2025 2026**Atomic service API**: This API can be used in atomic services since API version 12. 2027 2028**System capability**: SystemCapability.ArkUI.ArkUI.Full 2029 2030| Type | Description | 2031| ------------------------------------------------------------ | ------------------------------------------------------------ | 2032| TypedFrameNode<RelativeContainerInterface, RelativeContainerAttribute> | FrameNode of the RelativeContainer type.<br>**NOTE**<br> **RelativeContainerInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **RelativeContainer** component.<br> **RelativeContainerAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **RelativeContainer** component.| 2033 2034### createNode('RelativeContainer')<sup>12+</sup> 2035createNode(context: UIContext, nodeType: 'RelativeContainer'): RelativeContainer 2036 2037Creates a FrameNode of the **RelativeContainer** type. 2038 2039**Atomic service API**: This API can be used in atomic services since API version 12. 2040 2041**System capability**: SystemCapability.ArkUI.ArkUI.Full 2042 2043**Parameters** 2044 2045| Name| Type| Mandatory| Description | 2046| ------------------ | ------------------ | ------------------- | ------------------- | 2047| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2048| nodeType | 'RelativeContainer' | Yes| Node type, which is **RelativeContainer** in this API.| 2049 2050**Return value** 2051 2052| Type | Description | 2053| ------------------ | ------------------ | 2054| [RelativeContainer](#relativecontainer12) | FrameNode node of the **RelativeContainer** type.| 2055 2056**Example** 2057 2058<!--code_no_check--> 2059 2060```ts 2061typeNode.createNode(uiContext, 'RelativeContainer'); 2062``` 2063### Divider<sup>12+</sup> 2064type Divider = TypedFrameNode<DividerInterface, DividerAttribute> 2065 2066Represents a FrameNode of the Divider type. This type of node does not allow child components to be added. 2067 2068**Atomic service API**: This API can be used in atomic services since API version 12. 2069 2070**System capability**: SystemCapability.ArkUI.ArkUI.Full 2071 2072| Type | Description | 2073| -------------------------------------------------------- | ------------------------------------------------------------ | 2074| TypedFrameNode<DividerInterface, DividerAttribute> | FrameNode of the **Divider** type.<br>**NOTE**<br> **DividerInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Divider** component.<br> **DividerAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Divider** component.| 2075 2076### createNode('Divider')<sup>12+</sup> 2077createNode(context: UIContext, nodeType: 'Divider'): Divider 2078 2079Creates a FrameNode of the **Divider** type. 2080 2081**Atomic service API**: This API can be used in atomic services since API version 12. 2082 2083**System capability**: SystemCapability.ArkUI.ArkUI.Full 2084 2085**Parameters** 2086 2087| Name| Type| Mandatory| Description | 2088| ------------------ | ------------------ | ------------------- | ------------------- | 2089| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2090| nodeType | 'Divider' | Yes| Node type, which is **Divider** in this API.| 2091 2092**Return value** 2093 2094| Type | Description | 2095| ------------------ | ------------------ | 2096| [Divider](#divider12) | FrameNode node of the **Divider** type.| 2097 2098**Example** 2099 2100<!--code_no_check--> 2101 2102```ts 2103typeNode.createNode(uiContext, 'Divider'); 2104``` 2105### LoadingProgress<sup>12+</sup> 2106type LoadingProgress = TypedFrameNode<LoadingProgressInterface, LoadingProgressAttribute> 2107 2108Represents a FrameNode of the **LoadingProgress** type. This type of node does not allow child components to be added. 2109 2110**Atomic service API**: This API can be used in atomic services since API version 12. 2111 2112**System capability**: SystemCapability.ArkUI.ArkUI.Full 2113 2114| Type | Description | 2115| ------------------------------------------------------------ | ------------------------------------------------------------ | 2116| TypedFrameNode<LoadingProgressInterface, LoadingProgressAttribute> | FrameNode of the **LoadingProgress** type.<br>**NOTE**<br> **LoadingProgressInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **LoadingProgress** component.<br> **LoadingProgressAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **LoadingProgress** component.| 2117 2118### createNode('LoadingProgress')<sup>12+</sup> 2119createNode(context: UIContext, nodeType: 'LoadingProgress'): LoadingProgress 2120 2121Creates a FrameNode of the **LoadingProgress** type. 2122 2123**Atomic service API**: This API can be used in atomic services since API version 12. 2124 2125**System capability**: SystemCapability.ArkUI.ArkUI.Full 2126 2127**Parameters** 2128 2129| Name| Type| Mandatory| Description | 2130| ------------------ | ------------------ | ------------------- | ------------------- | 2131| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2132| nodeType | 'LoadingProgress' | Yes| Node type, which is **LoadingProgress** in this API.| 2133 2134**Return value** 2135 2136| Type | Description | 2137| ------------------ | ------------------ | 2138| [LoadingProgress](#loadingprogress12) | FrameNode node of the **LoadingProgress** type.| 2139 2140**Example** 2141 2142<!--code_no_check--> 2143 2144```ts 2145typeNode.createNode(uiContext, 'LoadingProgress'); 2146``` 2147### Search<sup>12+</sup> 2148type Search = TypedFrameNode<SearchInterface, SearchAttribute> 2149 2150Represents a FrameNode of the **Search** type. 2151 2152**Atomic service API**: This API can be used in atomic services since API version 12. 2153 2154**System capability**: SystemCapability.ArkUI.ArkUI.Full 2155 2156| Type | Description | 2157| ------------------------------------------------------ | ------------------------------------------------------------ | 2158| TypedFrameNode<SearchInterface, SearchAttribute> | FrameNode of the **Search** type.<br>**NOTE**<br> **SearchInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Search** component.<br> **SearchAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Search** component.| 2159 2160### createNode('Search')<sup>12+</sup> 2161createNode(context: UIContext, nodeType: 'Search'): Search 2162 2163Creates a FrameNode of the **Search** type. 2164 2165**Atomic service API**: This API can be used in atomic services since API version 12. 2166 2167**System capability**: SystemCapability.ArkUI.ArkUI.Full 2168 2169**Parameters** 2170 2171| Name| Type| Mandatory| Description | 2172| ------------------ | ------------------ | ------------------- | ------------------- | 2173| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2174| nodeType | 'Search' | Yes| Node type, which is **Search** in this API.| 2175 2176**Return value** 2177 2178| Type | Description | 2179| ------------------ | ------------------ | 2180| [Search](#search12) | FrameNode node of the **Search** type.| 2181 2182**Example** 2183 2184<!--code_no_check--> 2185 2186```ts 2187typeNode.createNode(uiContext, 'Search'); 2188``` 2189### Blank<sup>12+</sup> 2190type Blank = TypedFrameNode<BlankInterface, BlankAttribute> 2191 2192Represents a FrameNode of the **Blank** type. This type of node does not allow child components to be added. 2193 2194**Atomic service API**: This API can be used in atomic services since API version 12. 2195 2196**System capability**: SystemCapability.ArkUI.ArkUI.Full 2197 2198| Type | Description | 2199| ---------------------------------------------------- | ------------------------------------------------------------ | 2200| TypedFrameNode<BlankInterface, BlankAttribute> | FrameNode of the **Blank** type.<br>**NOTE**<br> **BlankInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Blank** component.<br> **BlankAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Blank** component.| 2201 2202### createNode('Blank')<sup>12+</sup> 2203createNode(context: UIContext, nodeType: 'Blank'): Blank; 2204 2205Creates a FrameNode of the **Blank** type. 2206 2207**Atomic service API**: This API can be used in atomic services since API version 12. 2208 2209**System capability**: SystemCapability.ArkUI.ArkUI.Full 2210 2211**Parameters** 2212 2213| Name| Type| Mandatory| Description | 2214| ------------------ | ------------------ | ------------------- | ------------------- | 2215| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2216| nodeType | 'Blank' | Yes| Node type, which is **Blank** in this API.| 2217 2218**Return value** 2219 2220| Type | Description | 2221| ------------------ | ------------------ | 2222| [Blank](#blank12) | FrameNode node of the **Blank** type.| 2223 2224**Example** 2225 2226<!--code_no_check--> 2227 2228```ts 2229typeNode.createNode(uiContext, 'Blank'); 2230``` 2231### Image<sup>12+</sup> 2232type Image = TypedFrameNode<ImageInterface, ImageAttribute> 2233 2234Represents a FrameNode of the **Image** type. This type of node does not allow child components to be added. 2235 2236**Atomic service API**: This API can be used in atomic services since API version 12. 2237 2238**System capability**: SystemCapability.ArkUI.ArkUI.Full 2239 2240| Type | Description | 2241| ---------------------------------------------------- | ------------------------------------------------------------ | 2242| TypedFrameNode<ImageInterface, ImageAttribute> | FrameNode of the **Image** type.<br>**NOTE**<br> **ImageInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Image** component.<br> **ImageAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Image** component.| 2243 2244### createNode('Image')<sup>12+</sup> 2245createNode(context: UIContext, nodeType: 'Image'): Image 2246 2247Creates a FrameNode of the **Image** type. 2248 2249**Atomic service API**: This API can be used in atomic services since API version 12. 2250 2251**System capability**: SystemCapability.ArkUI.ArkUI.Full 2252 2253**Parameters** 2254 2255| Name| Type| Mandatory| Description | 2256| ------------------ | ------------------ | ------------------- | ------------------- | 2257| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2258| nodeType | 'Image' | Yes| Node type, which is **Image** in this API.| 2259 2260**Return value** 2261 2262| Type | Description | 2263| ------------------ | ------------------ | 2264| [Image](#image12) | FrameNode node of the **Image** type.| 2265 2266**Example** 2267 2268<!--code_no_check--> 2269 2270```ts 2271typeNode.createNode(uiContext, 'Image'); 2272``` 2273### List<sup>12+</sup> 2274type List = TypedFrameNode<ListInterface, ListAttribute> 2275 2276Represents a FrameNode of the **List** type. This type of node only allows child components of the **ListItem** and **ListItemGroup** types. 2277 2278**Atomic service API**: This API can be used in atomic services since API version 12. 2279 2280**System capability**: SystemCapability.ArkUI.ArkUI.Full 2281 2282| Type | Description | 2283| -------------------------------------------------- | ------------------------------------------------------------ | 2284| TypedFrameNode<ListInterface, ListAttribute> | FrameNode of the **List** type.<br>**NOTE**<br> **ListInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **List** component.<br> **ListAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **List** component.| 2285 2286### createNode('List')<sup>12+</sup> 2287createNode(context: UIContext, nodeType: 'List'): List 2288 2289Creates a FrameNode of the **List** type. 2290 2291**Atomic service API**: This API can be used in atomic services since API version 12. 2292 2293**System capability**: SystemCapability.ArkUI.ArkUI.Full 2294 2295**Parameters** 2296 2297| Name| Type| Mandatory| Description | 2298| ------------------ | ------------------ | ------------------- | ------------------- | 2299| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2300| nodeType | 'List' | Yes| Node type, which is **List** in this API.| 2301 2302**Return value** 2303 2304| Type | Description | 2305| ------------------ | ------------------ | 2306| [List](#list12) | FrameNode node of the **List** type.| 2307 2308**Example** 2309 2310<!--code_no_check--> 2311 2312```ts 2313typeNode.createNode(uiContext, 'List'); 2314``` 2315### ListItem<sup>12+</sup> 2316type ListItem = TypedFrameNode<ListItemInterface, ListItemAttribute> 2317 2318Represents a FrameNode of the **ListItem** type. 2319 2320**Atomic service API**: This API can be used in atomic services since API version 12. 2321 2322**System capability**: SystemCapability.ArkUI.ArkUI.Full 2323 2324| Type | Description | 2325| ---------------------------------------------------------- | ------------------------------------------------------------ | 2326| TypedFrameNode<ListItemInterface, ListItemAttribute> | FrameNode of the **ListItem** type.<br>**NOTE**<br> **ListItemInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **ListItem** component.<br> **ListItemAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **ListItem** component.| 2327 2328### createNode('ListItem')<sup>12+</sup> 2329createNode(context: UIContext, nodeType: 'ListItem'): ListItem 2330 2331Creates a FrameNode of the **ListItem** type. 2332 2333**Atomic service API**: This API can be used in atomic services since API version 12. 2334 2335**System capability**: SystemCapability.ArkUI.ArkUI.Full 2336 2337**Parameters** 2338 2339| Name| Type| Mandatory| Description | 2340| ------------------ | ------------------ | ------------------- | ------------------- | 2341| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2342| nodeType | 'ListItem' | Yes| Node type, which is **ListItem** in this API.| 2343 2344**Return value** 2345 2346| Type | Description | 2347| ------------------ | ------------------ | 2348| [ListItem](#listitem12) | FrameNode node of the **ListItem** type.| 2349 2350**Example** 2351 2352<!--code_no_check--> 2353 2354```ts 2355typeNode.createNode(uiContext, 'ListItem'); 2356``` 2357 2358### TextInput<sup>12+</sup> 2359type TextInput = TypedFrameNode<TextInputInterface, TextInputAttribute> 2360 2361Represents a FrameNode of the **TextInput** type. 2362 2363**Atomic service API**: This API can be used in atomic services since API version 12. 2364 2365**System capability**: SystemCapability.ArkUI.ArkUI.Full 2366 2367| Type | Description | 2368| ------------------------------------------------------------ | ------------------------------------------------------------ | 2369| TypedFrameNode<TextInputInterface, TextInputAttribute> | FrameNode of the **TextInput** type.<br>**NOTE**<br> **TextInputInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **TextInput** component.<br> **TextInputAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **TextInput** component.| 2370 2371### createNode('TextInput')<sup>12+</sup> 2372createNode(context: UIContext, nodeType: 'TextInput'): TextInput 2373 2374Creates a FrameNode of the **TextInput** type. 2375 2376**Atomic service API**: This API can be used in atomic services since API version 12. 2377 2378**System capability**: SystemCapability.ArkUI.ArkUI.Full 2379 2380**Parameters** 2381 2382| Name| Type| Mandatory| Description | 2383| ------------------ | ------------------ | ------------------- | ------------------- | 2384| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2385| nodeType | 'TextInput' | Yes| Node type, which is **TextInput** in this API.| 2386 2387**Return value** 2388 2389| Type | Description | 2390| ------------------ | ------------------ | 2391| [TextInput](#textinput12) | FrameNode node of the **TextInput** type.| 2392 2393**Example** 2394 2395<!--code_no_check--> 2396 2397```ts 2398typeNode.createNode(uiContext, 'TextInput'); 2399``` 2400 2401### Button<sup>12+</sup> 2402type Button = TypedFrameNode<ButtonInterface, ButtonAttribute> 2403 2404Represents a FrameNode of the **Button** type. When created in child component mode, this type of node allows only one child component to be added. When created in label mode, it does not child components to be added. 2405 2406**Atomic service API**: This API can be used in atomic services since API version 12. 2407 2408**System capability**: SystemCapability.ArkUI.ArkUI.Full 2409 2410| Type | Description | 2411| ------------------------------------------------------ | ------------------------------------------------------------ | 2412| TypedFrameNode<ButtonInterface, ButtonAttribute> | FrameNode of the **Button** type.<br>**NOTE**<br> **ButtonInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Button** component.<br> **ButtonAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Button** component.<br> If a value is specified for the **label** parameter, a **Button** component is created in label mode. This component cannot contain child components, and any attempt to set child components will result in an exception. The mode in which the **Button** component is created cannot be dynamically modified in subsequent **initialize** calls. As such, to include child components, do not set the **label** parameter during the first **initialize** call.<br> When created in child component mode, a **Button** component can contain a single child component. Any attempt to set multiple child components will result in an exception.| 2413 2414### createNode('Button')<sup>12+</sup> 2415createNode(context: UIContext, nodeType: 'Button'): Button 2416 2417Creates a FrameNode of the **Button** type. 2418 2419**Atomic service API**: This API can be used in atomic services since API version 12. 2420 2421**System capability**: SystemCapability.ArkUI.ArkUI.Full 2422 2423**Parameters** 2424 2425| Name| Type| Mandatory| Description | 2426| ------------------ | ------------------ | ------------------- | ------------------- | 2427| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2428| nodeType | 'Button' | Yes| Node type, which is **Button** in this API.| 2429 2430**Return value** 2431 2432| Type | Description | 2433| ------------------ | ------------------ | 2434| [Button](#button12) | FrameNode node of the **Button** type.| 2435 2436**Example** 2437 2438<!--code_no_check--> 2439 2440```ts 2441typeNode.createNode(uiContext, 'Button'); 2442``` 2443 2444### ListItemGroup<sup>12+</sup> 2445type ListItemGroup = TypedFrameNode<ListItemGroupInterface, ListItemGroupAttribute> 2446 2447Represents a FrameNode of the **ListItemGroup** type. This type of node only allows child components of the **ListItem** type. 2448 2449**Atomic service API**: This API can be used in atomic services since API version 12. 2450 2451**System capability**: SystemCapability.ArkUI.ArkUI.Full 2452 2453| Type | Description | 2454| ------------------------------------------------------------ | ------------------------------------------------------------ | 2455| TypedFrameNode<ListItemGroupInterface, ListItemGroupAttribute> | FrameNode of the **ListItemGroup** type.<br>**NOTE**<br> **ListItemGroupInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **ListItemGroup** component.<br> **ListItemGroupAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **ListItemGroup** component.| 2456 2457### createNode('ListItemGroup')<sup>12+</sup> 2458createNode(context: UIContext, nodeType: 'ListItemGroup'): ListItemGroup 2459 2460Creates a FrameNode of the **ListItemGroup** type. 2461 2462**Atomic service API**: This API can be used in atomic services since API version 12. 2463 2464**System capability**: SystemCapability.ArkUI.ArkUI.Full 2465 2466**Parameters** 2467 2468| Name| Type| Mandatory| Description | 2469| ------------------ | ------------------ | ------------------- | ------------------- | 2470| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2471| nodeType | 'ListItemGroup' | Yes| Node type, which is **ListItemGroup** in this API.| 2472 2473**Return value** 2474 2475| Type | Description | 2476| ------------------ | ------------------ | 2477| [ListItemGroup](#listitemgroup12) | FrameNode node of the **ListItemGroup** type.| 2478 2479**Example** 2480 2481<!--code_no_check--> 2482 2483```ts 2484typeNode.createNode(uiContext, 'ListItemGroup'); 2485``` 2486 2487### WaterFlow<sup>12+</sup> 2488type WaterFlow = TypedFrameNode<WaterFlowInterface, WaterFlowAttribute> 2489 2490Represents a FrameNode of the **WaterFlow** type. This type of node only allows child components of the **FlowItem** type. 2491 2492**Atomic service API**: This API can be used in atomic services since API version 12. 2493 2494**System capability**: SystemCapability.ArkUI.ArkUI.Full 2495 2496| Type | Description | 2497| ------------------------------------------------------------ | ------------------------------------------------------------ | 2498| TypedFrameNode<WaterFlowInterface, WaterFlowAttribute> | FrameNode of the **WaterFlow** type.<br>**NOTE**<br> **WaterFlowInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **WaterFlow** component.<br> **WaterFlowAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **WaterFlow** component.| 2499 2500### createNode('WaterFlow')<sup>12+</sup> 2501createNode(context: UIContext, nodeType: 'WaterFlow'): WaterFlow 2502 2503Creates a FrameNode of the **WaterFlow** type. 2504 2505**Atomic service API**: This API can be used in atomic services since API version 12. 2506 2507**System capability**: SystemCapability.ArkUI.ArkUI.Full 2508 2509**Parameters** 2510 2511| Name| Type| Mandatory| Description | 2512| ------------------ | ------------------ | ------------------- | ------------------- | 2513| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2514| nodeType | 'WaterFlow' | Yes| Node type, which is **WaterFlow** in this API.| 2515 2516**Return value** 2517 2518| Type | Description | 2519| ------------------ | ------------------ | 2520| [WaterFlow](#waterflow12) | FrameNode node of the **WaterFlow** type.| 2521 2522**Example** 2523 2524<!--code_no_check--> 2525 2526```ts 2527typeNode.createNode(uiContext, 'WaterFlow'); 2528``` 2529 2530### FlowItem<sup>12+</sup> 2531type FlowItem = TypedFrameNode<FlowItemInterface, FlowItemAttribute> 2532 2533Represents a FrameNode of the **FlowItem** type. This type of node allows only one child component to be added. 2534 2535**Atomic service API**: This API can be used in atomic services since API version 12. 2536 2537**System capability**: SystemCapability.ArkUI.ArkUI.Full 2538 2539| Type | Description | 2540| ---------------------------------------------------------- | ------------------------------------------------------------ | 2541| TypedFrameNode<FlowItemInterface, FlowItemAttribute> | FrameNode of the **FlowItem** type.<br>**NOTE**<br> **FlowItemInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **FlowItem** component.<br> **FlowItemAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **FlowItem** component.| 2542 2543### createNode('FlowItem')<sup>12+</sup> 2544createNode(context: UIContext, nodeType: 'FlowItem'): FlowItem 2545 2546Creates a FrameNode of the **FlowItem** type. 2547 2548**Atomic service API**: This API can be used in atomic services since API version 12. 2549 2550**System capability**: SystemCapability.ArkUI.ArkUI.Full 2551 2552**Parameters** 2553 2554| Name| Type| Mandatory| Description | 2555| ------------------ | ------------------ | ------------------- | ------------------- | 2556| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2557| nodeType | 'FlowItem' | Yes| Node type, which is **FlowItem** in this API.| 2558 2559**Return value** 2560 2561| Type | Description | 2562| ------------------ | ------------------ | 2563| [FlowItem](#flowitem12) | FrameNode node of the **FlowItem** type.| 2564 2565**Example** 2566 2567<!--code_no_check--> 2568 2569```ts 2570typeNode.createNode(uiContext, 'FlowItem'); 2571``` 2572 2573### XComponent<sup>12+</sup> 2574type XComponent = TypedFrameNode<XComponentInterface, XComponentAttribute> 2575 2576Represents a FrameNode of the **XComponent** type. 2577 2578**Atomic service API**: This API can be used in atomic services since API version 12. 2579 2580**System capability**: SystemCapability.ArkUI.ArkUI.Full 2581 2582| Type | Description | 2583| ------------------------------------------------------------ | ------------------------------------------------------------ | 2584| TypedFrameNode<XComponentInterface, XComponentAttribute> | FrameNode of the **XComponent** type.<br>**NOTE**<br> **XComponentInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **XComponent** component.<br> **XComponentAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **XComponent** component.| 2585 2586### createNode('XComponent')<sup>12+</sup> 2587createNode(context: UIContext, nodeType: 'XComponent'): XComponent 2588 2589Creates a FrameNode of the **XComponent** type. 2590 2591**Atomic service API**: This API can be used in atomic services since API version 12. 2592 2593**System capability**: SystemCapability.ArkUI.ArkUI.Full 2594 2595**Parameters** 2596 2597| Name| Type| Mandatory| Description | 2598| ------------------ | ------------------ | ------------------- | ------------------- | 2599| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2600| nodeType | 'XComponent' | Yes| Node type, which is **XComponent** in this API.| 2601 2602**Return value** 2603 2604| Type | Description | 2605| ------------------ | ------------------ | 2606| [XComponent](#xcomponent12) | FrameNode node of the **XComponent** type.| 2607 2608**Example** 2609 2610<!--code_no_check--> 2611 2612```ts 2613typeNode.createNode(uiContext, 'XComponent'); 2614``` 2615 2616### createNode('XComponent')<sup>12+</sup> 2617createNode(context: UIContext, nodeType: 'XComponent', options: XComponentOptions): XComponent 2618 2619Creates a FrameNode of the **XComponent** type based on the settings specified in **options**. 2620 2621**Atomic service API**: This API can be used in atomic services since API version 12. 2622 2623**System capability**: SystemCapability.ArkUI.ArkUI.Full 2624 2625**Parameters** 2626 2627| Name| Type| Mandatory| Description | 2628| ------------------ | ------------------ | ------------------- | ------------------- | 2629| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2630| nodeType | 'XComponent' | Yes| Node type, which is XComponent in this API.| 2631| options | [XComponentOptions](./arkui-ts/ts-basic-components-xcomponent.md#xcomponentoptions12) | Yes| Options of the **XComponent**.| 2632 2633**Return value** 2634 2635| Type | Description | 2636| ------------------ | ------------------ | 2637| [XComponent](#xcomponent12) | FrameNode node of the **XComponent** type.| 2638 2639**Example** 2640 2641<!--code_no_check--> 2642 2643```ts 2644let controller: XComponentController = new XComponentController(); 2645let options: XComponentOptions = { 2646 type: XComponentType.TEXTURE, 2647 controller: controller 2648}; 2649typeNode.createNode(uiContext, 'XComponent', options); 2650``` 2651 2652### QRCode<sup>14+</sup> 2653type QRCode = TypedFrameNode<QRCodeInterface, QRCodeAttribute> 2654 2655Represents a FrameNode of the **QRCode** type. 2656 2657**Atomic service API**: This API can be used in atomic services since API version 14. 2658 2659**System capability**: SystemCapability.ArkUI.ArkUI.Full 2660 2661| Type | Description | 2662| ----------------------------- | -------------------- | 2663| TypedFrameNode<QRCodeInterface, QRCodeAttribute> | FrameNode of the **QRCode** type.<br>**NOTE**<br> **QRCodeInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **QRCode** component.<br> **QRCodeAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **QRCode** component.| 2664 2665### createNode('QRCode')<sup>14+</sup> 2666createNode(context: UIContext, nodeType: 'QRCode'): QRCode 2667 2668Creates a FrameNode of the **QRCode** type. 2669 2670**Atomic service API**: This API can be used in atomic services since API version 14. 2671 2672**System capability**: SystemCapability.ArkUI.ArkUI.Full 2673 2674**Parameters** 2675 2676| Name| Type| Mandatory| Description | 2677| ------------------ | ------------------ | ------------------- | ------------------- | 2678| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2679| nodeType | 'QRCode' | Yes| Node type, which is **QRCode** in this API.| 2680 2681**Return value** 2682 2683| Type | Description | 2684| ------------------ | ------------------ | 2685| [QRCode](#qrcode14) | FrameNode node of the **QRCode** type.| 2686 2687**Example** 2688 2689<!--code_no_check--> 2690 2691```ts 2692typeNode.createNode(uiContext, 'QRCode'); 2693``` 2694 2695### Badge<sup>14+</sup> 2696type Badge = TypedFrameNode<BadgeInterface, BadgeAttribute> 2697 2698Represents a FrameNode of the **Badge** type. 2699 2700**Atomic service API**: This API can be used in atomic services since API version 14. 2701 2702**System capability**: SystemCapability.ArkUI.ArkUI.Full 2703 2704| Type | Description | 2705| ----------------------------- | -------------------- | 2706| TypedFrameNode<BadgeInterface, BadgeAttribute> | FrameNode of the **Badge** type.<br>**NOTE**<br> **BadgeInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Badge** component.<br> **BadgeAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Badge** component.| 2707 2708### createNode('Badge')<sup>14+</sup> 2709createNode(context: UIContext, nodeType: 'Badge'): Badge 2710 2711Creates a FrameNode of the **Badge** type. 2712 2713**Atomic service API**: This API can be used in atomic services since API version 14. 2714 2715**System capability**: SystemCapability.ArkUI.ArkUI.Full 2716 2717**Parameters** 2718 2719| Name| Type| Mandatory| Description | 2720| ------------------ | ------------------ | ------------------- | ------------------- | 2721| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2722| nodeType | 'Badge' | Yes| Node type, which is **Badge** in this API.| 2723 2724**Return value** 2725 2726| Type | Description | 2727| ------------------ | ------------------ | 2728| [Badge](#badge14) | FrameNode node of the **Badge** type.| 2729 2730**Example** 2731 2732<!--code_no_check--> 2733 2734```ts 2735typeNode.createNode(uiContext, 'Badge'); 2736``` 2737 2738### Grid<sup>14+</sup> 2739type Grid = TypedFrameNode<GridInterface, GridAttribute> 2740 2741Represents a FrameNode of the **Grid** type. 2742 2743**Atomic service API**: This API can be used in atomic services since API version 14. 2744 2745**System capability**: SystemCapability.ArkUI.ArkUI.Full 2746 2747| Type | Description | 2748| ----------------------------- | -------------------- | 2749| TypedFrameNode<GridInterface, GridAttribute> | FrameNode of the **Grid** type.<br>**NOTE**<br> **GridInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Grid** component.<br> **GridAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Grid** component.| 2750 2751### createNode('Grid')<sup>14+</sup> 2752createNode(context: UIContext, nodeType: 'Grid'): Grid 2753 2754Creates a FrameNode of the **Grid** type. 2755 2756**Atomic service API**: This API can be used in atomic services since API version 14. 2757 2758**System capability**: SystemCapability.ArkUI.ArkUI.Full 2759 2760**Parameters** 2761 2762| Name| Type| Mandatory| Description | 2763| ------------------ | ------------------ | ------------------- | ------------------- | 2764| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2765| nodeType | 'Grid' | Yes| Node type, which is **Grid** in this API.| 2766 2767**Return value** 2768 2769| Type | Description | 2770| ------------------ | ------------------ | 2771| [Grid](#grid14) | FrameNode node of the **Grid** type.| 2772 2773**Example** 2774 2775<!--code_no_check--> 2776 2777```ts 2778typeNode.createNode(uiContext, 'Grid'); 2779``` 2780 2781### GridItem<sup>14+</sup> 2782type GridItem = TypedFrameNode<GridItemInterface, GridItemAttribute> 2783 2784Represents a FrameNode of the **GridItem** type. 2785 2786**Atomic service API**: This API can be used in atomic services since API version 14. 2787 2788**System capability**: SystemCapability.ArkUI.ArkUI.Full 2789 2790| Type | Description | 2791| ----------------------------- | -------------------- | 2792| TypedFrameNode<GridItemInterface, GridItemAttribute> | FrameNode of the **GridItem** type.<br>**NOTE**<br> **GridItemInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **GridItem** component.<br> **GridItemAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **GridItem** component.| 2793 2794### createNode('GridItem')<sup>14+</sup> 2795createNode(context: UIContext, nodeType: 'GridItem'): GridItem 2796 2797Creates a FrameNode of the **GridItem** type. 2798 2799**Atomic service API**: This API can be used in atomic services since API version 14. 2800 2801**System capability**: SystemCapability.ArkUI.ArkUI.Full 2802 2803**Parameters** 2804 2805| Name| Type| Mandatory| Description | 2806| ------------------ | ------------------ | ------------------- | ------------------- | 2807| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2808| nodeType | 'GridItem' | Yes| Node type, which is **GridItem** in this API.| 2809 2810**Return value** 2811 2812| Type | Description | 2813| ------------------ | ------------------ | 2814| [GridItem](#griditem14) | FrameNode node of the **GridItem** type.| 2815 2816**Example** 2817 2818<!--code_no_check--> 2819 2820```ts 2821typeNode.createNode(uiContext, 'GridItem'); 2822``` 2823 2824### TextClock<sup>14+</sup> 2825type TextClock = TypedFrameNode<TextClockInterface, TextClockAttribute> 2826 2827Represents a FrameNode of the **TextClock** type. 2828 2829**Atomic service API**: This API can be used in atomic services since API version 14. 2830 2831**System capability**: SystemCapability.ArkUI.ArkUI.Full 2832 2833| Type | Description | 2834| ----------------------------- | -------------------- | 2835| TypedFrameNode<TextClockInterface, TextClockAttribute> | FrameNode of the **TextClock** type.<br>**NOTE**<br> **TextClockInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **TextClock** component.<br> **TextClockAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **TextClock** component.| 2836 2837### createNode('TextClock')<sup>14+</sup> 2838createNode(context: UIContext, nodeType: 'TextClock'): TextClock 2839 2840Creates a FrameNode of the **TextClock** type. 2841 2842**Atomic service API**: This API can be used in atomic services since API version 14. 2843 2844**System capability**: SystemCapability.ArkUI.ArkUI.Full 2845 2846**Parameters** 2847 2848| Name| Type| Mandatory| Description | 2849| ------------------ | ------------------ | ------------------- | ------------------- | 2850| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2851| nodeType | 'TextClock' | Yes| Node type, which is **TextClock** in this API.| 2852 2853**Return value** 2854 2855| Type | Description | 2856| ------------------ | ------------------ | 2857| [TextClock](#textclock14) | FrameNode node of the **TextClock** type.| 2858 2859**Example** 2860 2861<!--code_no_check--> 2862 2863```ts 2864typeNode.createNode(uiContext, 'TextClock'); 2865``` 2866 2867### TextTimer<sup>14+</sup> 2868type TextTimer = TypedFrameNode<TextTimerInterface, TextTimerAttribute> 2869 2870Represents a FrameNode of the **TextTimer** type. 2871 2872**Atomic service API**: This API can be used in atomic services since API version 14. 2873 2874**System capability**: SystemCapability.ArkUI.ArkUI.Full 2875 2876| Type | Description | 2877| ----------------------------- | -------------------- | 2878| TypedFrameNode<TextTimerInterface, TextTimerAttribute> | FrameNode of the **TextTimer** type.<br>**NOTE**<br> **TextTimerInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **TextTimer** component.<br> **TextTimerAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **TextTimer** component.| 2879 2880### createNode('TextTimer')<sup>14+</sup> 2881createNode(context: UIContext, nodeType: 'TextTimer'): TextTimer 2882 2883Creates a FrameNode of the **TextTimer** type. 2884 2885**Atomic service API**: This API can be used in atomic services since API version 14. 2886 2887**System capability**: SystemCapability.ArkUI.ArkUI.Full 2888 2889**Parameters** 2890 2891| Name| Type| Mandatory| Description | 2892| ------------------ | ------------------ | ------------------- | ------------------- | 2893| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2894| nodeType | 'TextTimer' | Yes| Node type, which is **TextTimer** in this API.| 2895 2896**Return value** 2897 2898| Type | Description | 2899| ------------------ | ------------------ | 2900| [TextTimer](#texttimer14) | FrameNode node of the **TextTimer** type.| 2901 2902**Example** 2903 2904<!--code_no_check--> 2905 2906```ts 2907typeNode.createNode(uiContext, 'TextTimer'); 2908``` 2909 2910### Marquee<sup>14+</sup> 2911type Marquee = TypedFrameNode<MarqueeInterface, MarqueeAttribute> 2912 2913Represents a FrameNode of the **Marquee** type. 2914 2915**Atomic service API**: This API can be used in atomic services since API version 14. 2916 2917**System capability**: SystemCapability.ArkUI.ArkUI.Full 2918 2919| Type | Description | 2920| ----------------------------- | -------------------- | 2921| TypedFrameNode<MarqueeInterface, MarqueeAttribute> | FrameNode of the **Marquee** type.<br>**NOTE**<br> **MarqueeInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Marquee** component.<br> **MarqueeAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **Marquee** component.| 2922 2923### createNode('Marquee')<sup>14+</sup> 2924createNode(context: UIContext, nodeType: 'Marquee'): Marquee 2925 2926Creates a FrameNode of the **Marquee** type. 2927 2928**Atomic service API**: This API can be used in atomic services since API version 14. 2929 2930**System capability**: SystemCapability.ArkUI.ArkUI.Full 2931 2932**Parameters** 2933 2934| Name| Type| Mandatory| Description | 2935| ------------------ | ------------------ | ------------------- | ------------------- | 2936| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2937| nodeType | 'Marquee' | Yes| Node type, which is **Marquee** in this API.| 2938 2939**Return value** 2940 2941| Type | Description | 2942| ------------------ | ------------------ | 2943| [Marquee](#marquee14) | FrameNode node of the **Marquee** type.| 2944 2945**Example** 2946 2947<!--code_no_check--> 2948 2949```ts 2950typeNode.createNode(uiContext, 'Marquee'); 2951``` 2952 2953### TextArea<sup>14+</sup> 2954type TextArea = TypedFrameNode<TextAreaInterface, TextAreaAttribute> 2955 2956Represents a FrameNode of the **TextArea** type. 2957 2958**Atomic service API**: This API can be used in atomic services since API version 14. 2959 2960**System capability**: SystemCapability.ArkUI.ArkUI.Full 2961 2962| Type | Description | 2963| ----------------------------- | -------------------- | 2964| TypedFrameNode<TextAreaInterface, TextAreaAttribute> | FrameNode of the **TextArea** type.<br>**NOTE**<br> **TextAreaInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **TextArea** component.<br> **TextAreaAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **TextArea** component.| 2965 2966### createNode('TextArea')<sup>14+</sup> 2967createNode(context: UIContext, nodeType: 'TextArea'): TextArea 2968 2969Creates a FrameNode of the **TextArea** type. 2970 2971**Atomic service API**: This API can be used in atomic services since API version 14. 2972 2973**System capability**: SystemCapability.ArkUI.ArkUI.Full 2974 2975**Parameters** 2976 2977| Name| Type| Mandatory| Description | 2978| ------------------ | ------------------ | ------------------- | ------------------- | 2979| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 2980| nodeType | 'TextArea' | Yes| Node type, which is **TextArea** in this API.| 2981 2982**Return value** 2983 2984| Type | Description | 2985| ------------------ | ------------------ | 2986| [TextArea](#textarea14) | FrameNode node of the **TextArea** type.| 2987 2988**Example** 2989 2990<!--code_no_check--> 2991 2992```ts 2993typeNode.createNode(uiContext, 'TextArea'); 2994``` 2995 2996### SymbolGlyph<sup>14+</sup> 2997type SymbolGlyph = TypedFrameNode<SymbolGlyphInterface, SymbolGlyphAttribute> 2998 2999Represents a FrameNode of the **SymbolGlyph** type. 3000 3001**Atomic service API**: This API can be used in atomic services since API version 14. 3002 3003**System capability**: SystemCapability.ArkUI.ArkUI.Full 3004 3005| Type | Description | 3006| ----------------------------- | -------------------- | 3007| TypedFrameNode<SymbolGlyphInterface, SymbolGlyphAttribute> | FrameNode of the **SymbolGlyph** type.<br>**NOTE**<br> **SymbolGlyphInterface** is used as the input parameter of the [initialize](#properties) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **SymbolGlyph** component.<br> **SymbolGlyphAttribute** is used as the return value of the [attribute](#properties) API of **TypedFrameNode**. It returns the attribute setting object of the **SymbolGlyph** component.| 3008 3009### createNode('SymbolGlyph')<sup>14+</sup> 3010createNode(context: UIContext, nodeType: 'SymbolGlyph'): SymbolGlyph 3011 3012Creates a FrameNode of the **SymbolGlyph** type. 3013 3014**Atomic service API**: This API can be used in atomic services since API version 14. 3015 3016**System capability**: SystemCapability.ArkUI.ArkUI.Full 3017 3018**Parameters** 3019 3020| Name| Type| Mandatory| Description | 3021| ------------------ | ------------------ | ------------------- | ------------------- | 3022| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node.| 3023| nodeType | 'SymbolGlyph' | Yes| Node type, which is **SymbolGlyph** in this API.| 3024 3025**Return value** 3026 3027| Type | Description | 3028| ------------------ | ------------------ | 3029| [SymbolGlyph](#symbolglyph14) | FrameNode node of the **SymbolGlyph** type.| 3030 3031**Example** 3032 3033<!--code_no_check--> 3034 3035```ts 3036typeNode.createNode(uiContext, 'SymbolGlyph'); 3037``` 3038 3039## NodeAdapter<sup>12+</sup> 3040 3041Provides the lazy loading capability for the FrameNodes. 3042 3043> **NOTE** 3044> 3045> The input parameter cannot be a negative number; otherwise, no processing is performed. 3046 3047**Example** 3048 3049For details, see [NodeAdapter Usage Example](#nodeadapter-usage-example). 3050 3051### constructor<sup>12+</sup> 3052 3053constructor() 3054 3055A constructor used to create a **NodeAdapter** object. 3056 3057**Atomic service API**: This API can be used in atomic services since API version 12. 3058 3059**System capability**: SystemCapability.ArkUI.ArkUI.Full 3060 3061### dispose<sup>12+</sup> 3062 3063dispose(): void 3064 3065Disposes of this **NodeAdapter** object. Bindings, if any, of the object will be cleared before the object is disposed of. 3066 3067**Atomic service API**: This API can be used in atomic services since API version 12. 3068 3069**System capability**: SystemCapability.ArkUI.ArkUI.Full 3070 3071### totalNodeCount<sup>12+</sup> 3072 3073set totalNodeCount(count: number) 3074 3075Sets the total number of items in this node. 3076 3077**Atomic service API**: This API can be used in atomic services since API version 12. 3078 3079**System capability**: SystemCapability.ArkUI.ArkUI.Full 3080 3081**Parameters** 3082 3083| Name | Type | Mandatory| Description | 3084| ------- | ------------------------------------------------------ | ---- | ---------------- | 3085| count | number | Yes | Total number of items.| 3086 3087get totalNodeCount(): number 3088 3089Obtains the total number of items in this node. 3090 3091**Atomic service API**: This API can be used in atomic services since API version 12. 3092 3093**System capability**: SystemCapability.ArkUI.ArkUI.Full 3094 3095**Return value** 3096 3097| Type | Description | 3098| ----------------- | ------------ | 3099| number | Total number of items.| 3100 3101### reloadAllItems<sup>12+</sup> 3102 3103reloadAllItems(): void 3104 3105Reloads all items in this node. 3106 3107**Atomic service API**: This API can be used in atomic services since API version 12. 3108 3109**System capability**: SystemCapability.ArkUI.ArkUI.Full 3110 3111### reloadItem<sup>12+</sup> 3112 3113reloadItem(start: number, count: number): void 3114 3115Reloads a specified number of items starting from a specific index. 3116 3117**Atomic service API**: This API can be used in atomic services since API version 12. 3118 3119**System capability**: SystemCapability.ArkUI.ArkUI.Full 3120 3121**Parameters** 3122 3123| Name | Type | Mandatory| Description | 3124| ------- | ------------------------------------------------------ | ---- | ---------------- | 3125| start | number | Yes | Starting index of the items to reload.| 3126| count | number | Yes | Number of the items to reload.| 3127 3128### removeItem<sup>12+</sup> 3129 3130removeItem(start: number, count: number): void 3131 3132Removes a specified number of items starting from a specific index. 3133 3134**Atomic service API**: This API can be used in atomic services since API version 12. 3135 3136**System capability**: SystemCapability.ArkUI.ArkUI.Full 3137 3138**Parameters** 3139 3140| Name | Type | Mandatory| Description | 3141| ------- | ------------------------------------------------------ | ---- | ---------------- | 3142| start | number | Yes | Starting index of the items to remove.| 3143| count | number | Yes | Number of the items to remove.| 3144 3145### insertItem<sup>12+</sup> 3146 3147insertItem(start: number, count: number): void 3148 3149Inserts a specified number of items starting from a specific index. 3150 3151**Atomic service API**: This API can be used in atomic services since API version 12. 3152 3153**System capability**: SystemCapability.ArkUI.ArkUI.Full 3154 3155**Parameters** 3156 3157| Name | Type | Mandatory| Description | 3158| ------- | ------------------------------------------------------ | ---- | ---------------- | 3159| start | number | Yes | Starting index of the items to insert.| 3160| count | number | Yes | Number of the items to insert.| 3161 3162### moveItem<sup>12+</sup> 3163 3164moveItem(from: number, to: number): void 3165 3166Moves items from the starting index to the ending index. 3167 3168**Atomic service API**: This API can be used in atomic services since API version 12. 3169 3170**System capability**: SystemCapability.ArkUI.ArkUI.Full 3171 3172**Parameters** 3173 3174| Name | Type | Mandatory| Description | 3175| ------- | ------------------------------------------------------ | ---- | ---------------- | 3176| from | number | Yes | Original index from which the data will be moved.| 3177| to | number | Yes | Target index to which the data will be moved.| 3178 3179### getAllAvailableItems<sup>12+</sup> 3180 3181getAllAvailableItems(): Array<FrameNode> 3182 3183Obtains all available items. 3184 3185**Atomic service API**: This API can be used in atomic services since API version 12. 3186 3187**System capability**: SystemCapability.ArkUI.ArkUI.Full 3188 3189**Return value** 3190 3191| Type | Description | 3192| ----------------- | ------------ | 3193| Array<FrameNode> | Array of items in the FrameNode.| 3194 3195### onAttachToNode<sup>12+</sup> 3196 3197onAttachToNode?(target: FrameNode): void 3198 3199Called when a FrameNode is attached to the NodeAdapter. 3200 3201**Atomic service API**: This API can be used in atomic services since API version 12. 3202 3203**System capability**: SystemCapability.ArkUI.ArkUI.Full 3204 3205**Parameters** 3206 3207| Name | Type | Mandatory| Description | 3208| ------- | ------------------------------------------------------ | ---- | ---------------- | 3209| target | FrameNode | Yes | FrameNode attached to the NodeAdapter.| 3210 3211### onDetachFromNode<sup>12+</sup> 3212 3213onDetachFromNode?(): void 3214 3215Called when detachment occurs. 3216 3217**Atomic service API**: This API can be used in atomic services since API version 12. 3218 3219**System capability**: SystemCapability.ArkUI.ArkUI.Full 3220 3221### onGetChildId<sup>12+</sup> 3222 3223onGetChildId?(index: number): number 3224 3225Called when this node is loaded for the first time or a new child node is detected. This API is used to generate custom IDs. You must ensure the uniqueness of the IDs. 3226 3227**Atomic service API**: This API can be used in atomic services since API version 12. 3228 3229**System capability**: SystemCapability.ArkUI.ArkUI.Full 3230 3231**Parameters** 3232 3233| Name | Type | Mandatory| Description | 3234| ------- | ------------------------------------------------------ | ---- | ---------------- | 3235| index | number | Yes | Index of the loaded node.| 3236 3237**Return value** 3238 3239| Type | Description | 3240| ----------------- | ------------ | 3241| number | ID customized by you. Make sure the ID is unique.| 3242 3243### onCreateChild<sup>12+</sup> 3244 3245onCreateChild?(index: number): FrameNode 3246 3247Called when this node is loaded for the first time or a new child node is detected. 3248 3249**Atomic service API**: This API can be used in atomic services since API version 12. 3250 3251**System capability**: SystemCapability.ArkUI.ArkUI.Full 3252 3253**Parameters** 3254 3255| Name | Type | Mandatory| Description | 3256| ------- | ------------------------------------------------------ | ---- | ---------------- | 3257| index | number | Yes | Index of the loaded node.| 3258 3259**Return value** 3260 3261| Type | Description | 3262| ----------------- | ------------ | 3263| FrameNode | FrameNode created by you.| 3264 3265### onDisposeChild<sup>12+</sup> 3266 3267onDisposeChild?(id: number, node: FrameNode): void 3268 3269Called when a child node is about to be disposed of. 3270 3271**Atomic service API**: This API can be used in atomic services since API version 12. 3272 3273**System capability**: SystemCapability.ArkUI.ArkUI.Full 3274 3275**Parameters** 3276 3277| Name | Type | Mandatory| Description | 3278| ------- | ------------------------------------------------------ | ---- | ---------------- | 3279| id | number | Yes | ID of the child node to be disposed of.| 3280| node | FrameNode | Yes | FrameNode to be disposed of.| 3281 3282### onUpdateChild<sup>12+</sup> 3283 3284onUpdateChild?(id: number, node: FrameNode): void 3285 3286Called when a loaded node is reused. 3287 3288**Atomic service API**: This API can be used in atomic services since API version 12. 3289 3290**System capability**: SystemCapability.ArkUI.ArkUI.Full 3291 3292**Parameters** 3293 3294| Name | Type | Mandatory| Description | 3295| ------- | ------------------------------------------------------ | ---- | ---------------- | 3296| id | number | Yes | ID of the node that is reused.| 3297| node | FrameNode | Yes | FrameNode that is reused.| 3298 3299### attachNodeAdapter<sup>12+</sup> 3300 3301static attachNodeAdapter(adapter: NodeAdapter, node: FrameNode): boolean 3302 3303Attaches a FrameNode to a NodeAdapter. Each node can be bound to only one NodeAdapter. Attempts to re-attach to a NodeAdapter that has already been attached to will fail and return **false**. 3304 3305**Atomic service API**: This API can be used in atomic services since API version 12. 3306 3307**System capability**: SystemCapability.ArkUI.ArkUI.Full 3308 3309**Parameters** 3310 3311| Name | Type | Mandatory| Description | 3312| ------- | ------------------------------------------------------ | ---- | ---------------- | 3313| adapter | [NodeAdapter](#nodeadapter12) | Yes | NodeAdapter class for lazy loading.| 3314| node | FrameNode | Yes | FrameNode to be attached to the NodeAdapter.| 3315 3316**Return value** 3317 3318| Type | Description | 3319| ----------------- | ------------ | 3320| boolean | Attachment result. Returns **true** if the attachment is successful; returns **false** otherwise.| 3321 3322### detachNodeAdapter<sup>12+</sup> 3323 3324static detachNodeAdapter(node: FrameNode): void 3325 3326Detaches a FrameNode from a NodeAdapter. 3327 3328**Atomic service API**: This API can be used in atomic services since API version 12. 3329 3330**System capability**: SystemCapability.ArkUI.ArkUI.Full 3331 3332**Parameters** 3333 3334| Name | Type | Mandatory| Description | 3335| ------- | ------------------------------------------------------ | ---- | ---------------- | 3336| node | FrameNode | Yes | FrameNode to detach.| 3337 3338## Example of Customizing a Node of a Specific Type 3339 3340The following example shows how to create a node of the Text type. 3341 3342```ts 3343import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 3344 3345class MyNodeController extends NodeController { 3346 makeNode(uiContext: UIContext): FrameNode | null { 3347 let node = new FrameNode(uiContext); 3348 node.commonAttribute.width(100) 3349 .height(50) 3350 .borderColor(Color.Gray) 3351 .borderWidth(1) 3352 .margin({ left: 10 }); 3353 let col = typeNode.createNode(uiContext, 'Column'); 3354 col.initialize({ space: 5 }) 3355 .width('100%').height('100%').margin({ top: 5 }); 3356 node.appendChild(col); 3357 let text = typeNode.createNode(uiContext, 'Text'); 3358 text.initialize("Hello").fontColor(Color.Blue).fontSize(14); 3359 col.appendChild(text); 3360 return node; 3361 } 3362} 3363 3364@Entry 3365@Component 3366struct FrameNodeTypeTest { 3367 private myNodeController: MyNodeController = new MyNodeController(); 3368 3369 build() { 3370 Row() { 3371 NodeContainer(this.myNodeController); 3372 } 3373 } 3374} 3375``` 3376 3377 3378 3379## Example of Node Operations 3380```ts 3381import { NodeController, FrameNode, UIContext } from '@kit.ArkUI'; 3382import { BusinessError } from '@kit.BasicServicesKit'; 3383 3384const TEST_TAG: string = "FrameNode " 3385 3386class MyNodeController extends NodeController { 3387 public frameNode: FrameNode | null = null; 3388 public childList: Array<FrameNode> = new Array<FrameNode>(); 3389 private rootNode: FrameNode | null = null; 3390 private uiContext: UIContext | null = null; 3391 private childrenCount: number = 0; 3392 3393 makeNode(uiContext: UIContext): FrameNode | null { 3394 this.rootNode = new FrameNode(uiContext); 3395 this.uiContext = uiContext; 3396 3397 this.frameNode = new FrameNode(uiContext); 3398 this.frameNode.commonAttribute.backgroundColor(Color.Pink); 3399 this.frameNode.commonAttribute.size({ width: 100, height: 100 }); 3400 3401 this.rootNode.appendChild(this.frameNode); 3402 this.childrenCount = this.childrenCount + 1; 3403 for (let i = 0; i < 10; i++) { 3404 let childNode = new FrameNode(uiContext); 3405 this.childList.push(childNode); 3406 this.frameNode.appendChild(childNode); 3407 } 3408 return this.rootNode; 3409 } 3410 3411 createFrameNode() { 3412 let frameNode = new FrameNode(this.uiContext!); 3413 frameNode.commonAttribute.backgroundColor(Color.Pink); 3414 frameNode.commonAttribute.size({ width: 100, height: 100 }); 3415 frameNode.commonAttribute.position({ x: this.childrenCount * 120, y: 0 }); 3416 3417 return frameNode; 3418 } 3419 3420 appendChild() { 3421 const childNode = this.createFrameNode(); 3422 this.rootNode!.appendChild(childNode); 3423 this.childrenCount = this.childrenCount + 1; 3424 } 3425 3426 insertChildAfter(index: number) { 3427 let insertNode = this.createFrameNode(); 3428 let childNode = this.rootNode!.getChild(index); 3429 this.rootNode!.insertChildAfter(insertNode, childNode); 3430 this.childrenCount = this.childrenCount + 1; 3431 } 3432 3433 removeChild(index: number) { 3434 let childNode = this.rootNode!.getChild(index); 3435 if (childNode == null) { 3436 console.log(`${TEST_TAG} getchild at index {${index}} : fail`); 3437 return; 3438 } 3439 this.rootNode!.removeChild(childNode); 3440 this.childrenCount = this.childrenCount - 1; 3441 } 3442 3443 getChildNumber() { 3444 console.log(TEST_TAG + " getChildNumber " + this.rootNode!.getChildrenCount()) 3445 console.log(TEST_TAG + " children count is " + this.childrenCount); 3446 } 3447 3448 clearChildren() { 3449 this.rootNode!.clearChildren(); 3450 } 3451 3452 searchFrameNode() { 3453 if (this.rootNode!.getFirstChild() === null) { 3454 console.log(TEST_TAG + " the rootNode does not have child node.") 3455 } 3456 if (this.rootNode!.getFirstChild() === this.frameNode) { 3457 console.log(TEST_TAG + 3458 " getFirstChild result: success. The first child of the rootNode is equals to frameNode."); 3459 } else { 3460 console.log(TEST_TAG + 3461 " getFirstChild result: fail. The first child of the rootNode is not equals to frameNode."); 3462 } 3463 if (this.frameNode!.getChild(5) === this.frameNode!.getChild(4)!.getNextSibling()) { 3464 console.log(TEST_TAG + " getNextSibling result: success."); 3465 } else { 3466 console.log(TEST_TAG + " getNextSibling result: fail."); 3467 } 3468 if (this.frameNode!.getChild(3) === this.frameNode!.getChild(4)!.getPreviousSibling()) { 3469 console.log(TEST_TAG + " getPreviousSibling result: success."); 3470 } else { 3471 console.log(TEST_TAG + " getPreviousSibling result: fail."); 3472 } 3473 if (this.rootNode!.getFirstChild() !== null && this.rootNode!.getFirstChild()!.getParent() === this.rootNode) { 3474 console.log(TEST_TAG + " getParent result: success."); 3475 } else { 3476 console.log(TEST_TAG + " getParent result: fail."); 3477 } 3478 if (this.rootNode!.getParent() !== undefined || this.rootNode!.getParent() !== null) { 3479 console.log(TEST_TAG + " get ArkTsNode success.") 3480 console.log(TEST_TAG + " check rootNode whether is modifiable " + this.rootNode!.isModifiable()) 3481 console.log(TEST_TAG + " check getParent whether is modifiable " + this.rootNode!.getParent()!.isModifiable()) 3482 } else { 3483 console.log(TEST_TAG + " get ArkTsNode fail."); 3484 } 3485 } 3486 3487 getPositionToWindow() { 3488 let positionToWindow = this.rootNode?.getPositionToWindow(); 3489 console.log(TEST_TAG + JSON.stringify(positionToWindow)); 3490 } 3491 3492 getPositionToParent() { 3493 let positionToParent = this.rootNode?.getPositionToParent(); 3494 console.log(TEST_TAG + JSON.stringify(positionToParent)); 3495 } 3496 3497 getPositionToScreen() { 3498 let positionToScreen = this.rootNode?.getPositionToScreen(); 3499 console.log(TEST_TAG + JSON.stringify(positionToScreen)); 3500 } 3501 3502 getPositionToWindowWithTransform() { 3503 let positionToWindowWithTransform = this.rootNode?.getPositionToWindowWithTransform(); 3504 console.log(TEST_TAG + JSON.stringify(positionToWindowWithTransform)); 3505 } 3506 3507 getPositionToParentWithTransform() { 3508 let positionToParentWithTransform = this.rootNode?.getPositionToParentWithTransform(); 3509 console.log(TEST_TAG + JSON.stringify(positionToParentWithTransform)); 3510 } 3511 3512 getPositionToScreenWithTransform() { 3513 let positionToScreenWithTransform = this.rootNode?.getPositionToScreenWithTransform(); 3514 console.log(TEST_TAG + JSON.stringify(positionToScreenWithTransform)); 3515 } 3516 3517 getMeasuredSize() { 3518 let measuredSize = this.frameNode?.getMeasuredSize(); 3519 console.log(TEST_TAG + JSON.stringify(measuredSize)); 3520 } 3521 3522 getLayoutPosition() { 3523 let layoutPosition = this.frameNode?.getLayoutPosition(); 3524 console.log(TEST_TAG + JSON.stringify(layoutPosition)); 3525 } 3526 3527 getUserConfigBorderWidth() { 3528 let userConfigBorderWidth = this.frameNode?.getUserConfigBorderWidth(); 3529 console.log(TEST_TAG + JSON.stringify(userConfigBorderWidth)); 3530 } 3531 3532 getUserConfigPadding() { 3533 let userConfigPadding = this.frameNode?.getUserConfigPadding(); 3534 console.log(TEST_TAG + JSON.stringify(userConfigPadding)); 3535 } 3536 3537 getUserConfigMargin() { 3538 let userConfigMargin = this.frameNode?.getUserConfigMargin(); 3539 console.log(TEST_TAG + JSON.stringify(userConfigMargin)); 3540 } 3541 3542 getUserConfigSize() { 3543 let userConfigSize = this.frameNode?.getUserConfigSize(); 3544 console.log(TEST_TAG + JSON.stringify(userConfigSize)); 3545 } 3546 3547 getId() { 3548 let id = this.frameNode?.getId(); 3549 console.log(TEST_TAG + id); 3550 } 3551 3552 getUniqueId() { 3553 let uniqueId = this.frameNode?.getUniqueId(); 3554 console.log(TEST_TAG + uniqueId); 3555 } 3556 3557 getNodeType() { 3558 let nodeType = this.frameNode?.getNodeType(); 3559 console.log(TEST_TAG + nodeType); 3560 } 3561 3562 getOpacity() { 3563 let opacity = this.frameNode?.getOpacity(); 3564 console.log(TEST_TAG + JSON.stringify(opacity)); 3565 } 3566 3567 isVisible() { 3568 let visible = this.frameNode?.isVisible(); 3569 console.log(TEST_TAG + JSON.stringify(visible)); 3570 } 3571 3572 isClipToFrame() { 3573 let clipToFrame = this.frameNode?.isClipToFrame(); 3574 console.log(TEST_TAG + JSON.stringify(clipToFrame)); 3575 } 3576 3577 isAttached() { 3578 let attached = this.frameNode?.isAttached(); 3579 console.log(TEST_TAG + JSON.stringify(attached)); 3580 } 3581 3582 getInspectorInfo() { 3583 let inspectorInfo = this.frameNode?.getInspectorInfo(); 3584 console.log(TEST_TAG + JSON.stringify(inspectorInfo)); 3585 } 3586 3587 setCrossLanguageOptions() { 3588 console.log(TEST_TAG + " getCrossLanguageOptions " + JSON.stringify(this.frameNode?.getCrossLanguageOptions())); 3589 try { 3590 this.frameNode?.setCrossLanguageOptions({ 3591 attributeSetting: true 3592 }); 3593 console.log(TEST_TAG + " setCrossLanguageOptions success."); 3594 } catch (err) { 3595 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " + (err as BusinessError).message); 3596 console.log(TEST_TAG + " setCrossLanguageOptions fail."); 3597 } 3598 console.log(TEST_TAG + " getCrossLanguageOptions " + JSON.stringify(this.frameNode?.getCrossLanguageOptions())); 3599 } 3600 3601 throwError() { 3602 try { 3603 this.rootNode!.getParent()!.clearChildren(); 3604 } catch (err) { 3605 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " + (err as BusinessError).message); 3606 } 3607 try { 3608 this.rootNode!.getParent()!.appendChild(new FrameNode(this.uiContext)); 3609 } catch (err) { 3610 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " + (err as BusinessError).message); 3611 } 3612 try { 3613 this.rootNode!.getParent()!.removeChild(this.rootNode!.getParent()!.getChild(0)); 3614 } catch (err) { 3615 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " + (err as BusinessError).message); 3616 } 3617 } 3618} 3619 3620@Entry 3621@Component 3622struct Index { 3623 private myNodeController: MyNodeController = new MyNodeController(); 3624 private scroller: Scroller = new Scroller(); 3625 @State index: number = 0; 3626 3627 build() { 3628 Scroll(this.scroller) { 3629 Column({ space: 8 }) { 3630 Column() { 3631 Row() { 3632 Button("ADD") 3633 .onClick(() => { 3634 this.index++; 3635 }) 3636 Button("DEC") 3637 .onClick(() => { 3638 this.index--; 3639 }) 3640 } 3641 3642 Text("Current index is " + this.index) 3643 .textAlign(TextAlign.Center) 3644 .borderRadius(10) 3645 .backgroundColor(0xFFFFFF) 3646 .width('100%') 3647 .fontSize(16) 3648 } 3649 3650 Column() { 3651 Text("This is a NodeContainer.") 3652 .textAlign(TextAlign.Center) 3653 .borderRadius(10) 3654 .backgroundColor(0xFFFFFF) 3655 .width('100%') 3656 .fontSize(16) 3657 NodeContainer(this.myNodeController) 3658 .borderWidth(1) 3659 .width(300) 3660 .height(100) 3661 } 3662 3663 Button("appendChild") 3664 .width(300) 3665 .onClick(() => { 3666 this.myNodeController.appendChild(); 3667 }) 3668 Button("insertChildAfter") 3669 .width(300) 3670 .onClick(() => { 3671 this.myNodeController.insertChildAfter(this.index); 3672 }) 3673 Button("removeChild") 3674 .width(300) 3675 .onClick(() => { 3676 this.myNodeController.removeChild(this.index); 3677 }) 3678 Button("clearChildren") 3679 .width(300) 3680 .onClick(() => { 3681 this.myNodeController.clearChildren(); 3682 }) 3683 Button("getChildNumber") 3684 .width(300) 3685 .onClick(() => { 3686 this.myNodeController.getChildNumber(); 3687 }) 3688 Button("searchFrameNode") 3689 .width(300) 3690 .onClick(() => { 3691 this.myNodeController.searchFrameNode(); 3692 }) 3693 Button("getPositionToWindow") 3694 .width(300) 3695 .onClick(() => { 3696 this.myNodeController.getPositionToWindow(); 3697 }) 3698 Button("getPositionToParent") 3699 .width(300) 3700 .onClick(() => { 3701 this.myNodeController.getPositionToParent(); 3702 }) 3703 Button("getPositionToScreen") 3704 .width(300) 3705 .onClick(() => { 3706 this.myNodeController.getPositionToScreen(); 3707 }) 3708 Button("getPositionToParentWithTransform") 3709 .width(300) 3710 .onClick(() => { 3711 this.myNodeController.getPositionToParentWithTransform(); 3712 }) 3713 Button("getPositionToWindowWithTransform") 3714 .width(300) 3715 .onClick(() => { 3716 this.myNodeController.getPositionToWindowWithTransform(); 3717 }) 3718 Button("getPositionToScreenWithTransform") 3719 .width(300) 3720 .onClick(() => { 3721 this.myNodeController.getPositionToScreenWithTransform(); 3722 }) 3723 Button("getMeasuredSize") 3724 .width(300) 3725 .onClick(() => { 3726 this.myNodeController.getMeasuredSize(); 3727 }) 3728 Button("getLayoutPosition") 3729 .width(300) 3730 .onClick(() => { 3731 this.myNodeController.getLayoutPosition(); 3732 }) 3733 Button("getUserConfigBorderWidth") 3734 .width(300) 3735 .onClick(() => { 3736 this.myNodeController.getUserConfigBorderWidth(); 3737 }) 3738 Button("getUserConfigPadding") 3739 .width(300) 3740 .onClick(() => { 3741 this.myNodeController.getUserConfigPadding(); 3742 }) 3743 Button("getUserConfigMargin") 3744 .width(300) 3745 .onClick(() => { 3746 this.myNodeController.getUserConfigMargin(); 3747 }) 3748 Button("getUserConfigSize") 3749 .width(300) 3750 .onClick(() => { 3751 this.myNodeController.getUserConfigSize(); 3752 }) 3753 Button("getId") 3754 .width(300) 3755 .onClick(() => { 3756 this.myNodeController.getId(); 3757 }) 3758 Button("getUniqueId") 3759 .width(300) 3760 .onClick(() => { 3761 this.myNodeController.getUniqueId(); 3762 }) 3763 Button("getNodeType") 3764 .width(300) 3765 .onClick(() => { 3766 this.myNodeController.getNodeType(); 3767 }) 3768 Button("getOpacity") 3769 .width(300) 3770 .onClick(() => { 3771 this.myNodeController.getOpacity(); 3772 }) 3773 Button("isVisible") 3774 .width(300) 3775 .onClick(() => { 3776 this.myNodeController.isVisible(); 3777 }) 3778 Button("isClipToFrame") 3779 .width(300) 3780 .onClick(() => { 3781 this.myNodeController.isClipToFrame(); 3782 }) 3783 Button("isAttached") 3784 .width(300) 3785 .onClick(() => { 3786 this.myNodeController.isAttached(); 3787 }) 3788 Button("getInspectorInfo") 3789 .width(300) 3790 .onClick(() => { 3791 this.myNodeController.getInspectorInfo(); 3792 }) 3793 Button("getCustomProperty") 3794 .width(300) 3795 .onClick(() => { 3796 const uiContext: UIContext = this.getUIContext(); 3797 if (uiContext) { 3798 const node: FrameNode | null = uiContext.getFrameNodeById("Test_Button") || null; 3799 if (node) { 3800 for (let i = 1; i < 4; i++) { 3801 const key = 'customProperty' + i; 3802 const property = node.getCustomProperty(key); 3803 console.log(TEST_TAG + key, JSON.stringify(property)); 3804 } 3805 } 3806 } 3807 }) 3808 .id('Test_Button') 3809 .customProperty('customProperty1', { 3810 'number': 10, 3811 'string': 'this is a string', 3812 'bool': true, 3813 'object': { 3814 'name': 'name', 3815 'value': 100 3816 } 3817 }) 3818 .customProperty('customProperty2', {}) 3819 .customProperty('customProperty2', undefined) 3820 Button("setCrossLanguageOptions") 3821 .width(300) 3822 .onClick(() => { 3823 this.myNodeController.setCrossLanguageOptions(); 3824 }) 3825 Button("throwError") 3826 .width(300) 3827 .onClick(() => { 3828 this.myNodeController.throwError(); 3829 }) 3830 } 3831 .width("100%") 3832 } 3833 .scrollable(ScrollDirection.Vertical) // The scrollbar scrolls in the vertical direction. 3834 } 3835} 3836``` 3837 3838## Example of Node Operations in the LazyForEach Scenario 3839 3840```ts 3841import { NodeController, FrameNode, UIContext, BuilderNode, ExpandMode, LengthUnit } from '@kit.ArkUI'; 3842 3843const TEST_TAG: string = "FrameNode " 3844 3845// BasicDataSource implements the IDataSource API to manage listeners and notify LazyForEach of data updates. 3846class BasicDataSource implements IDataSource { 3847 private listeners: DataChangeListener[] = []; 3848 private originDataArray: string[] = []; 3849 3850 public totalCount(): number { 3851 return 0; 3852 } 3853 3854 public getData(index: number): string { 3855 return this.originDataArray[index]; 3856 } 3857 3858 // This method is called by the framework to add a listener to the LazyForEach data source. 3859 registerDataChangeListener(listener: DataChangeListener): void { 3860 if (this.listeners.indexOf(listener) < 0) { 3861 console.info('add listener'); 3862 this.listeners.push(listener); 3863 } 3864 } 3865 3866 // This method is called by the framework to remove the listener from the LazyForEach data source. 3867 unregisterDataChangeListener(listener: DataChangeListener): void { 3868 const pos = this.listeners.indexOf(listener); 3869 if (pos >= 0) { 3870 console.info('remove listener'); 3871 this.listeners.splice(pos, 1); 3872 } 3873 } 3874 3875 // Notify LazyForEach that all child components need to be reloaded. 3876 notifyDataReload(): void { 3877 this.listeners.forEach(listener => { 3878 listener.onDataReloaded(); 3879 }) 3880 } 3881 3882 // Notify LazyForEach that a child component needs to be added for the data item with the specified index. 3883 notifyDataAdd(index: number): void { 3884 this.listeners.forEach(listener => { 3885 listener.onDataAdd(index); 3886 // Method 2: listener.onDatasetChange([{type: DataOperationType.ADD, index: index}]); 3887 }) 3888 } 3889 3890 // Notify LazyForEach that the data item with the specified index has changed and the child component needs to be rebuilt. 3891 notifyDataChange(index: number): void { 3892 this.listeners.forEach(listener => { 3893 listener.onDataChange(index); 3894 // Method 2: listener.onDatasetChange([{type: DataOperationType.CHANGE, index: index}]); 3895 }) 3896 } 3897 3898 // Notify LazyForEach that the child component that matches the specified index needs to be deleted. 3899 notifyDataDelete(index: number): void { 3900 this.listeners.forEach(listener => { 3901 listener.onDataDelete(index); 3902 // Method 2: listener.onDatasetChange([{type: DataOperationType.DELETE, index: index}]); 3903 }) 3904 } 3905 3906 // Notify LazyForEach that data needs to be swapped between the from and to positions. 3907 notifyDataMove(from: number, to: number): void { 3908 this.listeners.forEach(listener => { 3909 listener.onDataMove(from, to); 3910 // Method 2: listener.onDatasetChange () 3911 // [{type: DataOperationType.EXCHANGE, index: {start: from, end: to}}]); 3912 }) 3913 } 3914 3915 notifyDatasetChange(operations: DataOperation[]): void { 3916 this.listeners.forEach(listener => { 3917 listener.onDatasetChange(operations); 3918 }) 3919 } 3920} 3921 3922class MyDataSource extends BasicDataSource { 3923 private dataArray: string[] = [] 3924 3925 public totalCount(): number { 3926 return this.dataArray.length; 3927 } 3928 3929 public getData(index: number): string { 3930 return this.dataArray[index]; 3931 } 3932 3933 public addData(index: number, data: string): void { 3934 this.dataArray.splice(index, 0, data); 3935 this.notifyDataAdd(index); 3936 } 3937 3938 public pushData(data: string): void { 3939 this.dataArray.push(data); 3940 this.notifyDataAdd(this.dataArray.length - 1); 3941 } 3942} 3943 3944class Params { 3945 data: MyDataSource | null = null; 3946 scroller: Scroller | null = null; 3947 constructor(data: MyDataSource, scroller: Scroller) { 3948 this.data = data; 3949 this.scroller = scroller; 3950 } 3951} 3952 3953@Builder 3954function buildData(params: Params) { 3955 List({ scroller: params.scroller }) { 3956 LazyForEach(params.data, (item: string) => { 3957 ListItem() { 3958 Column() { 3959 Text(item) 3960 .fontSize(20) 3961 .onAppear(() => { 3962 console.log(TEST_TAG + " node appear: " + item) 3963 }) 3964 .backgroundColor(Color.Pink) 3965 .margin({ 3966 top: 30, 3967 bottom: 30, 3968 left: 10, 3969 right: 10 3970 }) 3971 } 3972 } 3973 .id(item) 3974 }, (item: string) => item) 3975 } 3976 .cachedCount(5) 3977 .listDirection(Axis.Horizontal) 3978} 3979 3980class MyNodeController extends NodeController { 3981 private rootNode: FrameNode | null = null; 3982 private uiContext: UIContext | null = null; 3983 private data: MyDataSource = new MyDataSource(); 3984 private scroller: Scroller = new Scroller(); 3985 3986 makeNode(uiContext: UIContext): FrameNode | null { 3987 this.uiContext = uiContext; 3988 for (let i = 0; i <= 20; i++) { 3989 this.data.pushData(`N${i}`); 3990 } 3991 const params: Params = new Params(this.data, this.scroller); 3992 const dataNode: BuilderNode<[Params]> = new BuilderNode(uiContext); 3993 dataNode.build(wrapBuilder<[Params]>(buildData), params); 3994 this.rootNode = dataNode.getFrameNode(); 3995 const scrollToIndexOptions: ScrollToIndexOptions = { 3996 extraOffset: { 3997 value: 20, unit: LengthUnit.VP 3998 } 3999 }; 4000 this.scroller.scrollToIndex(6, true, ScrollAlign.START, scrollToIndexOptions); 4001 return this.rootNode; 4002 } 4003 4004 getFirstChildIndexWithoutExpand() { 4005 console.log(`${TEST_TAG} getFirstChildIndexWithoutExpand: ${this.rootNode!.getFirstChildIndexWithoutExpand()}`); 4006 } 4007 4008 getLastChildIndexWithoutExpand() { 4009 console.log(`${TEST_TAG} getLastChildIndexWithoutExpand: ${this.rootNode!.getLastChildIndexWithoutExpand()}`); 4010 } 4011 4012 getChildWithNotExpand() { 4013 const childNode = this.rootNode!.getChild(3, ExpandMode.NOT_EXPAND); 4014 console.log(TEST_TAG + " getChild(3, ExpandMode.NOT_EXPAND): " + childNode!.getId()); 4015 if (childNode!.getId() === "N9") { 4016 console.log(TEST_TAG + " getChild(3, ExpandMode.NOT_EXPAND) result: success."); 4017 } else { 4018 console.log(TEST_TAG + " getChild(3, ExpandMode.NOT_EXPAND) result: fail."); 4019 } 4020 } 4021 4022 getChildWithExpand() { 4023 const childNode = this.rootNode!.getChild(3, ExpandMode.EXPAND); 4024 console.log(TEST_TAG + " getChild(3, ExpandMode.EXPAND): " + childNode!.getId()); 4025 if (childNode!.getId() === "N3") { 4026 console.log(TEST_TAG + " getChild(3, ExpandMode.EXPAND) result: success."); 4027 } else { 4028 console.log(TEST_TAG + " getChild(3, ExpandMode.EXPAND) result: fail."); 4029 } 4030 } 4031 4032 getChildWithLazyExpand() { 4033 const childNode = this.rootNode!.getChild(3, ExpandMode.LAZY_EXPAND); 4034 console.log(TEST_TAG + " getChild(3, ExpandMode.LAZY_EXPAND): " + childNode!.getId()); 4035 if (childNode!.getId() === "N3") { 4036 console.log(TEST_TAG + " getChild(3, ExpandMode.LAZY_EXPAND) result: success."); 4037 } else { 4038 console.log(TEST_TAG + " getChild(3, ExpandMode.LAZY_EXPAND) result: fail."); 4039 } 4040 } 4041} 4042 4043@Entry 4044@Component 4045struct Index { 4046 private myNodeController: MyNodeController = new MyNodeController(); 4047 private scroller: Scroller = new Scroller(); 4048 4049 build() { 4050 Scroll(this.scroller) { 4051 Column({ space: 8 }) { 4052 Column() { 4053 Text("This is a NodeContainer.") 4054 .textAlign(TextAlign.Center) 4055 .borderRadius(10) 4056 .backgroundColor(0xFFFFFF) 4057 .width('100%') 4058 .fontSize(16) 4059 NodeContainer(this.myNodeController) 4060 .borderWidth(1) 4061 .width(300) 4062 .height(100) 4063 } 4064 4065 Button("getFirstChildIndexWithoutExpand") 4066 .width(300) 4067 .onClick(() => { 4068 this.myNodeController.getFirstChildIndexWithoutExpand(); 4069 }) 4070 Button("getLastChildIndexWithoutExpand") 4071 .width(300) 4072 .onClick(() => { 4073 this.myNodeController.getLastChildIndexWithoutExpand(); 4074 }) 4075 Button("getChildWithNotExpand") 4076 .width(300) 4077 .onClick(() => { 4078 this.myNodeController.getChildWithNotExpand(); 4079 }) 4080 Button("getChildWithExpand") 4081 .width(300) 4082 .onClick(() => { 4083 this.myNodeController.getChildWithExpand(); 4084 }) 4085 Button("getChildWithLazyExpand") 4086 .width(300) 4087 .onClick(() => { 4088 this.myNodeController.getChildWithLazyExpand(); 4089 }) 4090 } 4091 .width("100%") 4092 } 4093 .scrollable(ScrollDirection.Vertical) // The scrollbar scrolls in the vertical direction. 4094 } 4095} 4096``` 4097 4098## Basic Event Example 4099```ts 4100import { NodeController, FrameNode } from '@kit.ArkUI'; 4101 4102class MyNodeController extends NodeController { 4103 public rootNode: FrameNode | null = null; 4104 4105 makeNode(uiContext: UIContext): FrameNode | null { 4106 this.rootNode = new FrameNode(uiContext); 4107 this.rootNode.commonAttribute.width(100) 4108 .height(100) 4109 .backgroundColor(Color.Pink); 4110 this.addCommonEvent(this.rootNode); 4111 return this.rootNode; 4112 } 4113 4114 addCommonEvent(frameNode: FrameNode) { 4115 frameNode.commonEvent.setOnHover(((isHover: boolean, event: HoverEvent): void => { 4116 console.log(`isHover FrameNode: ${isHover}`); 4117 console.log(`isHover FrameNode: ${JSON.stringify(event)}`); 4118 event.stopPropagation(); 4119 })) 4120 frameNode.commonEvent.setOnClick((event: ClickEvent) => { 4121 console.log(`Click FrameNode: ${JSON.stringify(event)}`) 4122 }) 4123 frameNode.commonEvent.setOnTouch((event: TouchEvent) => { 4124 console.log(`touch FrameNode: ${JSON.stringify(event)}`) 4125 }) 4126 frameNode.commonEvent.setOnAppear(() => { 4127 console.log(`on Appear FrameNode`) 4128 }) 4129 frameNode.commonEvent.setOnDisappear(() => { 4130 console.log(`onDisAppear FrameNode`) 4131 }) 4132 frameNode.commonEvent.setOnFocus(() => { 4133 console.log(`onFocus FrameNode`) 4134 }) 4135 frameNode.commonEvent.setOnBlur(() => { 4136 console.log(`onBlur FrameNode`) 4137 }) 4138 frameNode.commonEvent.setOnKeyEvent((event: KeyEvent) => { 4139 console.log(`Key FrameNode: ${JSON.stringify(event)}`) 4140 }) 4141 frameNode.commonEvent.setOnMouse((event: MouseEvent) => { 4142 console.log(`Mouse FrameNode: ${JSON.stringify(event)}`) 4143 }) 4144 frameNode.commonEvent.setOnSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 4145 console.info(`onSizeChange FrameNode: oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 4146 }) 4147 } 4148} 4149 4150@Entry 4151@Component 4152struct Index { 4153 @State index: number = 0; 4154 private myNodeController: MyNodeController = new MyNodeController(); 4155 4156 build() { 4157 Column() { 4158 Button("add CommonEvent to Text") 4159 .onClick(() => { 4160 this.myNodeController!.addCommonEvent(this.myNodeController!.rootNode!.getParent()!.getPreviousSibling() !) 4161 }) 4162 Text("this is a Text") 4163 .fontSize(16) 4164 .borderWidth(1) 4165 .onHover(((isHover: boolean, event: HoverEvent): void => { 4166 console.log(`isHover Text: ${isHover}`); 4167 console.log(`isHover Text: ${JSON.stringify(event)}`); 4168 event.stopPropagation(); 4169 })) 4170 .onClick((event: ClickEvent) => { 4171 console.log(`Click Text : ${JSON.stringify(event)}`) 4172 }) 4173 .onTouch((event: TouchEvent) => { 4174 console.log(`touch Text : ${JSON.stringify(event)}`) 4175 }) 4176 .onAppear(() => { 4177 console.log(`on Appear Text`) 4178 }) 4179 .onDisAppear(() => { 4180 console.log(`onDisAppear Text`) 4181 }) 4182 .onFocus(() => { 4183 console.log(`onFocus Text`) 4184 }) 4185 .onBlur(() => { 4186 console.log(`onBlur Text`) 4187 }) 4188 .onKeyEvent((event: KeyEvent) => { 4189 console.log(`Key Text : ${JSON.stringify(event)}`) 4190 }) 4191 .onMouse((event: MouseEvent) => { 4192 console.log(`Mouse Text : ${JSON.stringify(event)}`) 4193 }) 4194 .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 4195 console.info(`onSizeChange Text: oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 4196 }) 4197 NodeContainer(this.myNodeController) 4198 .borderWidth(1) 4199 .width(300) 4200 .height(100) 4201 }.width("100%") 4202 } 4203} 4204``` 4205 4206## Example of Using Basic Events in the LazyForEach Scenario 4207 4208<!--code_no_check--> 4209 4210```ts 4211// index.ets 4212import {Track, TrackManager, TrackNode} from "./track" 4213 4214@Builder 4215function page1() { 4216 Column() { 4217 Text("Page1") 4218 PageList().height("90%") 4219 Button("DumpMessage") 4220 .onClick(() => { 4221 TrackManager.get().dump() 4222 }) 4223 4224 }.width("100%").height("100%") 4225} 4226 4227class BasicDataSource implements IDataSource { 4228 private listeners: DataChangeListener[] = []; 4229 private originDataArray: string[] = []; 4230 4231 public totalCount(): number { 4232 return 0; 4233 } 4234 4235 public getData(index: number): string { 4236 return this.originDataArray[index]; 4237 } 4238 4239 // This method is called by the framework to add a listener to the LazyForEach data source. 4240 registerDataChangeListener(listener: DataChangeListener): void { 4241 if (this.listeners.indexOf(listener) < 0) { 4242 console.info('add listener'); 4243 this.listeners.push(listener); 4244 } 4245 } 4246 4247 // This method is called by the framework to remove the listener from the LazyForEach data source. 4248 unregisterDataChangeListener(listener: DataChangeListener): void { 4249 const pos = this.listeners.indexOf(listener); 4250 if (pos >= 0) { 4251 console.info('remove listener'); 4252 this.listeners.splice(pos, 1); 4253 } 4254 } 4255 4256 // Notify LazyForEach that all child components need to be reloaded. 4257 notifyDataReload(): void { 4258 this.listeners.forEach(listener => { 4259 listener.onDataReloaded(); 4260 }) 4261 } 4262 4263 // Notify LazyForEach that a child component needs to be added for the data item with the specified index. 4264 notifyDataAdd(index: number): void { 4265 this.listeners.forEach(listener => { 4266 listener.onDataAdd(index); 4267 }) 4268 } 4269 4270 // Notify LazyForEach that the data item with the specified index has changed and the child component needs to be rebuilt. 4271 notifyDataChange(index: number): void { 4272 this.listeners.forEach(listener => { 4273 listener.onDataChange(index); 4274 }) 4275 } 4276 4277 // Notify LazyForEach that the child component that matches the specified index needs to be deleted. 4278 notifyDataDelete(index: number): void { 4279 this.listeners.forEach(listener => { 4280 listener.onDataDelete(index); 4281 }) 4282 } 4283 4284 // Notify LazyForEach that data needs to be swapped between the from and to positions. 4285 notifyDataMove(from: number, to: number): void { 4286 this.listeners.forEach(listener => { 4287 listener.onDataMove(from, to); 4288 }) 4289 } 4290} 4291 4292class MyDataSource extends BasicDataSource { 4293 private dataArray: string[] = []; 4294 4295 public totalCount(): number { 4296 return this.dataArray.length; 4297 } 4298 4299 public getData(index: number): string { 4300 return this.dataArray[index]; 4301 } 4302 4303 public addData(index: number, data: string): void { 4304 this.dataArray.splice(index, 0, data); 4305 this.notifyDataAdd(index); 4306 } 4307 4308 public pushData(data: string): void { 4309 this.dataArray.push(data); 4310 this.notifyDataAdd(this.dataArray.length - 1); 4311 } 4312} 4313 4314@Component 4315struct PageList { 4316 private data: MyDataSource = new MyDataSource(); 4317 4318 aboutToAppear() { 4319 for (let i = 0; i <= 100; i++) { 4320 this.data.pushData(`Hello ${i}`) 4321 } 4322 } 4323 4324 build() { 4325 List({ space: 3 }) { 4326 LazyForEach(this.data, (item: string, index: number) => { 4327 ListItem() { 4328 // Encapsulate and instrument the component with tracking through TrackNode. 4329 TrackNode({track: new Track().tag("xxx"+ item).id(index + 30000)}) { 4330 Row() { 4331 Text(item).fontSize(30) 4332 .onClick(() => { 4333 }) 4334 }.margin({ left: 10, right: 10 }) 4335 } 4336 } 4337 }, (item: string) => item) 4338 }.cachedCount(5) 4339 } 4340} 4341 4342 4343@Entry 4344@Component 4345struct TrackTest { 4346 pageInfos: NavPathStack = new NavPathStack() 4347 build() { 4348 Row() { 4349 TrackNode({ track: new Track().tag("root").id(10000)}) { 4350 page1() 4351 } 4352 } 4353 } 4354 4355 aboutToAppear(): void { 4356 TrackManager.get().startListenClick(this.getUIContext()) 4357 } 4358} 4359``` 4360 4361<!--code_no_check--> 4362 4363```ts 4364// ./track.ets 4365import { FrameNode, Rect } from '@kit.ArkUI'; 4366 4367@Component 4368export struct TrackNode { 4369 @BuilderParam closer: VoidCallback = this.defaultBuilder 4370 track: Track | null = null 4371 trackShadow: TrackShadow = new TrackShadow() 4372 4373 @Builder defaultBuilder() { 4374 } 4375 4376 build() { 4377 this.closer() 4378 } 4379 4380 aboutToAppear(): void { 4381 // use onDidBuild later 4382 } 4383 4384 aboutToDisappear(): void { 4385 TrackManager.get().removeTrack(this.trackShadow.id) 4386 console.log("Track disappear:" + this.trackShadow.id) 4387 } 4388 4389 onDidBuild(): void { 4390 // Construct a virtual tree with the tracing point. The obtained node is the root node of the current page (Row in the case). 4391 let uid = this.getUniqueId() 4392 let node: FrameNode | null = this.getUIContext().getFrameNodeByUniqueId(uid); 4393 console.log("Track onDidBuild node:" + node?.getNodeType()) 4394 if (node === null) { 4395 return 4396 } 4397 this.trackShadow.node = node 4398 this.trackShadow.id = node?.getUniqueId() 4399 this.trackShadow.track = this.track; 4400 TrackManager.get().addTrack(this.trackShadow.id, this.trackShadow) 4401 // Use setOnVisibleAreaApproximateChange to listen for and record changes in the visible area of the tracked component. 4402 node?.commonEvent.setOnVisibleAreaApproximateChange( 4403 { ratios: [0, 0.1, 0.2, 0.5, 0.8, 1], expectedUpdateInterval: 500 }, 4404 (ratioInc: boolean, ratio: number) => { 4405 console.log(`Node ${node?.getUniqueId()}:${node?.getNodeType()} is visibleRatio is ${ratio}`); 4406 this.trackShadow.visibleRatio = ratio 4407 }) 4408 4409 let parent: FrameNode | null = node?.getParent() 4410 4411 let attachTrackToParent: (parent: FrameNode | null) => boolean = 4412 (parent: FrameNode | null) => { 4413 while (parent !== null) { 4414 let parentTrack = TrackManager.get().getTrackById(parent.getUniqueId()) 4415 if (parentTrack !== undefined) { 4416 parentTrack.childIds.add(this.trackShadow.id) 4417 this.trackShadow.parentId = parentTrack.id 4418 return true; 4419 } 4420 parent = parent.getParent() 4421 } 4422 return false; 4423 } 4424 let attached = attachTrackToParent(parent); 4425 4426 if (!attached) { 4427 node?.commonEvent.setOnAppear(() => { 4428 let attached = attachTrackToParent(parent); 4429 if (attached) { 4430 console.log("Track lazy attached:" + this.trackShadow.id) 4431 } 4432 }) 4433 } 4434 } 4435} 4436 4437export class Track { 4438 public areaPercent: number = 0 4439 private trackTag: string = "" 4440 private trackId: number = 0 4441 4442 constructor() { 4443 } 4444 4445 tag(newTag: string): Track { 4446 this.trackTag = newTag; 4447 return this; 4448 } 4449 4450 id(newId: number): Track { 4451 this.trackId = newId; 4452 return this; 4453 } 4454} 4455 4456export class TrackShadow { 4457 public node: FrameNode | null = null 4458 public id: number = -1 4459 public track: Track | null = null 4460 public childIds: Set<number> = new Set() 4461 public parentId: number = -1 4462 public visibleRect: Rect = { left: 0, top: 0, right: 0, bottom: 0 } 4463 public area: number = 0 4464 public visibleRatio: number = 0 4465 4466 // Output the tracing point tree information through global dump. 4467 dump(depth: number = 0): void { 4468 console.log("Track Dp:" + depth + " id:" + this.id + " areaPer:" + this.track?.areaPercent + " visibleRatio:" + this.visibleRatio) 4469 this.childIds.forEach((value: number) => { 4470 TrackManager.get().getTrackById(value)?.dump(depth + 1) 4471 }) 4472 } 4473} 4474 4475export class TrackManager { 4476 static instance: TrackManager 4477 private trackMap: Map<number, TrackShadow> = new Map() 4478 private rootTrack: TrackShadow | null = null 4479 4480 static get(): TrackManager { 4481 if (TrackManager.instance !== undefined) { 4482 return TrackManager.instance 4483 } 4484 TrackManager.instance = new TrackManager() 4485 return TrackManager.instance 4486 } 4487 4488 addTrack(id: number, track: TrackShadow) { 4489 if (this.trackMap.size == 0) { 4490 this.rootTrack = track 4491 } 4492 console.log("Track add id:" + id) 4493 this.trackMap.set(id, track) 4494 } 4495 4496 removeTrack(id: number) { 4497 let current = this.getTrackById(id) 4498 if (current !== undefined) { 4499 this.trackMap.delete(id) 4500 let parent = this.getTrackById(current?.parentId) 4501 parent?.childIds.delete(id) 4502 } 4503 } 4504 4505 getTrackById(id: number): TrackShadow | undefined { 4506 return this.trackMap.get(id) 4507 } 4508 4509 startListenClick(context: UIContext) { 4510 // Obtain the FrameNode through listening for tracing point information. 4511 context.getUIObserver().on("willClick", (event: ClickEvent, node?: FrameNode) => { 4512 console.log("Track clicked:" + node) 4513 if (node == undefined) { 4514 return 4515 } 4516 let track = this.getTrackById(node.getUniqueId()) 4517 track?.dump(0); 4518 }) 4519 } 4520 4521 updateVisibleInfo(track: TrackShadow): void { 4522 // do something 4523 } 4524 4525 dump(): void { 4526 this.rootTrack?.dump(0) 4527 } 4528} 4529``` 4530## Gesture Event Example 4531```ts 4532import { NodeController, FrameNode } from '@kit.ArkUI'; 4533 4534class MyNodeController extends NodeController { 4535 public rootNode: FrameNode | null = null; 4536 4537 makeNode(uiContext: UIContext): FrameNode | null { 4538 this.rootNode = new FrameNode(uiContext); 4539 this.rootNode.commonAttribute.width(100) 4540 .overlay('This is a FrameNode') 4541 .backgroundColor(Color.Pink) 4542 .width('100%') 4543 .height('100%'); 4544 this.addGestureEvent(this.rootNode); 4545 return this.rootNode; 4546 } 4547 4548 addGestureEvent(frameNode: FrameNode) { 4549 frameNode.gestureEvent.addGesture(new PanGestureHandler() 4550 .onActionStart((event: GestureEvent) => { 4551 console.log(`Pan start: ${JSON.stringify(event)}`); 4552 }) 4553 .onActionUpdate((event: GestureEvent) => { 4554 console.log(`Pan update: ${JSON.stringify(event)}`); 4555 }) 4556 .onActionEnd((event: GestureEvent) => { 4557 console.log(`Pan end: ${JSON.stringify(event)}`); 4558 }) 4559 .onActionCancel(() => { 4560 console.log('Pan cancel'); 4561 }) 4562 ) 4563 frameNode.gestureEvent.addGesture(new LongPressGestureHandler() 4564 .onAction((event: GestureEvent) => { 4565 console.log(`Long press action: ${JSON.stringify(event)}`); 4566 }) 4567 .onActionEnd((event: GestureEvent) => { 4568 console.log(`Long press action end: ${JSON.stringify(event)}`); 4569 }) 4570 .onActionCancel(() => { 4571 console.log('Long press cancel'); 4572 }) 4573 ) 4574 frameNode.gestureEvent.addGesture(new TapGestureHandler() 4575 .onAction((event: GestureEvent) => { 4576 console.log(`Tap action: ${JSON.stringify(event)}`); 4577 }) 4578 ) 4579 } 4580} 4581 4582@Entry 4583@Component 4584struct Index { 4585 private myNodeController: MyNodeController = new MyNodeController(); 4586 4587 build() { 4588 Column() { 4589 NodeContainer(this.myNodeController) 4590 .borderWidth(1) 4591 .width(300) 4592 .height(300) 4593 }.width("100%") 4594 } 4595} 4596``` 4597## Example of Customizing a Node 4598 4599```ts 4600import { UIContext, DrawContext, FrameNode, NodeController, LayoutConstraint, Size, Position } from '@kit.ArkUI'; 4601import { drawing } from '@kit.ArkGraphics2D'; 4602 4603function GetChildLayoutConstraint(constraint: LayoutConstraint, child: FrameNode): LayoutConstraint { 4604 const size = child.getUserConfigSize(); 4605 const width = Math.max( 4606 Math.min(constraint.maxSize.width, size.width.value), 4607 constraint.minSize.width 4608 ); 4609 const height = Math.max( 4610 Math.min(constraint.maxSize.height, size.height.value), 4611 constraint.minSize.height 4612 ); 4613 const finalSize: Size = { width, height }; 4614 const res: LayoutConstraint = { 4615 maxSize: finalSize, 4616 minSize: finalSize, 4617 percentReference: finalSize 4618 }; 4619 4620 return res; 4621} 4622 4623class MyFrameNode extends FrameNode { 4624 public width: number = 10; 4625 private space: number = 1; 4626 4627 onMeasure(constraint: LayoutConstraint): void { 4628 let sizeRes: Size = { width: 100, height: 100 }; 4629 for (let i = 0;i < this.getChildrenCount();i++) { 4630 let child = this.getChild(i); 4631 if (child) { 4632 let childConstraint = GetChildLayoutConstraint(constraint, child); 4633 child.measure(childConstraint); 4634 let size = child.getMeasuredSize(); 4635 sizeRes.height += size.height + this.space; 4636 sizeRes.width = Math.max(sizeRes.width, size.width); 4637 } 4638 } 4639 this.setMeasuredSize(sizeRes); 4640 } 4641 4642 onLayout(position: Position): void { 4643 let y = 0; 4644 for (let i = 0;i < this.getChildrenCount();i++) { 4645 let child = this.getChild(i); 4646 if (child) { 4647 child.layout({ 4648 x: 20, 4649 y: y 4650 }); 4651 y += child.getMeasuredSize().height + this.space; 4652 } 4653 } 4654 this.setLayoutPosition(position); 4655 } 4656 4657 onDraw(context: DrawContext) { 4658 const canvas = context.canvas; 4659 const pen = new drawing.Pen(); 4660 pen.setStrokeWidth(5); 4661 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 4662 canvas.attachPen(pen); 4663 canvas.drawRect({ left: 0, right: this.width, top: 0, bottom: this.width }); 4664 canvas.detachPen(); 4665 } 4666 4667 addWidth() { 4668 this.width += 10; 4669 } 4670} 4671 4672class MyNodeController extends NodeController { 4673 public rootNode: MyFrameNode | null = null; 4674 4675 makeNode(context: UIContext): FrameNode | null { 4676 this.rootNode = new MyFrameNode(context); 4677 this.rootNode?.commonAttribute?.size({ width: 100, height: 100 }).backgroundColor(Color.Green); 4678 return this.rootNode; 4679 } 4680} 4681 4682@Entry 4683@Component 4684struct Index { 4685 private nodeController: MyNodeController = new MyNodeController(); 4686 4687 build() { 4688 Row() { 4689 Column() { 4690 NodeContainer(this.nodeController) 4691 .width('100%') 4692 .height(100) 4693 .backgroundColor('#FFF0F0F0') 4694 Button('Invalidate') 4695 .onClick(() => { 4696 this.nodeController?.rootNode?.addWidth(); 4697 this.nodeController?.rootNode?.invalidate(); 4698 }) 4699 Button('UpdateLayout') 4700 .onClick(() => { 4701 this.nodeController?.rootNode?.setNeedsLayout(); 4702 }) 4703 } 4704 .width('100%') 4705 .height('100%') 4706 } 4707 .height('100%') 4708 } 4709} 4710``` 4711## NodeAdapter Usage Example 4712 4713```ts 4714import { FrameNode, NodeController, NodeAdapter, typeNode } from '@kit.ArkUI'; 4715 4716class MyNodeAdapter extends NodeAdapter { 4717 uiContext: UIContext 4718 cachePool: Array<FrameNode> = new Array(); 4719 changed: boolean = false 4720 reloadTimes: number = 0; 4721 data: Array<string> = new Array(); 4722 hostNode?: FrameNode 4723 4724 constructor(uiContext: UIContext, count: number) { 4725 super(); 4726 this.uiContext = uiContext; 4727 this.totalNodeCount = count; 4728 this.loadData(); 4729 } 4730 4731 reloadData(count: number): void { 4732 this.reloadTimes++; 4733 NodeAdapter.attachNodeAdapter(this, this.hostNode); 4734 this.totalNodeCount = count; 4735 this.loadData(); 4736 this.reloadAllItems(); 4737 } 4738 4739 refreshData(): void { 4740 let items = this.getAllAvailableItems() 4741 console.log("UINodeAdapter get All items:" + items.length); 4742 this.reloadAllItems(); 4743 } 4744 4745 detachData(): void { 4746 NodeAdapter.detachNodeAdapter(this.hostNode); 4747 this.reloadTimes = 0; 4748 } 4749 4750 loadData(): void { 4751 for (let i = 0; i < this.totalNodeCount; i++) { 4752 this.data[i] = "Adapter ListItem " + i + " r:" + this.reloadTimes; 4753 } 4754 } 4755 4756 changeData(from: number, count: number): void { 4757 this.changed = !this.changed; 4758 for (let i = 0; i < count; i++) { 4759 let index = i + from; 4760 this.data[index] = "Adapter ListItem " + (this.changed ? "changed:" : "") + index + " r:" + this.reloadTimes; 4761 } 4762 this.reloadItem(from, count); 4763 } 4764 4765 insertData(from: number, count: number): void { 4766 for (let i = 0; i < count; i++) { 4767 let index = i + from; 4768 this.data.splice(index, 0, "Adapter ListItem " + from + "-" + i); 4769 } 4770 this.insertItem(from, count); 4771 this.totalNodeCount += count; 4772 console.log("UINodeAdapter after insert count:" + this.totalNodeCount); 4773 } 4774 4775 removeData(from: number, count: number): void { 4776 let arr = this.data.splice(from, count); 4777 this.removeItem(from, count); 4778 this.totalNodeCount -= arr.length; 4779 console.log("UINodeAdapter after remove count:" + this.totalNodeCount); 4780 } 4781 4782 moveData(from: number, to: number): void { 4783 let tmp = this.data.splice(from, 1); 4784 this.data.splice(to, 0, tmp[0]); 4785 this.moveItem(from, to); 4786 } 4787 4788 onAttachToNode(target: FrameNode): void { 4789 console.log("UINodeAdapter onAttachToNode id:" + target.getUniqueId()); 4790 this.hostNode = target; 4791 } 4792 4793 onDetachFromNode(): void { 4794 console.log("UINodeAdapter onDetachFromNode"); 4795 } 4796 4797 onGetChildId(index: number): number { 4798 console.log("UINodeAdapter onGetChildId:" + index); 4799 return index; 4800 } 4801 4802 onCreateChild(index: number): FrameNode { 4803 console.log("UINodeAdapter onCreateChild:" + index); 4804 if (this.cachePool.length > 0) { 4805 let cacheNode = this.cachePool.pop(); 4806 if (cacheNode !== undefined) { 4807 console.log("UINodeAdapter onCreateChild reused id:" + cacheNode.getUniqueId()); 4808 let text = cacheNode?.getFirstChild(); 4809 let textNode = text as typeNode.Text; 4810 textNode?.initialize(this.data[index]).fontSize(20); 4811 return cacheNode; 4812 } 4813 } 4814 console.log("UINodeAdapter onCreateChild createNew"); 4815 let itemNode = typeNode.createNode(this.uiContext, "ListItem"); 4816 let textNode = typeNode.createNode(this.uiContext, "Text"); 4817 textNode.initialize(this.data[index]).fontSize(20); 4818 itemNode.appendChild(textNode); 4819 return itemNode; 4820 } 4821 4822 onDisposeChild(id: number, node: FrameNode): void { 4823 console.log("UINodeAdapter onDisposeChild:" + id); 4824 if (this.cachePool.length < 10) { 4825 if (!this.cachePool.includes(node)) { 4826 console.log("UINodeAdapter caching node id:" + node.getUniqueId()); 4827 this.cachePool.push(node); 4828 } 4829 } else { 4830 node.dispose(); 4831 } 4832 } 4833 4834 onUpdateChild(id: number, node: FrameNode): void { 4835 let index = id; 4836 let text = node.getFirstChild(); 4837 let textNode = text as typeNode.Text; 4838 textNode?.initialize(this.data[index]).fontSize(20); 4839 } 4840} 4841 4842class MyNodeAdapterController extends NodeController { 4843 rootNode: FrameNode | null = null; 4844 nodeAdapter: MyNodeAdapter | null = null; 4845 4846 makeNode(uiContext: UIContext): FrameNode | null { 4847 this.rootNode = new FrameNode(uiContext); 4848 let listNode = typeNode.createNode(uiContext, "List"); 4849 listNode.initialize({ space: 3 }).borderWidth(2).borderColor(Color.Black); 4850 this.rootNode.appendChild(listNode); 4851 this.nodeAdapter = new MyNodeAdapter(uiContext, 100); 4852 NodeAdapter.attachNodeAdapter(this.nodeAdapter, listNode); 4853 return this.rootNode; 4854 } 4855} 4856 4857@Entry 4858@Component 4859struct ListNodeTest { 4860 adapterController: MyNodeAdapterController = new MyNodeAdapterController(); 4861 4862 build() { 4863 Column() { 4864 Text("ListNode Adapter"); 4865 NodeContainer(this.adapterController) 4866 .width(300).height(300) 4867 .borderWidth(1).borderColor(Color.Black); 4868 Row() { 4869 Button("Reload") 4870 .onClick(() => { 4871 this.adapterController.nodeAdapter?.reloadData(50); 4872 }) 4873 Button("Change") 4874 .onClick(() => { 4875 this.adapterController.nodeAdapter?.changeData(5, 10) 4876 }) 4877 Button("Insert") 4878 .onClick(() => { 4879 this.adapterController.nodeAdapter?.insertData(10, 10); 4880 }) 4881 } 4882 4883 Row() { 4884 Button("Remove") 4885 .onClick(() => { 4886 this.adapterController.nodeAdapter?.removeData(10, 10); 4887 }) 4888 Button("Move") 4889 .onClick(() => { 4890 this.adapterController.nodeAdapter?.moveData(2, 5); 4891 }) 4892 Button("Refresh") 4893 .onClick(() => { 4894 this.adapterController.nodeAdapter?.refreshData(); 4895 }) 4896 Button("Detach") 4897 .onClick(() => { 4898 this.adapterController.nodeAdapter?.detachData(); 4899 }) 4900 } 4901 }.borderWidth(1) 4902 .width("100%") 4903 } 4904} 4905 4906``` 4907
