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, typeNode, NodeAdapter } from "@kit.ArkUI"; 17``` 18 19## FrameNode 20 21### constructor 22 23constructor(uiContext: UIContext) 24 25Constructor used to create a FrameNode. 26 27**Atomic service API**: This API can be used in atomic services since API version 12. 28 29**System capability**: SystemCapability.ArkUI.ArkUI.Full 30 31**Parameters** 32 33| Name | Type | Mandatory | Description | 34| --------- | ----------------------------------------- | ---- | ---------------------------------- | 35| uiContext | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 36 37### getRenderNode 38 39getRenderNode(): RenderNode | null 40 41Obtains the RenderNode instance held in this FrameNode. 42 43**Atomic service API**: This API can be used in atomic services since API version 12. 44 45**System capability**: SystemCapability.ArkUI.ArkUI.Full 46 47**Return value** 48 49| Type | Description | 50| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 51| [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. | 52 53**Example** 54 55```ts 56import { NodeController, FrameNode } from '@kit.ArkUI'; 57 58class MyNodeController extends NodeController { 59 private rootNode: FrameNode | null = null; 60 61 makeNode(uiContext: UIContext): FrameNode | null { 62 this.rootNode = new FrameNode(uiContext); 63 64 const renderNode = this.rootNode.getRenderNode(); 65 if (renderNode !== null) { 66 renderNode.size = { width: 100, height: 100 }; 67 renderNode.backgroundColor = 0XFFFF0000; 68 } 69 70 return this.rootNode; 71 } 72} 73 74@Entry 75@Component 76struct Index { 77 private myNodeController: MyNodeController = new MyNodeController(); 78 79 build() { 80 Row() { 81 NodeContainer(this.myNodeController) 82 } 83 } 84} 85``` 86### isModifiable<sup>12+</sup> 87 88isModifiable(): boolean 89 90Checks whether this FrameNode is modifiable. 91 92**Atomic service API**: This API can be used in atomic services since API version 12. 93 94**System capability**: SystemCapability.ArkUI.ArkUI.Full 95 96**Return value** 97 98| Type | Description | 99| ------- | ------------------------------------------------------------------------------------------------------------------------------------- | 100| boolean | Whether the current FrameNode is modifiable. When **false** is returned, the FrameNode does not support the **appendChild**, **insertChildAfter**, **removeChild**, and **clearChildren** operations. | 101 102**Example** 103 104See [Example of Node Operations](#example-of-node-operations). 105 106### appendChild<sup>12+</sup> 107 108appendChild(node: FrameNode): void 109 110Appends a child node to this FrameNode. If this FrameNode is not modifiable, an exception is thrown. 111 112**Atomic service API**: This API can be used in atomic services since API version 12. 113 114**System capability**: SystemCapability.ArkUI.ArkUI.Full 115 116**Parameters** 117 118| Name | Type | Mandatory | Description | 119| ------ | ----------------------- | ---- | --------------------- | 120| 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.| 121 122**Error codes** 123 124| ID | Error Message | 125| -------- | -------------------------------- | 126| 100021 | The FrameNode is not modifiable. | 127 128**Example** 129 130See [Example of Node Operations](#example-of-node-operations). 131 132### insertChildAfter<sup>12+</sup> 133 134insertChildAfter(child: FrameNode, sibling: FrameNode | null): void 135 136Inserts a child node after the specified child node of this FrameNode. If this FrameNode is not modifiable, an exception is thrown. 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| 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. | 147| 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. | 148 149**Error codes** 150 151| ID | Error Message | 152| -------- | -------------------------------- | 153| 100021 | The FrameNode is not modifiable. | 154 155**Example** 156 157See [Example of Node Operations](#example-of-node-operations). 158 159### removeChild<sup>12+</sup> 160 161removeChild(node: FrameNode): void 162 163Deletes the specified child node from this FrameNode. If this FrameNode is not modifiable, an exception is thrown. 164 165**Atomic service API**: This API can be used in atomic services since API version 12. 166 167**System capability**: SystemCapability.ArkUI.ArkUI.Full 168 169**Parameters** 170 171| Name | Type | Mandatory | Description | 172| ------ | ----------------------- | ---- | ------------------ | 173| node | [FrameNode](#framenode) | Yes | Child node to delete. | 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### clearChildren<sup>12+</sup> 186 187clearChildren(): void 188 189Clears all child nodes of 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**Error codes** 196 197| ID | Error Message | 198| -------- | -------------------------------- | 199| 100021 | The FrameNode is not modifiable. | 200 201**Example** 202 203See [Example of Node Operations](#example-of-node-operations). 204 205### getChild<sup>12+</sup> 206 207getChild(index: number): FrameNode | null 208 209Obtains the child node in the specified position of this RenderNode. 210 211**Atomic service API**: This API can be used in atomic services since API version 12. 212 213**System capability**: SystemCapability.ArkUI.ArkUI.Full 214 215**Parameters** 216 217| Name | Type | Mandatory | Description | 218| ------ | ------ | ---- | -------------------------- | 219| index | number | Yes | Index of the child node to obtain. | 220 221**Return value** 222 223| Type | Description | 224| ------------------------------- | ------------------------------------------------------------- | 225| [FrameNode](#framenode) \| null | Child node obtained. If the FrameNode does not contain the specified child node, null is returned. | 226 227**Example** 228 229See [Example of Node Operations](#example-of-node-operations). 230### getFirstChild<sup>12+</sup> 231 232getFirstChild(): FrameNode | null 233 234Obtains the first child node of this FrameNode. 235 236**Atomic service API**: This API can be used in atomic services since API version 12. 237 238**System capability**: SystemCapability.ArkUI.ArkUI.Full 239 240**Return value** 241 242| Type | Description | 243| ------------------------------- | --------------------------------------------------------- | 244| [FrameNode](#framenode) \| null | First child node. If the FrameNode does not contain any child node, null is returned. | 245 246**Example** 247 248See [Example of Node Operations](#example-of-node-operations). 249 250### getNextSibling<sup>12+</sup> 251 252getNextSibling(): FrameNode | null 253 254Obtains the next sibling node of this FrameNode. 255 256**Atomic service API**: This API can be used in atomic services since API version 12. 257 258**System capability**: SystemCapability.ArkUI.ArkUI.Full 259 260**Return value** 261 262| Type | Description | 263| ------------------------------- | ------------------------------------------------------------------------------------ | 264| [FrameNode](#framenode) \| null | Next sibling node of the current FrameNode. If the FrameNode does not have the next sibling node, null is returned. | 265 266**Example** 267 268See [Example of Node Operations](#example-of-node-operations). 269 270### getPreviousSibling<sup>12+</sup> 271 272getPreviousSibling(): FrameNode | null 273 274Obtains the previous sibling node of this FrameNode. 275 276**Atomic service API**: This API can be used in atomic services since API version 12. 277 278**System capability**: SystemCapability.ArkUI.ArkUI.Full 279 280**Return value** 281 282| Type | Description | 283| -------------------------------- | ------------------------------------------------------------------------------------ | 284| [FrameNode](#framenode) \| null | Previous sibling node of the current FrameNode. If the FrameNode does not have the previous sibling node, null is returned. | 285 286**Example** 287 288See [Example of Node Operations](#example-of-node-operations). 289 290### getParent<sup>12+</sup> 291 292getParent(): FrameNode | null; 293 294Obtains the parent node of this FrameNode. 295 296**Atomic service API**: This API can be used in atomic services since API version 12. 297 298**System capability**: SystemCapability.ArkUI.ArkUI.Full 299 300**Return value** 301 302| Type | Description | 303| -------------------------------- | -------------------------------------------------------------------- | 304| [FrameNode](#framenode) \| null | Parent node of the current FrameNode. If the FrameNode does not contain a parent node, null is returned. | 305 306**Example** 307 308See [Example of Node Operations](#example-of-node-operations). 309 310 311### getChildrenCount<sup>12+</sup> 312 313 getChildrenCount(): number; 314 315Obtains the number of child nodes of this FrameNode. 316 317**Atomic service API**: This API can be used in atomic services since API version 12. 318 319**System capability**: SystemCapability.ArkUI.ArkUI.Full 320 321**Return value** 322 323| Type | Description | 324| -------- | ------------------------------- | 325| number | Number of child nodes of the current FrameNode. | 326 327**Example** 328 329See [Example of Node Operations](#example-of-node-operations). 330 331### getPositionToWindow<sup>12+</sup> 332 333 getPositionToWindow(): Position 334 335Obtains the position offset of this FrameNode relative to the window. 336 337**Atomic service API**: This API can be used in atomic services since API version 12. 338 339**System capability**: SystemCapability.ArkUI.ArkUI.Full 340 341**Return value** 342 343| Type | Description | 344| -------- | ------------------------------- | 345| [Position](./js-apis-arkui-graphics.md#position) | Position offset of the node relative to the window. | 346 347**Example** 348 349See [Example of Node Operations](#example-of-node-operations). 350 351 352### getPositionToParent<sup>12+</sup> 353 354getPositionToParent(): Position 355 356Obtains the position offset of this FrameNode relative to the parent component. 357 358**Atomic service API**: This API can be used in atomic services since API version 12. 359 360**System capability**: SystemCapability.ArkUI.ArkUI.Full 361 362**Return value** 363 364| Type | Description | 365| -------------------------------------------------------------- | --------------------------------------------------------------------- | 366| [Position](./js-apis-arkui-graphics.md#position) | Position offset of the node relative to the parent component. | 367 368**Example** 369 370See [Example of Node Operations](#example-of-node-operations). 371 372### getPositionToScreen<sup>12+</sup> 373 374 getPositionToScreen(): Position 375 376Obtains the position offset of this FrameNode relative to the screen. 377 378**Atomic service API**: This API can be used in atomic services since API version 12. 379 380**System capability**: SystemCapability.ArkUI.ArkUI.Full 381 382**Return value** 383 384| Type | Description | 385| -------- | ------------------------------- | 386| [Position](./js-apis-arkui-graphics.md#position) | Position offset of the node relative to the screen. | 387 388**Example** 389 390See [Example of Node Operations](#example-of-node-operations). 391 392 393### getPositionToParentWithTransform<sup>12+</sup> 394 395getPositionToParentWithTransform(): Position 396 397Obtains 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. 398 399**Atomic service API**: This API can be used in atomic services since API version 12. 400 401**System capability**: SystemCapability.ArkUI.ArkUI.Full 402 403**Return value** 404 405| Type | Description | 406| -------------------------------------------------------------- | --------------------------------------------------------------------- | 407| [Position](./js-apis-arkui-graphics.md#position) | Position offset of the node relative to the parent component. 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. | 408 409**Example** 410 411See [Example of Node Operations](#example-of-node-operations). 412 413### getPositionToWindowWithTransform<sup>12+</sup> 414 415getPositionToWindowWithTransform(): Position 416 417Obtains 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. 418 419**Atomic service API**: This API can be used in atomic services since API version 12. 420 421**System capability**: SystemCapability.ArkUI.ArkUI.Full 422 423**Return value** 424 425| Type | Description | 426| -------------------------------------------------------------- | --------------------------------------------------------------------- | 427| [Position](./js-apis-arkui-graphics.md#position) | Position offset of the node relative to the window. 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. | 428 429**Example** 430 431See [Example of Node Operations](#example-of-node-operations). 432 433### getPositionToScreenWithTransform<sup>12+</sup> 434 435getPositionToScreenWithTransform(): Position 436 437Obtains 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. 438 439**Atomic service API**: This API can be used in atomic services since API version 12. 440 441**System capability**: SystemCapability.ArkUI.ArkUI.Full 442 443**Return value** 444 445| Type | Description | 446| -------------------------------------------------------------- | --------------------------------------------------------------------- | 447| [Position](./js-apis-arkui-graphics.md#position) | Position offset of the node relative to the screen. 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. | 448 449**Example** 450 451See [Example of Node Operations](#example-of-node-operations). 452 453 454### getMeasuredSize<sup>12+</sup> 455 456getMeasuredSize(): Size 457 458Obtains the measured size of this FrameNode. 459 460**Atomic service API**: This API can be used in atomic services since API version 12. 461 462**System capability**: SystemCapability.ArkUI.ArkUI.Full 463 464**Return value** 465 466| Type | Description | 467| -------------------------------------------------------------- | --------------------------------------------------------------------- | 468| [Size](./js-apis-arkui-graphics.md#size) | Measured size of the node. | 469 470**Example** 471 472See [Example of Node Operations](#example-of-node-operations). 473 474 475### getLayoutPosition<sup>12+</sup> 476 477getLayoutPosition(): Position 478 479Obtains the position offset of this FrameNode relative to the parent component after layout. 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. 480 481**Atomic service API**: This API can be used in atomic services since API version 12. 482 483**System capability**: SystemCapability.ArkUI.ArkUI.Full 484 485**Return value** 486 487| Type | Description | 488| -------------------------------------------------------------- | --------------------------------------------------------------------- | 489| [Position](./js-apis-arkui-graphics.md#position) | Position offset relative to the parent component after layout. | 490 491**Example** 492 493See [Example of Node Operations](#example-of-node-operations). 494 495### getUserConfigBorderWidth<sup>12+</sup> 496 497getUserConfigBorderWidth(): Edges\<LengthMetrics\> 498 499Obtains the border width set by the user. 500 501**Atomic service API**: This API can be used in atomic services since API version 12. 502 503**System capability**: SystemCapability.ArkUI.ArkUI.Full 504 505**Return value** 506 507| Type | Description | 508| -------------------------------------------------------------- | --------------------------------------------------------------------- | 509| [Edges](./js-apis-arkui-graphics.md#edgest12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | Border width set by the user. | 510 511**Example** 512 513See [Example of Node Operations](#example-of-node-operations). 514 515### getUserConfigPadding<sup>12+</sup> 516 517getUserConfigPadding(): Edges\<LengthMetrics\> 518 519Obtains the padding set by the user. 520 521**Atomic service API**: This API can be used in atomic services since API version 12. 522 523**System capability**: SystemCapability.ArkUI.ArkUI.Full 524 525**Return value** 526 527| Type | Description | 528| -------------------------------------------------------------- | --------------------------------------------------------------------- | 529| [Edges](./js-apis-arkui-graphics.md#edgest12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | Padding set by the user. | 530 531**Example** 532 533See [Example of Node Operations](#example-of-node-operations). 534 535### getUserConfigMargin<sup>12+</sup> 536 537getUserConfigMargin(): Edges\<LengthMetrics\> 538 539Obtains the margin set by the user. 540 541**Atomic service API**: This API can be used in atomic services since API version 12. 542 543**System capability**: SystemCapability.ArkUI.ArkUI.Full 544 545**Return value** 546 547| Type | Description | 548| -------------------------------------------------------------- | --------------------------------------------------------------------- | 549| [Edges](./js-apis-arkui-graphics.md#edgest12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | Margin set by the user. | 550 551**Example** 552 553See [Example of Node Operations](#example-of-node-operations). 554 555### getUserConfigSize<sup>12+</sup> 556 557getUserConfigSize(): SizeT\<LengthMetrics\> 558 559Obtains the width and height set by the user. 560 561**Atomic service API**: This API can be used in atomic services since API version 12. 562 563**System capability**: SystemCapability.ArkUI.ArkUI.Full 564 565**Return value** 566 567| Type | Description | 568| ------------------------------------------------------------ | ---------------- | 569| [SizeT](./js-apis-arkui-graphics.md#sizett12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | Width and height set by the user. | 570 571**Example** 572 573See [Example of Node Operations](#example-of-node-operations). 574 575### getId<sup>12+</sup> 576 577getId(): string 578 579Obtains the node ID set by the user (the [ID](./arkui-ts/ts-universal-attributes-component-id.md) set in the universal attributes). 580 581**Atomic service API**: This API can be used in atomic services since API version 12. 582 583**System capability**: SystemCapability.ArkUI.ArkUI.Full 584 585**Return value** 586 587| Type | Description | 588| -------------------------------------------------------------- | --------------------------------------------------------------------- | 589| string | Node ID set by the user (the [ID](./arkui-ts/ts-universal-attributes-component-id.md) set in the universal attributes). | 590 591**Example** 592 593See [Example of Node Operations](#example-of-node-operations). 594 595### getUniqueId<sup>12+</sup> 596 597getUniqueId(): number 598 599Obtains the system-assigned unique ID of the node. 600 601**Atomic service API**: This API can be used in atomic services since API version 12. 602 603**System capability**: SystemCapability.ArkUI.ArkUI.Full 604 605**Return value** 606 607| Type | Description | 608| -------------------------------------------------------------- | --------------------------------------------------------------------- | 609| number | System-assigned unique ID of the node. | 610 611**Example** 612 613See [Example of Node Operations](#example-of-node-operations). 614 615### getNodeType<sup>12+</sup> 616 617getNodeType(): string 618 619Obtains 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__. 620 621**Atomic service API**: This API can be used in atomic services since API version 12. 622 623**System capability**: SystemCapability.ArkUI.ArkUI.Full 624 625**Return value** 626 627| Type | Description | 628| -------------------------------------------------------------- | --------------------------------------------------------------------- | 629| string | Type of the node. | 630 631**Example** 632 633See [Example of Node Operations](#example-of-node-operations). 634 635### getOpacity<sup>12+</sup> 636 637getOpacity(): number 638 639Obtains the opacity of the node. The minimum value is 0, and the maximum value is 1. 640 641**Atomic service API**: This API can be used in atomic services since API version 12. 642 643**System capability**: SystemCapability.ArkUI.ArkUI.Full 644 645**Return value** 646 647| Type | Description | 648| -------------------------------------------------------------- | --------------------------------------------------------------------- | 649| number | Opacity of the node. | 650 651**Example** 652 653See [Example of Node Operations](#example-of-node-operations). 654 655### isVisible<sup>12+</sup> 656 657isVisible(): boolean 658 659Obtains whether the node is visible. 660 661**Atomic service API**: This API can be used in atomic services since API version 12. 662 663**System capability**: SystemCapability.ArkUI.ArkUI.Full 664 665**Return value** 666 667| Type | Description | 668| -------------------------------------------------------------- | --------------------------------------------------------------------- | 669| boolean | Whether the node is visible. | 670 671**Example** 672 673See [Example of Node Operations](#example-of-node-operations). 674 675### isClipToFrame<sup>12+</sup> 676 677isClipToFrame(): boolean 678 679Obtains whether the node is clipped to the component area. 680 681**Atomic service API**: This API can be used in atomic services since API version 12. 682 683**System capability**: SystemCapability.ArkUI.ArkUI.Full 684 685**Return value** 686 687| Type | Description | 688| -------------------------------------------------------------- | --------------------------------------------------------------------- | 689| boolean | Whether the node is clipped to the component area. | 690 691**Example** 692 693See [Example of Node Operations](#example-of-node-operations). 694 695### isAttached<sup>12+</sup> 696 697isAttached(): boolean 698 699Obtains whether the node is mounted to the main node tree. 700 701**Atomic service API**: This API can be used in atomic services since API version 12. 702 703**System capability**: SystemCapability.ArkUI.ArkUI.Full 704 705**Return value** 706 707| Type | Description | 708| -------------------------------------------------------------- | --------------------------------------------------------------------- | 709| boolean | Whether the node is mounted to the main node tree. | 710 711**Example** 712 713See [Example of Node Operations](#example-of-node-operations). 714 715### getInspectorInfo<sup>12+</sup> 716 717getInspectorInfo(): Object 718 719Obtains the structure information of the node, which is consistent with what is found in DevEco Studio's built-in ArkUI Inspector tool. 720 721**Atomic service API**: This API can be used in atomic services since API version 12. 722 723**System capability**: SystemCapability.ArkUI.ArkUI.Full 724 725**Return value** 726 727| Type | Description | 728| -------------------------------------------------------------- | --------------------------------------------------------------------- | 729| Object | Structure information of the node. | 730 731**Example** 732 733See [Example of Node Operations](#example-of-node-operations). 734 735### getCustomProperty<sup>12+</sup> 736 737getCustomProperty(name: string): Object | undefined 738 739Obtains the component's custom property by its name. 740 741**Atomic service API**: This API can be used in atomic services since API version 12. 742 743**System capability**: SystemCapability.ArkUI.ArkUI.Full 744 745**Parameters** 746 747| Name | Type | Mandatory | Description | 748| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 749| name | string | Yes | Name of the custom property. | 750 751**Return value** 752 753| Type | Description | 754| -------------------------------------------------------------- | --------------------------------------------------------------------- | 755| Object \| undefined | Value of the custom property. | 756 757**Example** 758 759See [Example of Node Operations](#example-of-node-operations). 760 761### dispose<sup>12+</sup> 762 763dispose(): void 764 765Disposes of this FrameNode. 766 767**Atomic service API**: This API can be used in atomic services since API version 12. 768 769**System capability**: SystemCapability.ArkUI.ArkUI.Full 770 771**Example** 772 773```ts 774import { NodeController, FrameNode, BuilderNode } from '@kit.ArkUI'; 775 776@Component 777struct TestComponent { 778 build() { 779 Column() { 780 Text('This is a BuilderNode.') 781 .fontSize(16) 782 .fontWeight(FontWeight.Bold) 783 } 784 .width('100%') 785 .backgroundColor(Color.Gray) 786 } 787 788 aboutToAppear() { 789 console.error('aboutToAppear'); 790 } 791 792 aboutToDisappear() { 793 console.error('aboutToDisappear'); 794 } 795} 796 797@Builder 798function buildComponent() { 799 TestComponent() 800} 801 802class MyNodeController extends NodeController { 803 private rootNode: FrameNode | null = null; 804 private builderNode: BuilderNode<[]> | null = null; 805 806 makeNode(uiContext: UIContext): FrameNode | null { 807 this.rootNode = new FrameNode(uiContext); 808 this.builderNode = new BuilderNode(uiContext, { selfIdealSize: { width: 200, height: 100 } }); 809 this.builderNode.build(new WrappedBuilder(buildComponent)); 810 811 const rootRenderNode = this.rootNode.getRenderNode(); 812 if (rootRenderNode !== null) { 813 rootRenderNode.size = { width: 200, height: 200 }; 814 rootRenderNode.backgroundColor = 0xff00ff00; 815 rootRenderNode.appendChild(this.builderNode!.getFrameNode()!.getRenderNode()); 816 } 817 818 return this.rootNode; 819 } 820 821 disposeFrameNode() { 822 if (this.rootNode !== null && this.builderNode !== null) { 823 this.rootNode.removeChild(this.builderNode.getFrameNode()); 824 this.builderNode.dispose(); 825 826 this.rootNode.dispose(); 827 } 828 } 829 830 removeBuilderNode() { 831 const rootRenderNode = this.rootNode!.getRenderNode(); 832 if (rootRenderNode !== null && this.builderNode !== null && this.builderNode.getFrameNode() !== null) { 833 rootRenderNode.removeChild(this.builderNode!.getFrameNode()!.getRenderNode()); 834 } 835 } 836} 837 838@Entry 839@Component 840struct Index { 841 private myNodeController: MyNodeController = new MyNodeController(); 842 843 build() { 844 Column({ space: 4 }) { 845 NodeContainer(this.myNodeController) 846 Button('FrameNode dispose') 847 .onClick(() => { 848 this.myNodeController.disposeFrameNode(); 849 }) 850 .width('100%') 851 } 852 } 853} 854``` 855 856### commonAttribute<sup>12+</sup> 857 858get commonAttribute(): CommonAttribute 859 860Obtains the **CommonAttribute** object held in this FrameNode for setting common attributes. 861 862Note that only the attributes of a custom node can be modified. 863 864**Atomic service API**: This API can be used in atomic services since API version 12. 865 866**System capability**: SystemCapability.ArkUI.ArkUI.Full 867 868**Return value** 869 870| Type | Description | 871| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 872| CommonAttribute | **CommonAttribute** object held in the current FrameNode for setting common attributes.| 873 874> **NOTE** 875> 876> 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. 877> 878> For details about the supported attributes, see [CommonModifier](./arkui-ts/ts-universal-attributes-attribute-modifier.md#custom-modifier). 879 880**Example** 881 882See [Basic Event Example](#basic-event-example). 883 884### commonEvent<sup>12+</sup> 885 886get commonEvent(): UICommonEvent 887 888Obtains 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. 889 890In 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. 891 892**Atomic service API**: This API can be used in atomic services since API version 12. 893 894**System capability**: SystemCapability.ArkUI.ArkUI.Full 895 896**Return value** 897 898| Type | Description | 899| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 900| [UICommonEvent](./arkui-ts/ts-uicommonevent.md#common-event-callback) | **UICommonEvent** object, which is used to set basic events. | 901 902**Example** 903 904See [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). 905 906### onDraw<sup>12+</sup> 907 908onDraw?(context: DrawContext): void 909 910Called when this FrameNode performs content rendering. 911 912**Atomic service API**: This API can be used in atomic services since API version 12. 913 914**System capability**: SystemCapability.ArkUI.ArkUI.Full 915 916**Parameters** 917 918| Name | Type | Mandatory | Description | 919| ------- | ------------------------------------------------------ | ---- | ---------------- | 920| context | [DrawContext](./js-apis-arkui-graphics.md#drawcontext) | Yes | Graphics drawing context. The self-drawing area cannot exceed the component's own size. | 921 922**Example** 923 924See [Example of Customizing a Node](#example-of-customizing-a-node). 925 926### onMeasure<sup>12+</sup> 927 928onMeasure(constraint: LayoutConstraint): void 929 930Called when this FrameNode needs to determine its size. This API provides custom measurement and overrides the default measurement method. 931 932**Atomic service API**: This API can be used in atomic services since API version 12. 933 934**System capability**: SystemCapability.ArkUI.ArkUI.Full 935 936**Parameters** 937 938| Name | Type | Mandatory | Description | 939| ------- | ------------------------------------------------------ | ---- | ---------------- | 940| constraint | [LayoutConstraint](#layoutconstraint12) | Yes | Layout constraints used by the component for measurement. | 941 942**Example** 943 944See [Example of Customizing a Node](#example-of-customizing-a-node). 945 946### LayoutConstraint<sup>12+</sup> 947 948Describes the layout constraints of the component. 949 950**Atomic service API**: This API can be used in atomic services since API version 12. 951 952**System capability**: SystemCapability.ArkUI.ArkUI.Full 953 954| Name | Type | Mandatory | Description | 955| -------------- | ------ | ----- | ------------------------------------------ | 956| maxSize | [Size](./js-apis-arkui-graphics.md#size) | Yes | Maximum size. | 957| minSize | [Size](./js-apis-arkui-graphics.md#size) | Yes | Minimum size. | 958| percentReference | [Size](./js-apis-arkui-graphics.md#size) | Yes | Size reference for calculating the percentage of a child node. 959 960### onLayout<sup>12+</sup> 961 962onLayout(position: Position): void 963 964Called 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. 965 966**Atomic service API**: This API can be used in atomic services since API version 12. 967 968**System capability**: SystemCapability.ArkUI.ArkUI.Full 969 970**Parameters** 971 972| Name | Type | Mandatory | Description | 973| ------- | ------------------------------------------------------ | ---- | ---------------- | 974| position | [Position](./js-apis-arkui-graphics.md#position) | Yes | Position information used in layout. | 975 976**Example** 977 978See [Example of Customizing a Node](#example-of-customizing-a-node). 979 980### setMeasuredSize<sup>12+</sup> 981 982setMeasuredSize(size: Size): void 983 984Sets 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. 985 986**Atomic service API**: This API can be used in atomic services since API version 12. 987 988**System capability**: SystemCapability.ArkUI.ArkUI.Full 989 990**Parameters** 991 992| Name | Type | Mandatory | Description | 993| ------- | ------------------------------------------------------ | ---- | ---------------- | 994| size | [Size](./js-apis-arkui-graphics.md#size) | Yes | Measured size of the FrameNode. | 995 996**Example** 997 998See [Example of Customizing a Node](#example-of-customizing-a-node). 999 1000### setLayoutPosition<sup>12+</sup> 1001 1002setLayoutPosition(position: Position): void 1003 1004Sets the position of this FrameNode after layout. The default unit is PX. 1005 1006**Atomic service API**: This API can be used in atomic services since API version 12. 1007 1008**System capability**: SystemCapability.ArkUI.ArkUI.Full 1009 1010**Parameters** 1011 1012| Name | Type | Mandatory | Description | 1013| ------- | ------------------------------------------------------ | ---- | ---------------- | 1014| position | [Position](./js-apis-arkui-graphics.md#position) | Yes | Position of the FrameNode after layout. | 1015 1016**Example** 1017 1018See [Example of Customizing a Node](#example-of-customizing-a-node). 1019 1020### measure<sup>12+</sup> 1021 1022measure(constraint: LayoutConstraint): void 1023 1024Measures 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). 1025 1026**Atomic service API**: This API can be used in atomic services since API version 12. 1027 1028**System capability**: SystemCapability.ArkUI.ArkUI.Full 1029 1030**Parameters** 1031 1032| Name | Type | Mandatory | Description | 1033| ------- | ------------------------------------------------------ | ---- | ---------------- | 1034| constraint | [LayoutConstraint](#layoutconstraint12) | Yes | Parent container layout constraints used for measurement. | 1035 1036**Example** 1037 1038See [Example of Customizing a Node](#example-of-customizing-a-node). 1039 1040### layout<sup>12+</sup> 1041 1042layout(position: Position): void 1043 1044Lays 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). 1045 1046**Atomic service API**: This API can be used in atomic services since API version 12. 1047 1048**System capability**: SystemCapability.ArkUI.ArkUI.Full 1049 1050**Parameters** 1051 1052| Name | Type | Mandatory | Description | 1053| ------- | ------------------------------------------------------ | ---- | ---------------- | 1054| position | [Position](./js-apis-arkui-graphics.md#position) | Yes | Position information used in layout. | 1055 1056**Example** 1057 1058See [Example of Customizing a Node](#example-of-customizing-a-node). 1059 1060### setNeedsLayout<sup>12+</sup> 1061 1062setNeedsLayout(): void 1063 1064Marks this FrameNode as needing layout, so that it will be relaid out in the next frame. 1065 1066**Atomic service API**: This API can be used in atomic services since API version 12. 1067 1068**System capability**: SystemCapability.ArkUI.ArkUI.Full 1069 1070**Example** 1071 1072See [Example of Customizing a Node](#example-of-customizing-a-node). 1073 1074### invalidate<sup>12+</sup> 1075 1076invalidate(): void 1077 1078Invalidates this FrameNode to trigger a re-rendering of the self-drawing content. 1079 1080**Atomic service API**: This API can be used in atomic services since API version 12. 1081 1082**System capability**: SystemCapability.ArkUI.ArkUI.Full 1083 1084### addComponentContent<sup>12+</sup> 1085 1086addComponentContent\<T>(content: ComponentContent\<T>): void 1087 1088Adds component content. 1089 1090**Atomic service API**: This API can be used in atomic services since API version 12. 1091 1092**System capability**: SystemCapability.ArkUI.ArkUI.Full 1093 1094**Parameters** 1095 1096| Name | Type | Mandatory | Description | 1097| ------- | ------------------------------------------------------ | ---- | ---------------- | 1098| content | [ComponentContent](./js-apis-arkui-ComponentContent.md#componentcontent)\<T> | Yes | Component content to display on the FrameNode. | 1099 1100```ts 1101import { NodeController, FrameNode, ComponentContent, typeNode } from '@kit.ArkUI'; 1102 1103@Builder 1104function buildText() { 1105 Column() { 1106 Text('hello') 1107 .width(50) 1108 .height(50) 1109 .backgroundColor(Color.Yellow) 1110 } 1111} 1112 1113class MyNodeController extends NodeController { 1114 makeNode(uiContext: UIContext): FrameNode | null { 1115 let node = new FrameNode(uiContext) 1116 node.commonAttribute.width(300).height(300).backgroundColor(Color.Red) 1117 let col = typeNode.createNode(uiContext, "Column") 1118 col.initialize({ space: 10 }) 1119 node.appendChild(col) 1120 let row4 = typeNode.createNode(uiContext, "Row") 1121 row4.attribute.width(200) 1122 .height(200) 1123 .borderWidth(1) 1124 .borderColor(Color.Black) 1125 .backgroundColor(Color.Green) 1126 let component = new ComponentContent<Object>(uiContext, wrapBuilder(buildText)) 1127 if (row4.isModifiable()) { 1128 row4.addComponentContent(component) 1129 col.appendChild(row4) 1130 } 1131 return node 1132 } 1133} 1134 1135@Entry 1136@Component 1137struct FrameNodeTypeTest { 1138 private myNodeController: MyNodeController = new MyNodeController(); 1139 1140 build() { 1141 Row() { 1142 NodeContainer(this.myNodeController); 1143 } 1144 } 1145} 1146``` 1147 1148### disposeTree<sup>12+</sup> 1149 1150disposeTree(): void 1151 1152Traverses down the tree and recursively releases the subtree with this node as the root. 1153 1154**Atomic service API**: This API can be used in atomic services since API version 12. 1155 1156**System capability**: SystemCapability.ArkUI.ArkUI.Full 1157 1158```ts 1159import { FrameNode, NodeController, BuilderNode } from '@kit.ArkUI'; 1160 1161@Component 1162struct TestComponent { 1163 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent2)); 1164 1165 build() { 1166 Column() { 1167 Text('This is a BuilderNode.') 1168 .fontSize(16) 1169 .fontWeight(FontWeight.Bold) 1170 NodeContainer(this.myNodeController) 1171 } 1172 .width('100%') 1173 .backgroundColor(Color.Gray) 1174 } 1175 1176 aboutToAppear() { 1177 console.error('BuilderNode aboutToAppear'); 1178 } 1179 1180 aboutToDisappear() { 1181 console.error('BuilderNode aboutToDisappear'); 1182 } 1183} 1184 1185@Component 1186struct TestComponent2 { 1187 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent3)); 1188 private myNodeController2: MyNodeController = new MyNodeController(wrapBuilder(buildComponent4)); 1189 1190 build() { 1191 Column() { 1192 Text('This is a BuilderNode 2.') 1193 .fontSize(16) 1194 .fontWeight(FontWeight.Bold) 1195 NodeContainer(this.myNodeController) 1196 NodeContainer(this.myNodeController2) 1197 } 1198 .width('100%') 1199 .backgroundColor(Color.Gray) 1200 } 1201 1202 aboutToAppear() { 1203 console.error('BuilderNode 2 aboutToAppear'); 1204 } 1205 1206 aboutToDisappear() { 1207 console.error('BuilderNode 2 aboutToDisappear'); 1208 } 1209} 1210 1211@Component 1212struct TestComponent3 { 1213 build() { 1214 Column() { 1215 Text('This is a BuilderNode 3.') 1216 .fontSize(16) 1217 .fontWeight(FontWeight.Bold) 1218 1219 } 1220 .width('100%') 1221 .backgroundColor(Color.Gray) 1222 } 1223 1224 aboutToAppear() { 1225 console.error('BuilderNode 3 aboutToAppear'); 1226 } 1227 1228 aboutToDisappear() { 1229 console.error('BuilderNode 3 aboutToDisappear'); 1230 } 1231} 1232 1233@Component 1234struct TestComponent4 { 1235 build() { 1236 Column() { 1237 Text('This is a BuilderNode 4.') 1238 .fontSize(16) 1239 .fontWeight(FontWeight.Bold) 1240 1241 } 1242 .width('100%') 1243 .backgroundColor(Color.Gray) 1244 } 1245 1246 aboutToAppear() { 1247 console.error('BuilderNode 4 aboutToAppear'); 1248 } 1249 1250 aboutToDisappear() { 1251 console.error('BuilderNode 4 aboutToDisappear'); 1252 } 1253} 1254 1255@Builder 1256function buildComponent() { 1257 TestComponent() 1258} 1259 1260@Builder 1261function buildComponent2() { 1262 TestComponent2() 1263} 1264 1265@Builder 1266function buildComponent3() { 1267 TestComponent3() 1268} 1269 1270@Builder 1271function buildComponent4() { 1272 TestComponent4() 1273} 1274 1275class MyNodeController extends NodeController { 1276 private rootNode: FrameNode | null = null; 1277 private builderNode: BuilderNode<[]> | null = null; 1278 private wrappedBuilder: WrappedBuilder<[]>; 1279 1280 constructor(builder: WrappedBuilder<[]>) { 1281 super(); 1282 this.wrappedBuilder = builder; 1283 } 1284 1285 makeNode(uiContext: UIContext): FrameNode | null { 1286 this.builderNode = new BuilderNode(uiContext, { selfIdealSize: { width: 200, height: 100 } }); 1287 this.builderNode.build(this.wrappedBuilder); 1288 1289 return this.builderNode.getFrameNode(); 1290 } 1291 1292 dispose() { 1293 if (this.builderNode !== null) { 1294 this.builderNode.getFrameNode()?.disposeTree() 1295 } 1296 } 1297 1298 removeBuilderNode() { 1299 const rootRenderNode = this.rootNode!.getRenderNode(); 1300 if (rootRenderNode !== null && this.builderNode !== null && this.builderNode.getFrameNode() !== null) { 1301 rootRenderNode.removeChild(this.builderNode!.getFrameNode()!.getRenderNode()); 1302 } 1303 } 1304} 1305 1306@Entry 1307@Component 1308struct Index { 1309 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent)); 1310 1311 build() { 1312 Column({ space: 4 }) { 1313 NodeContainer(this.myNodeController) 1314 Button('BuilderNode dispose') 1315 .onClick(() => { 1316 this.myNodeController.dispose(); 1317 }) 1318 .width('100%') 1319 Button('BuilderNode rebuild') 1320 .onClick(() => { 1321 this.myNodeController.rebuild(); 1322 }) 1323 .width('100%') 1324 } 1325 } 1326} 1327``` 1328 1329**Example** 1330 1331See [Example of Customizing a Node](#example-of-customizing-a-node). 1332 1333## TypedFrameNode<sup>12+</sup> 1334 1335Inherits from [FrameNode](#framenode), used to declare a specific type of FrameNode. 1336 1337### initialize<sup>12+</sup> 1338 1339initialize: C 1340 1341Creates construction parameters of a component to set or update the initial value of the component. 1342 1343**Atomic service API**: This API can be used in atomic services since API version 12. 1344 1345**System capability**: SystemCapability.ArkUI.ArkUI.Full 1346 1347### attribute<sup>12+</sup> 1348 1349attribute(): T 1350 1351Obtains the attribute setting object of a component to set or update the common and private attributes of the component. 1352 1353**Atomic service API**: This API can be used in atomic services since API version 12. 1354 1355**System capability**: SystemCapability.ArkUI.ArkUI.Full 1356 1357## typeNode<sup>12+</sup> 1358 1359Provides 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. 1360 1361**Example** 1362 1363For details, see [Example of Customizing a Node of a Specific Type](#example-of-customizing-a node-of-a-specific-type). 1364 1365### Text<sup>12+</sup> 1366type Text = TypedFrameNode<TextInterface, TextAttribute> 1367 1368Represents a FrameNode of the Text type. 1369 1370**Atomic service API**: This API can be used in atomic services since API version 12. 1371 1372**System capability**: SystemCapability.ArkUI.ArkUI.Full 1373 1374| Type | Description | 1375| ----------------------------- | -------------------- | 1376| TypedFrameNode<TextInterface, TextAttribute> | FrameNode of the Text type.<br>**NOTE**<br> **TextInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **Text** component. | 1377 1378### createNode('Text')<sup>12+</sup> 1379createNode(context: UIContext, nodeType: 'Text'): Text 1380 1381Create a FrameNode of the Text type. 1382 1383**Atomic service API**: This API can be used in atomic services since API version 12. 1384 1385**System capability**: SystemCapability.ArkUI.ArkUI.Full 1386 1387**Parameters** 1388 1389| Name | Type | Mandatory | Description | 1390| ------------------ | ------------------ | ------------------- | ------------------- | 1391| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1392| nodeType | 'Text' | Yes | Node type. | 1393 1394**Return value** 1395 1396| Type | Description | 1397| ------------------ | ------------------ | 1398| [Text](#text12) | FrameNode node of the Text type. | 1399 1400**Example** 1401 1402```ts 1403typeNode.createNode(uiContext, 'Text'); 1404``` 1405 1406### Column<sup>12+</sup> 1407type Column = TypedFrameNode<ColumnInterface, ColumnAttribute> 1408 1409Represents a FrameNode of the Text type. 1410 1411**Atomic service API**: This API can be used in atomic services since API version 12. 1412 1413**System capability**: SystemCapability.ArkUI.ArkUI.Full 1414 1415| Type | Description | 1416| ----------------------------- | -------------------- | 1417| TypedFrameNode<ColumnInterface, ColumnAttribute> | FrameNode of the Column type.<br>**NOTE**<br> **ColumnInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **Column** component. | 1418 1419### createNode('Column')<sup>12+</sup> 1420createNode(context: UIContext, nodeType: 'Column'): Column 1421 1422Creates a FrameNode of the Column type. 1423 1424**Atomic service API**: This API can be used in atomic services since API version 12. 1425 1426**System capability**: SystemCapability.ArkUI.ArkUI.Full 1427 1428**Parameters** 1429 1430| Name | Type | Mandatory | Description | 1431| ------------------ | ------------------ | ------------------- | ------------------- | 1432| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1433| nodeType | 'Column' | Yes | Node type, which is Column in this API. | 1434 1435**Return value** 1436 1437| Type | Description | 1438| ------------------ | ------------------ | 1439| [Column](#column12) | FrameNode node of the Column type. | 1440 1441**Example** 1442 1443```ts 1444typeNode.createNode(uiContext, 'Column'); 1445``` 1446### Row<sup>12+</sup> 1447type Row = TypedFrameNode<RowInterface, RowAttribute> 1448 1449Represents a FrameNode of the Row type. 1450 1451**Atomic service API**: This API can be used in atomic services since API version 12. 1452 1453**System capability**: SystemCapability.ArkUI.ArkUI.Full 1454 1455| Type | Description | 1456| ----------------------------- | -------------------- | 1457| TypedFrameNode<RowInterface, RowAttribute> | FrameNode of the Row type.<br>**NOTE**<br> **RowInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **Row** component. | 1458 1459### createNode('Row')<sup>12+</sup> 1460createNode(context: UIContext, nodeType: 'Row'): Row 1461 1462Creates a FrameNode of the Row type. 1463 1464**Atomic service API**: This API can be used in atomic services since API version 12. 1465 1466**System capability**: SystemCapability.ArkUI.ArkUI.Full 1467 1468**Parameters** 1469 1470| Name | Type | Mandatory | Description | 1471| ------------------ | ------------------ | ------------------- | ------------------- | 1472| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1473| nodeType | 'Row' | Yes | Node type, which is Row in this API. | 1474 1475**Return value** 1476 1477| Type | Description | 1478| ------------------ | ------------------ | 1479| [Row](#row12) | FrameNode node of the Row type. | 1480 1481**Example** 1482 1483```ts 1484typeNode.createNode(uiContext, 'Row'); 1485``` 1486### Stack<sup>12+</sup> 1487type Stack = TypedFrameNode<StackInterface, StackAttribute> 1488 1489Represents a FrameNode of the Stack type. 1490 1491**Atomic service API**: This API can be used in atomic services since API version 12. 1492 1493**System capability**: SystemCapability.ArkUI.ArkUI.Full 1494 1495| Type | Description | 1496| ----------------------------- | -------------------- | 1497| TypedFrameNode<StackInterface, StackAttribute> | FrameNode of the Stack type.<br>**NOTE**<br> **StackInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **Stack** component. | 1498 1499### createNode('Stack')<sup>12+</sup> 1500createNode(context: UIContext, nodeType: 'Stack'): Stack 1501 1502Creates a FrameNode of the Stack type. 1503 1504**Atomic service API**: This API can be used in atomic services since API version 12. 1505 1506**System capability**: SystemCapability.ArkUI.ArkUI.Full 1507 1508**Parameters** 1509 1510| Name | Type | Mandatory | Description | 1511| ------------------ | ------------------ | ------------------- | ------------------- | 1512| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1513| nodeType | 'Stack' | Yes | Node type, which is Stack in this API. | 1514 1515**Return value** 1516 1517| Type | Description | 1518| ------------------ | ------------------ | 1519| [Stack](#stack12) | FrameNode node of the Stack type. | 1520 1521**Example** 1522 1523<!--code_no_check--> 1524 1525```ts 1526typeNode.createNode(uiContext, 'Stack'); 1527``` 1528### GridRow<sup>12+</sup> 1529type GridRow = TypedFrameNode<GridRowInterface, GridRowAttribute> 1530 1531Represents a FrameNode of the GridRow type. 1532 1533**Atomic service API**: This API can be used in atomic services since API version 12. 1534 1535**System capability**: SystemCapability.ArkUI.ArkUI.Full 1536 1537| Type | Description | 1538| ----------------------------- | -------------------- | 1539| TypedFrameNode<GridRowInterface, GridRowAttribute> | FrameNode of the GridRow type.<br>**NOTE**<br> **GridRowInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **GridRow** component. | 1540 1541### createNode('GridRow')<sup>12+</sup> 1542createNode(context: UIContext, nodeType: 'GridRow'): GridRow 1543 1544Creates a FrameNode of the GridRow type. 1545 1546**Atomic service API**: This API can be used in atomic services since API version 12. 1547 1548**System capability**: SystemCapability.ArkUI.ArkUI.Full 1549 1550**Parameters** 1551 1552| Name | Type | Mandatory | Description | 1553| ------------------ | ------------------ | ------------------- | ------------------- | 1554| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1555| nodeType | 'GridRow' | Yes | Node type, which is GridRow in this API. | 1556 1557**Return value** 1558 1559| Type | Description | 1560| ------------------ | ------------------ | 1561| [GridRow](#gridrow12) | FrameNode node of the GridRow type. | 1562 1563**Example** 1564 1565<!--code_no_check--> 1566 1567```ts 1568typeNode.createNode(uiContext, 'GridRow'); 1569``` 1570### GridCol<sup>12+</sup> 1571type GridCol = TypedFrameNode<GridColInterface, GridColAttribute> 1572 1573Represents a FrameNode of the GridCol type. 1574 1575**Atomic service API**: This API can be used in atomic services since API version 12. 1576 1577**System capability**: SystemCapability.ArkUI.ArkUI.Full 1578 1579| Type | Description | 1580| ----------------------------- | -------------------- | 1581| TypedFrameNode<GridColInterface, GridColAttribute> | FrameNode of the GridCol type.<br>**NOTE**<br> **GridColInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **GridCol** component. | 1582 1583### createNode('GridCol')<sup>12+</sup> 1584createNode(context: UIContext, nodeType: 'GridCol'): GridCol 1585 1586Creates a FrameNode of the GridCol type. 1587 1588**Atomic service API**: This API can be used in atomic services since API version 12. 1589 1590**System capability**: SystemCapability.ArkUI.ArkUI.Full 1591 1592**Parameters** 1593 1594| Name | Type | Mandatory | Description | 1595| ------------------ | ------------------ | ------------------- | ------------------- | 1596| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1597| nodeType | 'GridCol' | Yes | Node type, which is GridCol in this API. | 1598 1599**Return value** 1600 1601| Type | Description | 1602| ------------------ | ------------------ | 1603| [GridCol](#gridcol12) | FrameNode node of the GridCol type. | 1604 1605**Example** 1606 1607<!--code_no_check--> 1608 1609```ts 1610typeNode.createNode(uiContext, 'GridCol'); 1611``` 1612### Flex<sup>12+</sup> 1613type Flex = TypedFrameNode<FlexInterface, FlexAttribute> 1614 1615Represents a FrameNode of the Flex type. 1616 1617**Atomic service API**: This API can be used in atomic services since API version 12. 1618 1619**System capability**: SystemCapability.ArkUI.ArkUI.Full 1620 1621| Type | Description | 1622| ----------------------------- | -------------------- | 1623| TypedFrameNode<FlexInterface, FlexAttribute> | FrameNode of the Flex type.<br>**NOTE**<br> **FlexInterface** is used as the input parameter of the [initialize](#initialize12) API of [TypedFrameNode](#typedframenode12). The input parameter is of the constructor type for the **Flex** component.<br> **FlexInterface** is used as the return value of the [attribute](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **Flex** component. | 1624 1625### createNode('Flex')<sup>12+</sup> 1626createNode(context: UIContext, nodeType: 'Flex'): Flex 1627 1628Creates a FrameNode of the Flex type. 1629 1630**Atomic service API**: This API can be used in atomic services since API version 12. 1631 1632**System capability**: SystemCapability.ArkUI.ArkUI.Full 1633 1634**Parameters** 1635 1636| Name | Type | Mandatory | Description | 1637| ------------------ | ------------------ | ------------------- | ------------------- | 1638| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1639| nodeType | 'Flex' | Yes | Node type, which is Flex in this API. | 1640 1641**Return value** 1642 1643| Type | Description | 1644| ------------------ | ------------------ | 1645| [Flex](#flex12) | FrameNode node of the Flex type. | 1646 1647**Example** 1648 1649<!--code_no_check--> 1650 1651```ts 1652typeNode.createNode(uiContext, 'Flex'); 1653``` 1654### Swiper<sup>12+</sup> 1655type Swiper = TypedFrameNode<SwiperInterface, SwiperAttribute> 1656 1657Represents a FrameNode of the Swiper type. 1658 1659**Atomic service API**: This API can be used in atomic services since API version 12. 1660 1661**System capability**: SystemCapability.ArkUI.ArkUI.Full 1662 1663| Type | Description | 1664| ----------------------------- | -------------------- | 1665| TypedFrameNode<SwiperInterface, SwiperAttribute> | FrameNode of the Swiper type.<br>**NOTE**<br> **SwiperInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **Swiper** component. | 1666 1667### createNode('Swiper')<sup>12+</sup> 1668createNode(context: UIContext, nodeType: 'Swiper'): Swiper 1669 1670Creates a FrameNode of the Swiper type. 1671 1672**Atomic service API**: This API can be used in atomic services since API version 12. 1673 1674**System capability**: SystemCapability.ArkUI.ArkUI.Full 1675 1676**Parameters** 1677 1678| Name | Type | Mandatory | Description | 1679| ------------------ | ------------------ | ------------------- | ------------------- | 1680| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1681| nodeType | 'Swiper' | Yes | Node type, which is Swiper in this API. | 1682 1683**Return value** 1684 1685| Type | Description | 1686| ------------------ | ------------------ | 1687| [Swiper](#swiper12) | FrameNode node of the Swiper type. | 1688 1689**Example** 1690 1691<!--code_no_check--> 1692 1693```ts 1694typeNode.createNode(uiContext, 'Swiper'); 1695``` 1696### Progress<sup>12+</sup> 1697type Progress = TypedFrameNode<ProgressInterface, ProgressAttribute> 1698 1699Represents a FrameNode of the Progress type. 1700 1701**Atomic service API**: This API can be used in atomic services since API version 12. 1702 1703**System capability**: SystemCapability.ArkUI.ArkUI.Full 1704 1705| Type | Description | 1706| ----------------------------- | -------------------- | 1707| TypedFrameNode<ProgressInterface, ProgressAttribute> | FrameNode of the Progress type.<br>**NOTE**<br> **ProgressInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **Progress** component. | 1708 1709### createNode('Progress')<sup>12+</sup> 1710createNode(context: UIContext, nodeType: 'Progress'): Progress 1711 1712Creates a FrameNode of the Progress type. 1713 1714**Atomic service API**: This API can be used in atomic services since API version 12. 1715 1716**System capability**: SystemCapability.ArkUI.ArkUI.Full 1717 1718**Parameters** 1719 1720| Name | Type | Mandatory | Description | 1721| ------------------ | ------------------ | ------------------- | ------------------- | 1722| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1723| nodeType | 'Progress' | Yes | Node type, which is Progress in this API. | 1724 1725**Return value** 1726 1727| Type | Description | 1728| ------------------ | ------------------ | 1729| [Progress](#progress12) | FrameNode node of the Progress type. | 1730 1731**Example** 1732 1733```ts 1734typeNode.createNode(uiContext, 'Progress'); 1735``` 1736### Scroll<sup>12+</sup> 1737type Scroll = TypedFrameNode<ScrollInterface, ScrollAttribute> 1738 1739Represents a FrameNode of the Scroll type. 1740 1741**Atomic service API**: This API can be used in atomic services since API version 12. 1742 1743**System capability**: SystemCapability.ArkUI.ArkUI.Full 1744 1745| Type | Description | 1746| ----------------------------- | -------------------- | 1747| TypedFrameNode<ScrollInterface, ScrollAttribute> | FrameNode of the Scroll type.<br>**NOTE**<br> **ScrollInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **Scroll** component. | 1748 1749### createNode('Scroll')<sup>12+</sup> 1750createNode(context: UIContext, nodeType: 'Scroll'): Scroll 1751 1752Creates a FrameNode of the Scroll type. 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**Parameters** 1759 1760| Name | Type | Mandatory | Description | 1761| ------------------ | ------------------ | ------------------- | ------------------- | 1762| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1763| nodeType | 'Scroll' | Yes | Node type, which is Scroll in this API. | 1764 1765**Return value** 1766 1767| Type | Description | 1768| ------------------ | ------------------ | 1769| [Scroll](#scroll12) | FrameNode node of the Scroll type. | 1770 1771**Example** 1772 1773```ts 1774typeNode.createNode(uiContext, 'Scroll'); 1775``` 1776### RelativeContainer<sup>12+</sup> 1777type RelativeContainer = TypedFrameNode<RelativeContainerInterface, RelativeContainerAttribute> 1778 1779Represents a FrameNode of the RelativeContainer type. 1780 1781**Atomic service API**: This API can be used in atomic services since API version 12. 1782 1783**System capability**: SystemCapability.ArkUI.ArkUI.Full 1784 1785| Type | Description | 1786| ----------------------------- | -------------------- | 1787| TypedFrameNode<RelativeContainerInterface, RelativeContainerAttribute> | FrameNode of the RelativeContainer type.<br>**NOTE**<br> **RelativeContainerInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **RelativeContainer** component. | 1788 1789### createNode('RelativeContainer')<sup>12+</sup> 1790createNode(context: UIContext, nodeType: 'RelativeContainer'): RelativeContainer 1791 1792Creates a FrameNode of the RelativeContainer type. 1793 1794**Atomic service API**: This API can be used in atomic services since API version 12. 1795 1796**System capability**: SystemCapability.ArkUI.ArkUI.Full 1797 1798**Parameters** 1799 1800| Name | Type | Mandatory | Description | 1801| ------------------ | ------------------ | ------------------- | ------------------- | 1802| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1803| nodeType | 'RelativeContainer' | Yes | Node type, which is RelativeContainer in this API. | 1804 1805**Return value** 1806 1807| Type | Description | 1808| ------------------ | ------------------ | 1809| [RelativeContainer](#relativecontainer12) | FrameNode node of the RelativeContainer type. | 1810 1811**Example** 1812 1813<!--code_no_check--> 1814 1815```ts 1816typeNode.createNode(uiContext, 'RelativeContainer'); 1817``` 1818### Divider<sup>12+</sup> 1819type Divider = TypedFrameNode<DividerInterface, DividerAttribute> 1820 1821Represents a FrameNode of the Divider type. 1822 1823**Atomic service API**: This API can be used in atomic services since API version 12. 1824 1825**System capability**: SystemCapability.ArkUI.ArkUI.Full 1826 1827| Type | Description | 1828| ----------------------------- | -------------------- | 1829| TypedFrameNode<DividerInterface, DividerAttribute> | FrameNode of the Divider type.<br>**NOTE**<br> **DividerInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **Divider** component. | 1830 1831### createNode('Divider')<sup>12+</sup> 1832createNode(context: UIContext, nodeType: 'Divider'): Divider 1833 1834Creates a FrameNode of the Divider type. 1835 1836**Atomic service API**: This API can be used in atomic services since API version 12. 1837 1838**System capability**: SystemCapability.ArkUI.ArkUI.Full 1839 1840**Parameters** 1841 1842| Name | Type | Mandatory | Description | 1843| ------------------ | ------------------ | ------------------- | ------------------- | 1844| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1845| nodeType | 'Divider' | Yes | Node type, which is Divider in this API. | 1846 1847**Return value** 1848 1849| Type | Description | 1850| ------------------ | ------------------ | 1851| [Divider](#divider12) | FrameNode node of the Divider type. | 1852 1853**Example** 1854 1855<!--code_no_check--> 1856 1857```ts 1858typeNode.createNode(uiContext, 'Divider'); 1859``` 1860### LoadingProgress<sup>12+</sup> 1861type LoadingProgress = TypedFrameNode<LoadingProgressInterface, LoadingProgressAttribute> 1862 1863Represents a FrameNode of the LoadingProgress type. 1864 1865**Atomic service API**: This API can be used in atomic services since API version 12. 1866 1867**System capability**: SystemCapability.ArkUI.ArkUI.Full 1868 1869| Type | Description | 1870| ----------------------------- | -------------------- | 1871| TypedFrameNode<LoadingProgressInterface, LoadingProgressAttribute> | FrameNode of the LoadingProgress type.<br>**NOTE**<br> **LoadingProgressInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **LoadingProgress** component. | 1872 1873### createNode('LoadingProgress')<sup>12+</sup> 1874createNode(context: UIContext, nodeType: 'LoadingProgress'): LoadingProgress 1875 1876Creates a FrameNode of the LoadingProgress type. 1877 1878**Atomic service API**: This API can be used in atomic services since API version 12. 1879 1880**System capability**: SystemCapability.ArkUI.ArkUI.Full 1881 1882**Parameters** 1883 1884| Name | Type | Mandatory | Description | 1885| ------------------ | ------------------ | ------------------- | ------------------- | 1886| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1887| nodeType | 'LoadingProgress' | Yes | Node type, which is LoadingProgress in this API. | 1888 1889**Return value** 1890 1891| Type | Description | 1892| ------------------ | ------------------ | 1893| [LoadingProgress](#loadingprogress12) | FrameNode node of the LoadingProgress type. | 1894 1895**Example** 1896 1897<!--code_no_check--> 1898 1899```ts 1900typeNode.createNode(uiContext, 'LoadingProgress'); 1901``` 1902### Search<sup>12+</sup> 1903type Search = TypedFrameNode<SearchInterface, SearchAttribute> 1904 1905Represents a FrameNode of the Search type. 1906 1907**Atomic service API**: This API can be used in atomic services since API version 12. 1908 1909**System capability**: SystemCapability.ArkUI.ArkUI.Full 1910 1911| Type | Description | 1912| ----------------------------- | -------------------- | 1913| TypedFrameNode<SearchInterface, SearchAttribute> | FrameNode of the Search type.<br>**NOTE**<br> **SearchInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **Search** component. | 1914 1915### createNode('Search')<sup>12+</sup> 1916createNode(context: UIContext, nodeType: 'Search'): Search 1917 1918Creates a FrameNode of the Search type. 1919 1920**Atomic service API**: This API can be used in atomic services since API version 12. 1921 1922**System capability**: SystemCapability.ArkUI.ArkUI.Full 1923 1924**Parameters** 1925 1926| Name | Type | Mandatory | Description | 1927| ------------------ | ------------------ | ------------------- | ------------------- | 1928| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1929| nodeType | 'Search' | Yes | Node type, which is Search in this API. | 1930 1931**Return value** 1932 1933| Type | Description | 1934| ------------------ | ------------------ | 1935| [Search](#search12) | FrameNode node of the Search type. | 1936 1937**Example** 1938 1939<!--code_no_check--> 1940 1941```ts 1942typeNode.createNode(uiContext, 'Search'); 1943``` 1944### Blank<sup>12+</sup> 1945type Blank = TypedFrameNode<BlankInterface, BlankAttribute> 1946 1947Represents a FrameNode of the Blank type. 1948 1949**Atomic service API**: This API can be used in atomic services since API version 12. 1950 1951**System capability**: SystemCapability.ArkUI.ArkUI.Full 1952 1953| Type | Description | 1954| ----------------------------- | -------------------- | 1955| TypedFrameNode<BlankInterface, BlankAttribute> | FrameNode of the Blank type.<br>**NOTE**<br> **BlankInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **Blank** component. | 1956 1957### createNode('Blank')<sup>12+</sup> 1958createNode(context: UIContext, nodeType: 'Blank'): Blank; 1959 1960Creates a FrameNode of the Blank type. 1961 1962**Atomic service API**: This API can be used in atomic services since API version 12. 1963 1964**System capability**: SystemCapability.ArkUI.ArkUI.Full 1965 1966**Parameters** 1967 1968| Name | Type | Mandatory | Description | 1969| ------------------ | ------------------ | ------------------- | ------------------- | 1970| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1971| nodeType | 'Blank' | Yes | Node type, which is Blank in this API. | 1972 1973**Return value** 1974 1975| Type | Description | 1976| ------------------ | ------------------ | 1977| [Blank](#blank12) | FrameNode node of the Blank type. | 1978 1979**Example** 1980 1981<!--code_no_check--> 1982 1983```ts 1984typeNode.createNode(uiContext, 'Blank'); 1985``` 1986### Image<sup>12+</sup> 1987type Image = TypedFrameNode<ImageInterface, ImageAttribute> 1988 1989Represents a FrameNode of the Image type. 1990 1991**Atomic service API**: This API can be used in atomic services since API version 12. 1992 1993**System capability**: SystemCapability.ArkUI.ArkUI.Full 1994 1995| Type | Description | 1996| ----------------------------- | -------------------- | 1997| TypedFrameNode<ImageInterface, ImageAttribute> | FrameNode of the Image type.<br>**NOTE**<br> **ImageInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **Image** component. | 1998 1999### createNode('Image')<sup>12+</sup> 2000createNode(context: UIContext, nodeType: 'Image'): Image 2001 2002Creates a FrameNode of the Image type. 2003 2004**Atomic service API**: This API can be used in atomic services since API version 12. 2005 2006**System capability**: SystemCapability.ArkUI.ArkUI.Full 2007 2008**Parameters** 2009 2010| Name | Type | Mandatory | Description | 2011| ------------------ | ------------------ | ------------------- | ------------------- | 2012| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2013| nodeType | 'Image' | Yes | Node type, which is Image in this API. | 2014 2015**Return value** 2016 2017| Type | Description | 2018| ------------------ | ------------------ | 2019| [Image](#image12) | FrameNode node of the Image type. | 2020 2021**Example** 2022 2023<!--code_no_check--> 2024 2025```ts 2026typeNode.createNode(uiContext, 'Image'); 2027``` 2028### List<sup>12+</sup> 2029type List = TypedFrameNode<ListInterface, ListAttribute> 2030 2031Represents a FrameNode of the List type. 2032 2033**Atomic service API**: This API can be used in atomic services since API version 12. 2034 2035**System capability**: SystemCapability.ArkUI.ArkUI.Full 2036 2037| Type | Description | 2038| ----------------------------- | -------------------- | 2039| TypedFrameNode<ListInterface, ListAttribute> | FrameNode of the List type.<br>**NOTE**<br> **ListInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **List** component. | 2040 2041### createNode('List')<sup>12+</sup> 2042createNode(context: UIContext, nodeType: 'List'): List 2043 2044Creates a FrameNode of the List type. 2045 2046**Atomic service API**: This API can be used in atomic services since API version 12. 2047 2048**System capability**: SystemCapability.ArkUI.ArkUI.Full 2049 2050**Parameters** 2051 2052| Name | Type | Mandatory | Description | 2053| ------------------ | ------------------ | ------------------- | ------------------- | 2054| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2055| nodeType | 'List' | Yes | Node type, which is List in this API. | 2056 2057**Return value** 2058 2059| Type | Description | 2060| ------------------ | ------------------ | 2061| [List](#list12) | FrameNode node of the List type. | 2062 2063**Example** 2064 2065<!--code_no_check--> 2066 2067```ts 2068typeNode.createNode(uiContext, 'List'); 2069``` 2070### ListItem<sup>12+</sup> 2071type ListItem = TypedFrameNode<ListItemInterface, ListItemAttribute> 2072 2073Represents a FrameNode of the ListItem type. 2074 2075**Atomic service API**: This API can be used in atomic services since API version 12. 2076 2077**System capability**: SystemCapability.ArkUI.ArkUI.Full 2078 2079| Type | Description | 2080| ----------------------------- | -------------------- | 2081| TypedFrameNode<ListItemInterface, ListItemAttribute> | FrameNode of the ListItem type.<br>**NOTE**<br> **ListItemInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **ListItem** component. | 2082 2083### createNode('ListItem')<sup>12+</sup> 2084createNode(context: UIContext, nodeType: 'ListItem'): ListItem 2085 2086Creates a FrameNode of the ListItem type. 2087 2088**Atomic service API**: This API can be used in atomic services since API version 12. 2089 2090**System capability**: SystemCapability.ArkUI.ArkUI.Full 2091 2092**Parameters** 2093 2094| Name | Type | Mandatory | Description | 2095| ------------------ | ------------------ | ------------------- | ------------------- | 2096| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2097| nodeType | 'ListItem' | Yes | Node type, which is ListItem in this API. | 2098 2099**Return value** 2100 2101| Type | Description | 2102| ------------------ | ------------------ | 2103| [ListItem](#listitem12) | FrameNode node of the ListItem type. | 2104 2105**Example** 2106 2107<!--code_no_check--> 2108 2109```ts 2110typeNode.createNode(uiContext, 'ListItem'); 2111``` 2112 2113### TextInput<sup>12+</sup> 2114type TextInput = TypedFrameNode<TextInputInterface, TextInputAttribute> 2115 2116Represents a FrameNode of the TextInput type. 2117 2118**Atomic service API**: This API can be used in atomic services since API version 12. 2119 2120**System capability**: SystemCapability.ArkUI.ArkUI.Full 2121 2122| Type | Description | 2123| ----------------------------- | -------------------- | 2124| TypedFrameNode<TextInputInterface, TextInputAttribute> | FrameNode of the TextInput type.<br>**NOTE**<br> **TextInputInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **TextInput** component. | 2125 2126### createNode('TextInput')<sup>12+</sup> 2127createNode(context: UIContext, nodeType: 'TextInput'): TextInput 2128 2129Creates a FrameNode of the TextInput type. 2130 2131**Atomic service API**: This API can be used in atomic services since API version 12. 2132 2133**System capability**: SystemCapability.ArkUI.ArkUI.Full 2134 2135**Parameters** 2136 2137| Name | Type | Mandatory | Description | 2138| ------------------ | ------------------ | ------------------- | ------------------- | 2139| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2140| nodeType | 'TextInput' | Yes | Node type, which is TextInput in this API. | 2141 2142**Return value** 2143 2144| Type | Description | 2145| ------------------ | ------------------ | 2146| [TextInput](#textinput12) | FrameNode node of the TextInput type. | 2147 2148**Example** 2149 2150<!--code_no_check--> 2151 2152```ts 2153typeNode.createNode(uiContext, 'TextInput'); 2154``` 2155 2156### Button<sup>12+</sup> 2157type Button = TypedFrameNode<ButtonInterface, ButtonAttribute> 2158 2159Represents a FrameNode of the Button type. 2160 2161**Atomic service API**: This API can be used in atomic services since API version 12. 2162 2163**System capability**: SystemCapability.ArkUI.ArkUI.Full 2164 2165| Type | Description | 2166| ----------------------------- | -------------------- | 2167| TypedFrameNode<ButtonInterface, ButtonAttribute> | FrameNode of the Button type.<br>**NOTE**<br> **ButtonInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) 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. | 2168 2169### createNode('Button')<sup>12+</sup> 2170createNode(context: UIContext, nodeType: 'Button'): Button 2171 2172Creates a FrameNode of the Button type. 2173 2174**Atomic service API**: This API can be used in atomic services since API version 12. 2175 2176**System capability**: SystemCapability.ArkUI.ArkUI.Full 2177 2178**Parameters** 2179 2180| Name | Type | Mandatory | Description | 2181| ------------------ | ------------------ | ------------------- | ------------------- | 2182| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2183| nodeType | 'Button' | Yes | Node type, which is Button in this API. | 2184 2185**Return value** 2186 2187| Type | Description | 2188| ------------------ | ------------------ | 2189| [Button](#button12) | FrameNode node of the Button type. | 2190 2191**Example** 2192 2193<!--code_no_check--> 2194 2195```ts 2196typeNode.createNode(uiContext, 'Button'); 2197``` 2198 2199### ListItemGroup<sup>12+</sup> 2200type ListItemGroup = TypedFrameNode<ListItemGroupInterface, ListItemGroupAttribute> 2201 2202Represents a FrameNode of the ListItemGroup type. 2203 2204**Atomic service API**: This API can be used in atomic services since API version 12. 2205 2206**System capability**: SystemCapability.ArkUI.ArkUI.Full 2207 2208| Type | Description | 2209| ----------------------------- | -------------------- | 2210| TypedFrameNode<ListItemGroupInterface, ListItemGroupAttribute> | FrameNode of the ListItemGroup type.<br>**NOTE**<br> **ListItemGroupInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **ListItemGroup** component. | 2211 2212### createNode('ListItemGroup')<sup>12+</sup> 2213createNode(context: UIContext, nodeType: 'ListItemGroup'): ListItemGroup 2214 2215Creates a FrameNode of the ListItemGroup type. 2216 2217**Atomic service API**: This API can be used in atomic services since API version 12. 2218 2219**System capability**: SystemCapability.ArkUI.ArkUI.Full 2220 2221**Parameters** 2222 2223| Name | Type | Mandatory | Description | 2224| ------------------ | ------------------ | ------------------- | ------------------- | 2225| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2226| nodeType | 'ListItemGroup' | Yes | Node type, which is ListItemGroup in this API. | 2227 2228**Return value** 2229 2230| Type | Description | 2231| ------------------ | ------------------ | 2232| [ListItemGroup](#listitemgroup12) | FrameNode node of the ListItemGroup type. | 2233 2234**Example** 2235 2236<!--code_no_check--> 2237 2238```ts 2239typeNode.createNode(uiContext, 'ListItemGroup'); 2240``` 2241 2242### WaterFlow<sup>12+</sup> 2243type WaterFlow = TypedFrameNode<WaterFlowInterface, WaterFlowAttribute> 2244 2245Represents a FrameNode of the WaterFlow type. 2246 2247**Atomic service API**: This API can be used in atomic services since API version 12. 2248 2249**System capability**: SystemCapability.ArkUI.ArkUI.Full 2250 2251| Type | Description | 2252| ----------------------------- | -------------------- | 2253| TypedFrameNode<WaterFlowInterface, WaterFlowAttribute> | FrameNode of the WaterFlow type.<br>**NOTE**<br> **WaterFlowInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **WaterFlow** component. | 2254 2255### createNode('WaterFlow')<sup>12+</sup> 2256createNode(context: UIContext, nodeType: 'WaterFlow'): WaterFlow 2257 2258Creates a FrameNode of the WaterFlow type. 2259 2260**Atomic service API**: This API can be used in atomic services since API version 12. 2261 2262**System capability**: SystemCapability.ArkUI.ArkUI.Full 2263 2264**Parameters** 2265 2266| Name | Type | Mandatory | Description | 2267| ------------------ | ------------------ | ------------------- | ------------------- | 2268| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2269| nodeType | 'WaterFlow' | Yes | Node type, which is WaterFlow in this API. | 2270 2271**Return value** 2272 2273| Type | Description | 2274| ------------------ | ------------------ | 2275| [WaterFlow](#waterflow12) | FrameNode node of the WaterFlow type. | 2276 2277**Example** 2278 2279<!--code_no_check--> 2280 2281```ts 2282typeNode.createNode(uiContext, 'WaterFlow'); 2283``` 2284 2285### FlowItem<sup>12+</sup> 2286type FlowItem = TypedFrameNode<FlowItemInterface, FlowItemAttribute> 2287 2288Represents a FrameNode of the FlowItem type. 2289 2290**Atomic service API**: This API can be used in atomic services since API version 12. 2291 2292**System capability**: SystemCapability.ArkUI.ArkUI.Full 2293 2294| Type | Description | 2295| ----------------------------- | -------------------- | 2296| TypedFrameNode<FlowItemInterface, FlowItemAttribute> | FrameNode of the FlowItem type.<br>**NOTE**<br> **FlowItemInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **FlowItem** component. | 2297 2298### createNode('FlowItem')<sup>12+</sup> 2299createNode(context: UIContext, nodeType: 'FlowItem'): FlowItem 2300 2301Creates a FrameNode of the FlowItem type. 2302 2303**Atomic service API**: This API can be used in atomic services since API version 12. 2304 2305**System capability**: SystemCapability.ArkUI.ArkUI.Full 2306 2307**Parameters** 2308 2309| Name | Type | Mandatory | Description | 2310| ------------------ | ------------------ | ------------------- | ------------------- | 2311| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2312| nodeType | 'FlowItem' | Yes | Node type, which is FlowItem in this API. | 2313 2314**Return value** 2315 2316| Type | Description | 2317| ------------------ | ------------------ | 2318| [FlowItem](#flowitem12) | FrameNode node of the FlowItem type. | 2319 2320**Example** 2321 2322<!--code_no_check--> 2323 2324```ts 2325typeNode.createNode(uiContext, 'FlowItem'); 2326``` 2327 2328### XComponent<sup>12+</sup> 2329type XComponent = TypedFrameNode<XComponentInterface, XComponentAttribute> 2330 2331Represents a FrameNode of the XComponent 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| Type | Description | 2338| ----------------------------- | -------------------- | 2339| TypedFrameNode<XComponentInterface, XComponentAttribute> | FrameNode of the XComponent type.<br>**NOTE**<br> **XComponentInterface** is used as the input parameter of the [initialize](#initialize12) 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](#attribute12) API of **TypedFrameNode**. It returns the attribute setting object of the **XComponent** component. | 2340 2341### createNode('XComponent')<sup>12+</sup> 2342createNode(context: UIContext, nodeType: 'XComponent'): XComponent 2343 2344Creates a FrameNode of the XComponent type. 2345 2346**Atomic service API**: This API can be used in atomic services since API version 12. 2347 2348**System capability**: SystemCapability.ArkUI.ArkUI.Full 2349 2350**Parameters** 2351 2352| Name | Type | Mandatory | Description | 2353| ------------------ | ------------------ | ------------------- | ------------------- | 2354| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2355| nodeType | 'XComponent' | Yes | Node type, which is XComponent in this API. | 2356 2357**Return value** 2358 2359| Type | Description | 2360| ------------------ | ------------------ | 2361| [XComponent](#xcomponent12) | FrameNode node of the XComponent type. | 2362 2363**Example** 2364 2365```ts 2366typeNode.createNode(uiContext, 'XComponent'); 2367``` 2368 2369## NodeAdapter<sup>12+</sup> 2370 2371Provides the lazy loading capability for the FrameNodes. 2372 2373> **NOTE** 2374> 2375> The input parameter cannot be a negative number; otherwise, no processing is performed. 2376 2377**Example** 2378 2379For details, see [NodeAdapter Usage Example](#nodeadapter-usage-example). 2380 2381### constructor<sup>12+</sup> 2382 2383constructor() 2384 2385A constructor used to create a **NodeAdapter** object. 2386 2387**Atomic service API**: This API can be used in atomic services since API version 12. 2388 2389**System capability**: SystemCapability.ArkUI.ArkUI.Full 2390 2391### dispose<sup>12+</sup> 2392 2393dispose(): void 2394 2395Disposes of this **NodeAdapter** object. Bindings, if any, of the object will be cleared before the object is disposed of. 2396 2397**Atomic service API**: This API can be used in atomic services since API version 12. 2398 2399**System capability**: SystemCapability.ArkUI.ArkUI.Full 2400 2401### totalNodeCount<sup>12+</sup> 2402 2403set totalNodeCount(count: number) 2404 2405Sets the total number of items in this node. 2406 2407**Atomic service API**: This API can be used in atomic services since API version 12. 2408 2409**System capability**: SystemCapability.ArkUI.ArkUI.Full 2410 2411**Parameters** 2412 2413| Name | Type | Mandatory | Description | 2414| ------- | ------------------------------------------------------ | ---- | ---------------- | 2415| count | number | Yes | Total number of items. | 2416 2417get totalNodeCount(): number 2418 2419Obtains the total number of items in this node. 2420 2421**Atomic service API**: This API can be used in atomic services since API version 12. 2422 2423**System capability**: SystemCapability.ArkUI.ArkUI.Full 2424 2425**Return value** 2426 2427| Type | Description | 2428| ----------------- | ------------ | 2429| number | Total number of items. | 2430 2431### reloadAllItems<sup>12+</sup> 2432 2433reloadAllItems(): void 2434 2435Reloads all items in this node. 2436 2437**Atomic service API**: This API can be used in atomic services since API version 12. 2438 2439**System capability**: SystemCapability.ArkUI.ArkUI.Full 2440 2441### reloadItem<sup>12+</sup> 2442 2443reloadItem(start: number, count: number): void 2444 2445Reloads a specified number of items starting from a specific index. 2446 2447**Atomic service API**: This API can be used in atomic services since API version 12. 2448 2449**System capability**: SystemCapability.ArkUI.ArkUI.Full 2450 2451**Parameters** 2452 2453| Name | Type | Mandatory | Description | 2454| ------- | ------------------------------------------------------ | ---- | ---------------- | 2455| start | number | Yes | Starting index of the items to reload. | 2456| count | number | Yes | Number of the items to reload. | 2457 2458### removeItem<sup>12+</sup> 2459 2460removeItem(start: number, count: number): void 2461 2462Removes a specified number of items starting from a specific index. 2463 2464**Atomic service API**: This API can be used in atomic services since API version 12. 2465 2466**System capability**: SystemCapability.ArkUI.ArkUI.Full 2467 2468**Parameters** 2469 2470| Name | Type | Mandatory | Description | 2471| ------- | ------------------------------------------------------ | ---- | ---------------- | 2472| start | number | Yes | Starting index of the items to remove. | 2473| count | number | Yes | Number of the items to remove. | 2474 2475### insertItem<sup>12+</sup> 2476 2477insertItem(start: number, count: number): void 2478 2479Inserts a specified number of items starting from a specific index. 2480 2481**Atomic service API**: This API can be used in atomic services since API version 12. 2482 2483**System capability**: SystemCapability.ArkUI.ArkUI.Full 2484 2485**Parameters** 2486 2487| Name | Type | Mandatory | Description | 2488| ------- | ------------------------------------------------------ | ---- | ---------------- | 2489| start | number | Yes | Starting index of the items to insert. | 2490| count | number | Yes | Number of the items to insert. | 2491 2492### moveItem<sup>12+</sup> 2493 2494moveItem(from: number, to: number): void 2495 2496Moves items from the starting index to the ending index. 2497 2498**Atomic service API**: This API can be used in atomic services since API version 12. 2499 2500**System capability**: SystemCapability.ArkUI.ArkUI.Full 2501 2502**Parameters** 2503 2504| Name | Type | Mandatory | Description | 2505| ------- | ------------------------------------------------------ | ---- | ---------------- | 2506| from | number | Yes | Index at which the movement starts. | 2507| to | number | Yes | Index at which the movement ends. | 2508 2509### getAllAvailableItems<sup>12+</sup> 2510 2511getAllAvailableItems(): Array<FrameNode> 2512 2513Obtains all available items. 2514 2515**Atomic service API**: This API can be used in atomic services since API version 12. 2516 2517**System capability**: SystemCapability.ArkUI.ArkUI.Full 2518 2519**Return value** 2520 2521| Type | Description | 2522| ----------------- | ------------ | 2523| Array<FrameNode> | Array of items in the FrameNode. | 2524 2525### onAttachToNode<sup>12+</sup> 2526 2527onAttachToNode?(target: FrameNode): void 2528 2529Called when a FrameNode is attached to the NodeAdapter. 2530 2531**Atomic service API**: This API can be used in atomic services since API version 12. 2532 2533**System capability**: SystemCapability.ArkUI.ArkUI.Full 2534 2535**Parameters** 2536 2537| Name | Type | Mandatory | Description | 2538| ------- | ------------------------------------------------------ | ---- | ---------------- | 2539| target | FrameNode | Yes | FrameNode attached to the NodeAdapter. | 2540 2541### onDetachFromNode<sup>12+</sup> 2542 2543onDetachFromNode?(): void 2544 2545Called when detachment occurs. 2546 2547**Atomic service API**: This API can be used in atomic services since API version 12. 2548 2549**System capability**: SystemCapability.ArkUI.ArkUI.Full 2550 2551### onGetChildId<sup>12+</sup> 2552 2553onGetChildId?(index: number): number 2554 2555Called 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. 2556 2557**Atomic service API**: This API can be used in atomic services since API version 12. 2558 2559**System capability**: SystemCapability.ArkUI.ArkUI.Full 2560 2561**Parameters** 2562 2563| Name | Type | Mandatory | Description | 2564| ------- | ------------------------------------------------------ | ---- | ---------------- | 2565| index | number | Yes | Index of the loaded node. | 2566 2567**Return value** 2568 2569| Type | Description | 2570| ----------------- | ------------ | 2571| number | ID customized by you. Make sure the ID is unique. | 2572 2573### onCreateChild<sup>12+</sup> 2574 2575onCreateChild?(index: number): FrameNode 2576 2577Called when this node is loaded for the first time or a new child node is detected. 2578 2579**Atomic service API**: This API can be used in atomic services since API version 12. 2580 2581**System capability**: SystemCapability.ArkUI.ArkUI.Full 2582 2583**Parameters** 2584 2585| Name | Type | Mandatory | Description | 2586| ------- | ------------------------------------------------------ | ---- | ---------------- | 2587| index | number | Yes | Index of the loaded node. | 2588 2589**Return value** 2590 2591| Type | Description | 2592| ----------------- | ------------ | 2593| FrameNode | FrameNode created by you. | 2594 2595### onDisposeChild<sup>12+</sup> 2596 2597onDisposeChild?(id: number, node: FrameNode): void 2598 2599Called when a child node is about to be disposed of. 2600 2601**Atomic service API**: This API can be used in atomic services since API version 12. 2602 2603**System capability**: SystemCapability.ArkUI.ArkUI.Full 2604 2605**Parameters** 2606 2607| Name | Type | Mandatory | Description | 2608| ------- | ------------------------------------------------------ | ---- | ---------------- | 2609| id | number | Yes | ID of the child node to be disposed of. | 2610| node | FrameNode | Yes | FrameNode to be disposed of. | 2611 2612### onUpdateChild<sup>12+</sup> 2613 2614onUpdateChild?(id: number, node: FrameNode): void 2615 2616Called when a loaded node is reused. 2617 2618**Atomic service API**: This API can be used in atomic services since API version 12. 2619 2620**System capability**: SystemCapability.ArkUI.ArkUI.Full 2621 2622**Parameters** 2623 2624| Name | Type | Mandatory | Description | 2625| ------- | ------------------------------------------------------ | ---- | ---------------- | 2626| id | number | Yes | ID of the node that is reused. | 2627| node | FrameNode | Yes | FrameNode that is reused. | 2628 2629### attachNodeAdapter<sup>12+</sup> 2630 2631static attachNodeAdapter(adapter: NodeAdapter, node: FrameNode): boolean 2632 2633Attaches 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**. 2634 2635**Atomic service API**: This API can be used in atomic services since API version 12. 2636 2637**System capability**: SystemCapability.ArkUI.ArkUI.Full 2638 2639**Parameters** 2640 2641| Name | Type | Mandatory | Description | 2642| ------- | ------------------------------------------------------ | ---- | ---------------- | 2643| adapter | [NodeAdapter](#nodeadapter12) | Yes | NodeAdapter class for lazy loading. | 2644| node | FrameNode | Yes | FrameNode to be attached to the NodeAdapter. | 2645 2646**Return value** 2647 2648| Type | Description | 2649| ----------------- | ------------ | 2650| boolean | Attachment result. Returns **true** if the attachment is successful; returns **false** otherwise. | 2651 2652### detachNodeAdapter<sup>12+</sup> 2653 2654static detachNodeAdapter(node: FrameNode): void 2655 2656Detaches a FrameNode from a NodeAdapter. 2657 2658**Atomic service API**: This API can be used in atomic services since API version 12. 2659 2660**System capability**: SystemCapability.ArkUI.ArkUI.Full 2661 2662**Parameters** 2663 2664| Name | Type | Mandatory | Description | 2665| ------- | ------------------------------------------------------ | ---- | ---------------- | 2666| node | FrameNode | Yes | FrameNode to detach. | 2667 2668## Example of Customizing a Node of a Specific Type 2669 2670The following example shows how to create a node of the Text type. 2671 2672```ts 2673import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 2674 2675class MyNodeController extends NodeController { 2676 makeNode(uiContext: UIContext): FrameNode | null { 2677 let node = new FrameNode(uiContext); 2678 node.commonAttribute.width(100) 2679 .height(50) 2680 .borderColor(Color.Gray) 2681 .borderWidth(1) 2682 .margin({ left: 10 }); 2683 let col = typeNode.createNode(uiContext, 'Column'); 2684 col.initialize({ space: 5 }) 2685 .width('100%').height('100%').margin({ top: 5 }); 2686 node.appendChild(col); 2687 let text = typeNode.createNode(uiContext, 'Text'); 2688 text.initialize("Hello").fontColor(Color.Blue).fontSize(14); 2689 col.appendChild(text); 2690 return node; 2691 } 2692} 2693 2694@Entry 2695@Component 2696struct FrameNodeTypeTest { 2697 private myNodeController: MyNodeController = new MyNodeController(); 2698 2699 build() { 2700 Row() { 2701 NodeContainer(this.myNodeController); 2702 } 2703 } 2704} 2705``` 2706 2707 2708 2709## Example of Node Operations 2710```ts 2711import { NodeController, FrameNode, UIContext } from '@kit.ArkUI'; 2712import { BusinessError } from '@kit.BasicServicesKit'; 2713 2714const TEST_TAG : string = "FrameNode" 2715class MyNodeController extends NodeController { 2716 public frameNode: FrameNode | null = null; 2717 public childList:Array<FrameNode> = new Array<FrameNode>(); 2718 private rootNode: FrameNode | null = null; 2719 private uiContext: UIContext | null = null; 2720 private childrenCount: number = 0; 2721 makeNode(uiContext: UIContext): FrameNode | null { 2722 this.rootNode = new FrameNode(uiContext); 2723 this.childrenCount = this.childrenCount + 1; 2724 this.uiContext = uiContext; 2725 this.frameNode = new FrameNode(uiContext); 2726 this.rootNode.appendChild(this.frameNode); 2727 for (let i = 0; i < 10; i++) { 2728 let childNode = new FrameNode(uiContext); 2729 this.childList.push(childNode); 2730 this.frameNode.appendChild(childNode); 2731 } 2732 return this.rootNode; 2733 } 2734 appendChild() 2735 { 2736 let childNode = new FrameNode(this.uiContext!); 2737 this.rootNode!.appendChild(childNode); 2738 this.childrenCount = this.childrenCount + 1; 2739 } 2740 insertChildAfter(index : number) 2741 { 2742 let insertNode = new FrameNode(this.uiContext!); 2743 let childNode = this.rootNode!.getChild(index); 2744 this.rootNode!.insertChildAfter(insertNode,childNode); 2745 this.childrenCount = this.childrenCount + 1; 2746 } 2747 removeChild(index : number) 2748 { 2749 let childNode = this.rootNode!.getChild(index); 2750 if(childNode == null) 2751 { 2752 console.log(`${TEST_TAG} getchild at index {${index}} : fail`); 2753 return; 2754 } 2755 this.rootNode!.removeChild(childNode); 2756 this.childrenCount = this.childrenCount - 1; 2757 } 2758 getChildNumber() 2759 { 2760 console.log(TEST_TAG + " getChildNumber " + this.rootNode!.getChildrenCount()) 2761 console.log(TEST_TAG + " children count is " + this.childrenCount); 2762 2763 } 2764 clearChildren() 2765 { 2766 this.rootNode!.clearChildren(); 2767 } 2768 searchFrameNode() 2769 { 2770 if(this.rootNode!.getFirstChild() === null) 2771 { 2772 console.log(TEST_TAG + " the rootNode does not have child node.") 2773 } 2774 if(this.rootNode!.getFirstChild() === this.frameNode) { 2775 console.log(TEST_TAG + " getFirstChild result: success. The first child of the rootNode is equals to frameNode."); 2776 } else { 2777 console.log(TEST_TAG + " getFirstChild result: fail. The first child of the rootNode is not equals to frameNode."); 2778 } 2779 if(this.frameNode!.getChild(5) === this.frameNode!.getChild(4)!.getNextSibling()) { 2780 console.log(TEST_TAG + " getNextSibling result: success."); 2781 } else { 2782 console.log(TEST_TAG + " getNextSibling result: fail."); 2783 } 2784 if(this.frameNode!.getChild(3) === this.frameNode!.getChild(4)!.getPreviousSibling()) { 2785 console.log(TEST_TAG + " getPreviousSibling result: success."); 2786 } else { 2787 console.log(TEST_TAG + " getPreviousSibling result: fail."); 2788 } 2789 if(this.rootNode!.getFirstChild() !== null && this.rootNode!.getFirstChild()!.getParent() === this.rootNode) { 2790 console.log(TEST_TAG + " getParent result: success."); 2791 } else { 2792 console.log(TEST_TAG + " getParent result: fail."); 2793 } 2794 if(this.rootNode!.getParent() !== undefined || this.rootNode!.getParent() !== null) 2795 { 2796 console.log(TEST_TAG + " get ArkTsNode success.") 2797 console.log(TEST_TAG + " check rootNode whether is modifiable " + this.rootNode!.isModifiable()) 2798 console.log(TEST_TAG + " check getParent whether is modifiable " + this.rootNode!.getParent()!.isModifiable()) 2799 } else { 2800 console.log(TEST_TAG + " get ArkTsNode fail."); 2801 } 2802 } 2803 getPositionToWindow() 2804 { 2805 let positionToWindow = this.rootNode?.getPositionToWindow(); 2806 console.log(TEST_TAG + JSON.stringify(positionToWindow)); 2807 } 2808 getPositionToParent() 2809 { 2810 let positionToParent = this.rootNode?.getPositionToParent(); 2811 console.log(TEST_TAG + JSON.stringify(positionToParent)); 2812 } 2813 getPositionToScreen() 2814 { 2815 let positionToScreen = this.rootNode?.getPositionToScreen(); 2816 console.log(TEST_TAG + JSON.stringify(positionToScreen)); 2817 } 2818 getPositionToWindowWithTransform() 2819 { 2820 let positionToWindowWithTransform = this.rootNode?.getPositionToWindowWithTransform(); 2821 console.log(TEST_TAG + JSON.stringify(positionToWindowWithTransform)); 2822 } 2823 getPositionToParentWithTransform() 2824 { 2825 let positionToParentWithTransform = this.rootNode?.getPositionToParentWithTransform(); 2826 console.log(TEST_TAG + JSON.stringify(positionToParentWithTransform)); 2827 } 2828 getPositionToScreenWithTransform() 2829 { 2830 let positionToScreenWithTransform = this.rootNode?.getPositionToScreenWithTransform(); 2831 console.log(TEST_TAG + JSON.stringify(positionToScreenWithTransform)); 2832 } 2833 getMeasuredSize() 2834 { 2835 let measuredSize = this.frameNode?.getMeasuredSize(); 2836 console.log(TEST_TAG + JSON.stringify(measuredSize)); 2837 } 2838 getLayoutPosition() 2839 { 2840 let layoutPosition = this.frameNode?.getLayoutPosition(); 2841 console.log(TEST_TAG + JSON.stringify(layoutPosition)); 2842 } 2843 getUserConfigBorderWidth() 2844 { 2845 let userConfigBorderWidth = this.frameNode?.getUserConfigBorderWidth(); 2846 console.log(TEST_TAG + JSON.stringify(userConfigBorderWidth)); 2847 } 2848 getUserConfigPadding() 2849 { 2850 let userConfigPadding = this.frameNode?.getUserConfigPadding(); 2851 console.log(TEST_TAG + JSON.stringify(userConfigPadding)); 2852 } 2853 getUserConfigMargin() 2854 { 2855 let userConfigMargin = this.frameNode?.getUserConfigMargin(); 2856 console.log(TEST_TAG + JSON.stringify(userConfigMargin)); 2857 } 2858 getUserConfigSize() 2859 { 2860 let userConfigSize = this.frameNode?.getUserConfigSize(); 2861 console.log(TEST_TAG + JSON.stringify(userConfigSize)); 2862 } 2863 getId() 2864 { 2865 let id = this.frameNode?.getId(); 2866 console.log(TEST_TAG + id); 2867 } 2868 getUniqueId() 2869 { 2870 let uniqueId = this.frameNode?.getUniqueId(); 2871 console.log(TEST_TAG + uniqueId); 2872 } 2873 getNodeType() 2874 { 2875 let nodeType = this.frameNode?.getNodeType(); 2876 console.log(TEST_TAG + nodeType); 2877 } 2878 getOpacity() 2879 { 2880 let opacity = this.frameNode?.getOpacity(); 2881 console.log(TEST_TAG + JSON.stringify(opacity)); 2882 } 2883 isVisible() 2884 { 2885 let visible = this.frameNode?.isVisible(); 2886 console.log(TEST_TAG + JSON.stringify(visible)); 2887 } 2888 isClipToFrame() 2889 { 2890 let clipToFrame = this.frameNode?.isClipToFrame(); 2891 console.log(TEST_TAG + JSON.stringify(clipToFrame)); 2892 } 2893 isAttached() 2894 { 2895 let attached = this.frameNode?.isAttached(); 2896 console.log(TEST_TAG + JSON.stringify(attached)); 2897 } 2898 getInspectorInfo() 2899 { 2900 let inspectorInfo = this.frameNode?.getInspectorInfo(); 2901 console.log(TEST_TAG + JSON.stringify(inspectorInfo)); 2902 } 2903 2904 throwError() 2905 { 2906 try{ 2907 this.rootNode!.getParent()!.clearChildren(); 2908 } catch (err) { 2909 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " +(err as BusinessError).message); 2910 } 2911 try{ 2912 this.rootNode!.getParent()!.appendChild(new FrameNode(this.uiContext)); 2913 } catch (err) { 2914 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " +(err as BusinessError).message); 2915 } 2916 try{ 2917 this.rootNode!.getParent()!.removeChild(this.rootNode!.getParent()!.getChild(0)); 2918 } catch (err) { 2919 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " +(err as BusinessError).message); 2920 } 2921 } 2922} 2923 2924@Entry 2925@Component 2926struct Index { 2927 private myNodeController: MyNodeController = new MyNodeController(); 2928 @State index : number = 0; 2929 build() { 2930 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 2931 Column(){ 2932 Row() 2933 { 2934 Button("ADD") 2935 .onClick(()=>{this.index++;}) 2936 Button("DEC") 2937 .onClick(()=>{this.index--;}) 2938 } 2939 Text("Current index is " + this.index) 2940 .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) 2941 .width('100%').fontSize(16) 2942 } 2943 Button("appendChild") 2944 .width(300) 2945 .onClick(()=>{ 2946 this.myNodeController.appendChild(); 2947 }) 2948 Button("insertChildAfter") 2949 .width(300) 2950 .onClick(()=>{ 2951 this.myNodeController.insertChildAfter(this.index); 2952 }) 2953 Button("removeChild") 2954 .width(300) 2955 .onClick(()=>{ 2956 this.myNodeController.removeChild(this.index); 2957 }) 2958 Button("clearChildren") 2959 .width(300) 2960 .onClick(()=>{ 2961 this.myNodeController.clearChildren(); 2962 }) 2963 Button("getChildNumber") 2964 .width(300) 2965 .onClick(()=>{ 2966 this.myNodeController.getChildNumber(); 2967 }) 2968 Button("searchFrameNode") 2969 .width(300) 2970 .onClick(()=>{ 2971 this.myNodeController.searchFrameNode(); 2972 }) 2973 Button("getPositionToWindow") 2974 .width(300) 2975 .onClick(()=>{ 2976 this.myNodeController.getPositionToWindow(); 2977 }) 2978 Button("getPositionToParent") 2979 .width(300) 2980 .onClick(()=>{ 2981 this.myNodeController.getPositionToParent(); 2982 }) 2983 Button("getPositionToScreen") 2984 .width(300) 2985 .onClick(()=>{ 2986 this.myNodeController.getPositionToScreen(); 2987 }) 2988 Button("getPositionToParentWithTransform") 2989 .width(300) 2990 .onClick(()=>{ 2991 this.myNodeController.getPositionToParentWithTransform(); 2992 }) 2993 Button("getPositionToWindowWithTransform") 2994 .width(300) 2995 .onClick(()=>{ 2996 this.myNodeController.getPositionToWindowWithTransform(); 2997 }) 2998 Button("getPositionToScreenWithTransform") 2999 .width(300) 3000 .onClick(()=>{ 3001 this.myNodeController.getPositionToScreenWithTransform(); 3002 }) 3003 Button("getMeasuredSize") 3004 .width(300) 3005 .onClick(()=>{ 3006 this.myNodeController.getMeasuredSize(); 3007 }) 3008 Button("getLayoutPosition") 3009 .width(300) 3010 .onClick(()=>{ 3011 this.myNodeController.getLayoutPosition(); 3012 }) 3013 Button("getUserConfigBorderWidth") 3014 .width(300) 3015 .onClick(()=>{ 3016 this.myNodeController.getUserConfigBorderWidth(); 3017 }) 3018 Button("getUserConfigPadding") 3019 .width(300) 3020 .onClick(()=>{ 3021 this.myNodeController.getUserConfigPadding(); 3022 }) 3023 Button("getUserConfigMargin") 3024 .width(300) 3025 .onClick(()=>{ 3026 this.myNodeController.getUserConfigMargin(); 3027 }) 3028 Button("getUserConfigSize") 3029 .width(300) 3030 .onClick(()=>{ 3031 this.myNodeController.getUserConfigSize(); 3032 }) 3033 Button("getId") 3034 .width(300) 3035 .onClick(()=>{ 3036 this.myNodeController.getId(); 3037 }) 3038 Button("getUniqueId") 3039 .width(300) 3040 .onClick(()=>{ 3041 this.myNodeController.getUniqueId(); 3042 }) 3043 Button("getNodeType") 3044 .width(300) 3045 .onClick(()=>{ 3046 this.myNodeController.getNodeType(); 3047 }) 3048 Button("getOpacity") 3049 .width(300) 3050 .onClick(()=>{ 3051 this.myNodeController.getOpacity(); 3052 }) 3053 Button("isVisible") 3054 .width(300) 3055 .onClick(()=>{ 3056 this.myNodeController.isVisible(); 3057 }) 3058 Button("isClipToFrame") 3059 .width(300) 3060 .onClick(()=>{ 3061 this.myNodeController.isClipToFrame(); 3062 }) 3063 Button("isAttached") 3064 .width(300) 3065 .onClick(()=>{ 3066 this.myNodeController.isAttached(); 3067 }) 3068 Button("getInspectorInfo") 3069 .width(300) 3070 .onClick(()=>{ 3071 this.myNodeController.getInspectorInfo(); 3072 }) 3073 Button("getCustomProperty") 3074 .width(300) 3075 .onClick(()=>{ 3076 const uiContext: UIContext = this.getUIContext(); 3077 if (uiContext) { 3078 const node: FrameNode | null = uiContext.getFrameNodeById("Test_Button") || null; 3079 if (node) { 3080 for (let i = 1; i < 4; i++) { 3081 const key = 'customProperty' + i; 3082 const property = node.getCustomProperty(key); 3083 console.log(TEST_TAG + key, JSON.stringify(property)); 3084 } 3085 } 3086 } 3087 }) 3088 .id('Test_Button') 3089 .customProperty('customProperty1', { 3090 'number': 10, 3091 'string': 'this is a string', 3092 'bool': true, 3093 'object': { 3094 'name': 'name', 3095 'value': 100 3096 } 3097 }) 3098 .customProperty('customProperty2', {}) 3099 .customProperty('customProperty2', undefined) 3100 Button("throwError") 3101 .width(300) 3102 .onClick(()=>{ 3103 this.myNodeController.throwError(); 3104 }) 3105 Column(){ 3106 Text("This is a NodeContainer.") 3107 .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) 3108 .width('100%').fontSize(16) 3109 NodeContainer(this.myNodeController) 3110 .borderWidth(1) 3111 .width(300) 3112 .height(100) 3113 } 3114 } 3115 .padding({ left: 35, right: 35, top: 35, bottom: 35 }) 3116 .width("100%") 3117 .height("100%") 3118 } 3119} 3120``` 3121## Basic Event Example 3122```ts 3123import { NodeController, FrameNode } from '@kit.ArkUI'; 3124 3125class MyNodeController extends NodeController { 3126 public rootNode: FrameNode | null = null; 3127 3128 makeNode(uiContext: UIContext): FrameNode | null { 3129 this.rootNode = new FrameNode(uiContext); 3130 this.rootNode.commonAttribute.width(100) 3131 .height(100) 3132 .backgroundColor(Color.Pink); 3133 this.addCommonEvent(this.rootNode); 3134 return this.rootNode; 3135 } 3136 3137 addCommonEvent(frameNode: FrameNode) { 3138 frameNode.commonEvent.setOnHover(((isHover: boolean, event: HoverEvent): void => { 3139 console.log(`isHover FrameNode: ${isHover}`); 3140 console.log(`isHover FrameNode: ${JSON.stringify(event)}`); 3141 event.stopPropagation(); 3142 })) 3143 frameNode.commonEvent.setOnClick((event: ClickEvent) => { 3144 console.log(`Click FrameNode: ${JSON.stringify(event)}`) 3145 }) 3146 frameNode.commonEvent.setOnTouch((event: TouchEvent) => { 3147 console.log(`touch FrameNode: ${JSON.stringify(event)}`) 3148 }) 3149 frameNode.commonEvent.setOnAppear(() => { 3150 console.log(`on Appear FrameNode`) 3151 }) 3152 frameNode.commonEvent.setOnDisappear(() => { 3153 console.log(`onDisAppear FrameNode`) 3154 }) 3155 frameNode.commonEvent.setOnFocus(() => { 3156 console.log(`onFocus FrameNode`) 3157 }) 3158 frameNode.commonEvent.setOnBlur(() => { 3159 console.log(`onBlur FrameNode`) 3160 }) 3161 frameNode.commonEvent.setOnKeyEvent((event: KeyEvent) => { 3162 console.log(`Key FrameNode: ${JSON.stringify(event)}`) 3163 }) 3164 frameNode.commonEvent.setOnMouse((event: MouseEvent) => { 3165 console.log(`Mouse FrameNode: ${JSON.stringify(event)}`) 3166 }) 3167 frameNode.commonEvent.setOnSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 3168 console.info(`onSizeChange FrameNode: oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 3169 }) 3170 } 3171} 3172 3173@Entry 3174@Component 3175struct Index { 3176 @State index: number = 0; 3177 private myNodeController: MyNodeController = new MyNodeController(); 3178 3179 build() { 3180 Column() { 3181 Button("add CommonEvent to Text") 3182 .onClick(() => { 3183 this.myNodeController!.addCommonEvent(this.myNodeController!.rootNode!.getParent()!.getPreviousSibling() !) 3184 }) 3185 Text("this is a Text") 3186 .fontSize(16) 3187 .borderWidth(1) 3188 .onHover(((isHover: boolean, event: HoverEvent): void => { 3189 console.log(`isHover Text: ${isHover}`); 3190 console.log(`isHover Text: ${JSON.stringify(event)}`); 3191 event.stopPropagation(); 3192 })) 3193 .onClick((event: ClickEvent) => { 3194 console.log(`Click Text : ${JSON.stringify(event)}`) 3195 }) 3196 .onTouch((event: TouchEvent) => { 3197 console.log(`touch Text : ${JSON.stringify(event)}`) 3198 }) 3199 .onAppear(() => { 3200 console.log(`on Appear Text`) 3201 }) 3202 .onDisAppear(() => { 3203 console.log(`onDisAppear Text`) 3204 }) 3205 .onFocus(() => { 3206 console.log(`onFocus Text`) 3207 }) 3208 .onBlur(() => { 3209 console.log(`onBlur Text`) 3210 }) 3211 .onKeyEvent((event: KeyEvent) => { 3212 console.log(`Key Text : ${JSON.stringify(event)}`) 3213 }) 3214 .onMouse((event: MouseEvent) => { 3215 console.log(`Mouse Text : ${JSON.stringify(event)}`) 3216 }) 3217 .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 3218 console.info(`onSizeChange Text: oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 3219 }) 3220 NodeContainer(this.myNodeController) 3221 .borderWidth(1) 3222 .width(300) 3223 .height(100) 3224 }.width("100%") 3225 } 3226} 3227``` 3228 3229## Example of Using Basic Events in the LazyForEach Scenario 3230 3231<!--code_no_check--> 3232 3233```ts 3234// index.ets 3235import {Track, TrackManager, TrackNode} from "./track" 3236 3237@Builder 3238function page1() { 3239 Column() { 3240 Text("Page1") 3241 PageList().height("90%") 3242 Button("DumpMessage") 3243 .onClick(() => { 3244 TrackManager.get().dump() 3245 }) 3246 3247 }.width("100%").height("100%") 3248} 3249 3250class BasicDataSource implements IDataSource { 3251 private listeners: DataChangeListener[] = []; 3252 private originDataArray: string[] = []; 3253 3254 public totalCount(): number { 3255 return 0; 3256 } 3257 3258 public getData(index: number): string { 3259 return this.originDataArray[index]; 3260 } 3261 3262 // This method is called by the framework to add a listener to the LazyForEach data source. 3263 registerDataChangeListener(listener: DataChangeListener): void { 3264 if (this.listeners.indexOf(listener) < 0) { 3265 console.info('add listener'); 3266 this.listeners.push(listener); 3267 } 3268 } 3269 3270 // This method is called by the framework to remove the listener from the LazyForEach data source. 3271 unregisterDataChangeListener(listener: DataChangeListener): void { 3272 const pos = this.listeners.indexOf(listener); 3273 if (pos >= 0) { 3274 console.info('remove listener'); 3275 this.listeners.splice(pos, 1); 3276 } 3277 } 3278 3279 // Notify LazyForEach that all child components need to be reloaded. 3280 notifyDataReload(): void { 3281 this.listeners.forEach(listener => { 3282 listener.onDataReloaded(); 3283 }) 3284 } 3285 3286 // Notify LazyForEach that a child component needs to be added for the data item with the specified index. 3287 notifyDataAdd(index: number): void { 3288 this.listeners.forEach(listener => { 3289 listener.onDataAdd(index); 3290 }) 3291 } 3292 3293 // Notify LazyForEach that the data item with the specified index has changed and the child component needs to be rebuilt. 3294 notifyDataChange(index: number): void { 3295 this.listeners.forEach(listener => { 3296 listener.onDataChange(index); 3297 }) 3298 } 3299 3300 // Notify LazyForEach that the child component that matches the specified index needs to be deleted. 3301 notifyDataDelete(index: number): void { 3302 this.listeners.forEach(listener => { 3303 listener.onDataDelete(index); 3304 }) 3305 } 3306 3307 // Notify LazyForEach that data needs to be swapped between the from and to positions. 3308 notifyDataMove(from: number, to: number): void { 3309 this.listeners.forEach(listener => { 3310 listener.onDataMove(from, to); 3311 }) 3312 } 3313} 3314 3315class MyDataSource extends BasicDataSource { 3316 private dataArray: string[] = []; 3317 3318 public totalCount(): number { 3319 return this.dataArray.length; 3320 } 3321 3322 public getData(index: number): string { 3323 return this.dataArray[index]; 3324 } 3325 3326 public addData(index: number, data: string): void { 3327 this.dataArray.splice(index, 0, data); 3328 this.notifyDataAdd(index); 3329 } 3330 3331 public pushData(data: string): void { 3332 this.dataArray.push(data); 3333 this.notifyDataAdd(this.dataArray.length - 1); 3334 } 3335} 3336 3337@Component 3338struct PageList { 3339 private data: MyDataSource = new MyDataSource(); 3340 3341 aboutToAppear() { 3342 for (let i = 0; i <= 100; i++) { 3343 this.data.pushData(`Hello ${i}`) 3344 } 3345 } 3346 3347 build() { 3348 List({ space: 3 }) { 3349 LazyForEach(this.data, (item: string, index: number) => { 3350 ListItem() { 3351 // Encapsulate and instrument the component with tracking through TrackNode. 3352 TrackNode({track: new Track().tag("xxx"+ item).id(index + 30000)}) { 3353 Row() { 3354 Text(item).fontSize(30) 3355 .onClick(() => { 3356 }) 3357 }.margin({ left: 10, right: 10 }) 3358 } 3359 } 3360 }, (item: string) => item) 3361 }.cachedCount(5) 3362 } 3363} 3364 3365 3366@Entry 3367@Component 3368struct TrackTest { 3369 pageInfos: NavPathStack = new NavPathStack() 3370 build() { 3371 Row() { 3372 TrackNode({ track: new Track().tag("root").id(10000)}) { 3373 page1() 3374 } 3375 } 3376 } 3377 3378 aboutToAppear(): void { 3379 TrackManager.get().startListenClick(this.getUIContext()) 3380 } 3381} 3382``` 3383 3384<!--code_no_check--> 3385 3386```ts 3387// ./track.ets 3388import { FrameNode, Rect } from '@kit.ArkUI'; 3389 3390@Component 3391export struct TrackNode { 3392 @BuilderParam closer: VoidCallback = this.defaultBuilder 3393 track: Track | null = null 3394 trackShadow: TrackShadow = new TrackShadow() 3395 3396 @Builder defaultBuilder() { 3397 } 3398 3399 build() { 3400 this.closer() 3401 } 3402 3403 aboutToAppear(): void { 3404 // use onDidBuild later 3405 } 3406 3407 aboutToDisappear(): void { 3408 TrackManager.get().removeTrack(this.trackShadow.id) 3409 console.log("Track disappear:" + this.trackShadow.id) 3410 } 3411 3412 onDidBuild(): void { 3413 // Construct a virtual tree with the tracing point. The obtained node is the root node of the current page (Row in the case). 3414 let uid = this.getUniqueId() 3415 let node: FrameNode | null = this.getUIContext().getFrameNodeByUniqueId(uid); 3416 console.log("Track onDidBuild node:" + node?.getNodeType()) 3417 if (node === null) { 3418 return 3419 } 3420 this.trackShadow.node = node 3421 this.trackShadow.id = node?.getUniqueId() 3422 this.trackShadow.track = this.track; 3423 TrackManager.get().addTrack(this.trackShadow.id, this.trackShadow) 3424 // Use setOnVisibleAreaApproximateChange to listen for and record changes in the visible area of the tracked component. 3425 node?.commonEvent.setOnVisibleAreaApproximateChange( 3426 { ratios: [0, 0.1, 0.2, 0.5, 0.8, 1], expectedUpdateInterval: 500 }, 3427 (ratioInc: boolean, ratio: number) => { 3428 console.log(`Node ${node?.getUniqueId()}:${node?.getNodeType()} is visibleRatio is ${ratio}`); 3429 this.trackShadow.visibleRatio = ratio 3430 }) 3431 3432 let parent: FrameNode | null = node?.getParent() 3433 3434 let attachTrackToParent: (parent: FrameNode | null) => boolean = 3435 (parent: FrameNode | null) => { 3436 while (parent !== null) { 3437 let parentTrack = TrackManager.get().getTrackById(parent.getUniqueId()) 3438 if (parentTrack !== undefined) { 3439 parentTrack.childIds.add(this.trackShadow.id) 3440 this.trackShadow.parentId = parentTrack.id 3441 return true; 3442 } 3443 parent = parent.getParent() 3444 } 3445 return false; 3446 } 3447 let attached = attachTrackToParent(parent); 3448 3449 if (!attached) { 3450 node?.commonEvent.setOnAppear(() => { 3451 let attached = attachTrackToParent(parent); 3452 if (attached) { 3453 console.log("Track lazy attached:" + this.trackShadow.id) 3454 } 3455 }) 3456 } 3457 } 3458} 3459 3460export class Track { 3461 public areaPercent: number = 0 3462 private trackTag: string = "" 3463 private trackId: number = 0 3464 3465 constructor() { 3466 } 3467 3468 tag(newTag: string): Track { 3469 this.trackTag = newTag; 3470 return this; 3471 } 3472 3473 id(newId: number): Track { 3474 this.trackId = newId; 3475 return this; 3476 } 3477} 3478 3479export class TrackShadow { 3480 public node: FrameNode | null = null 3481 public id: number = -1 3482 public track: Track | null = null 3483 public childIds: Set<number> = new Set() 3484 public parentId: number = -1 3485 public visibleRect: Rect = { left: 0, top: 0, right: 0, bottom: 0 } 3486 public area: number = 0 3487 public visibleRatio: number = 0 3488 3489 // Output the tracing point tree information through global dump. 3490 dump(depth: number = 0): void { 3491 console.log("Track Dp:" + depth + " id:" + this.id + " areaPer:" + this.track?.areaPercent + " visibleRatio:" + this.visibleRatio) 3492 this.childIds.forEach((value: number) => { 3493 TrackManager.get().getTrackById(value)?.dump(depth + 1) 3494 }) 3495 } 3496} 3497 3498export class TrackManager { 3499 static instance: TrackManager 3500 private trackMap: Map<number, TrackShadow> = new Map() 3501 private rootTrack: TrackShadow | null = null 3502 3503 static get(): TrackManager { 3504 if (TrackManager.instance !== undefined) { 3505 return TrackManager.instance 3506 } 3507 TrackManager.instance = new TrackManager() 3508 return TrackManager.instance 3509 } 3510 3511 addTrack(id: number, track: TrackShadow) { 3512 if (this.trackMap.size == 0) { 3513 this.rootTrack = track 3514 } 3515 console.log("Track add id:" + id) 3516 this.trackMap.set(id, track) 3517 } 3518 3519 removeTrack(id: number) { 3520 let current = this.getTrackById(id) 3521 if (current !== undefined) { 3522 this.trackMap.delete(id) 3523 let parent = this.getTrackById(current?.parentId) 3524 parent?.childIds.delete(id) 3525 } 3526 } 3527 3528 getTrackById(id: number): TrackShadow | undefined { 3529 return this.trackMap.get(id) 3530 } 3531 3532 startListenClick(context: UIContext) { 3533 // Obtain the FrameNode through listening for tracing point information. 3534 context.getUIObserver().on("willClick", (event: ClickEvent, node?: FrameNode) => { 3535 console.log("Track clicked:" + node) 3536 if (node == undefined) { 3537 return 3538 } 3539 let track = this.getTrackById(node.getUniqueId()) 3540 track?.dump(0); 3541 }) 3542 } 3543 3544 updateVisibleInfo(track: TrackShadow): void { 3545 // do something 3546 } 3547 3548 dump(): void { 3549 this.rootTrack?.dump(0) 3550 } 3551} 3552``` 3553## Example of Customizing a Node 3554 3555```ts 3556import { UIContext, DrawContext, FrameNode, NodeController, LayoutConstraint, Size, Position } from '@kit.ArkUI'; 3557import { drawing } from '@kit.ArkGraphics2D'; 3558 3559function GetChildLayoutConstraint(constraint: LayoutConstraint, child: FrameNode): LayoutConstraint { 3560 const size = child.getUserConfigSize(); 3561 const width = Math.max( 3562 Math.min(constraint.maxSize.width, size.width.value), 3563 constraint.minSize.width 3564 ); 3565 const height = Math.max( 3566 Math.min(constraint.maxSize.height, size.height.value), 3567 constraint.minSize.height 3568 ); 3569 const finalSize: Size = { width, height }; 3570 const res: LayoutConstraint = { 3571 maxSize: finalSize, 3572 minSize: finalSize, 3573 percentReference: finalSize 3574 }; 3575 3576 return res; 3577} 3578 3579class MyFrameNode extends FrameNode { 3580 public width: number = 10; 3581 private space: number = 1; 3582 3583 onMeasure(constraint: LayoutConstraint): void { 3584 let sizeRes: Size = { width: 100, height: 100 }; 3585 for (let i = 0;i < this.getChildrenCount();i++) { 3586 let child = this.getChild(i); 3587 if (child) { 3588 let childConstraint = GetChildLayoutConstraint(constraint, child); 3589 child.measure(childConstraint); 3590 let size = child.getMeasuredSize(); 3591 sizeRes.height += size.height + this.space; 3592 sizeRes.width = Math.max(sizeRes.width, size.width); 3593 } 3594 } 3595 this.setMeasuredSize(sizeRes); 3596 } 3597 3598 onLayout(position: Position): void { 3599 let y = 0; 3600 for (let i = 0;i < this.getChildrenCount();i++) { 3601 let child = this.getChild(i); 3602 if (child) { 3603 child.layout({ 3604 x: 20, 3605 y: y 3606 }); 3607 y += child.getMeasuredSize().height + this.space; 3608 } 3609 } 3610 this.setLayoutPosition(position); 3611 } 3612 3613 onDraw(context: DrawContext) { 3614 const canvas = context.canvas; 3615 const pen = new drawing.Pen(); 3616 pen.setStrokeWidth(5); 3617 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 3618 canvas.attachPen(pen); 3619 canvas.drawRect({ left: 0, right: this.width, top: 0, bottom: this.width }); 3620 canvas.detachPen(); 3621 } 3622 3623 addWidth() { 3624 this.width += 10; 3625 } 3626} 3627 3628class MyNodeController extends NodeController { 3629 public rootNode: MyFrameNode | null = null; 3630 3631 makeNode(context: UIContext): FrameNode | null { 3632 this.rootNode = new MyFrameNode(context); 3633 this.rootNode?.commonAttribute?.size({ width: 100, height: 100 }).backgroundColor(Color.Green); 3634 return this.rootNode; 3635 } 3636} 3637 3638@Entry 3639@Component 3640struct Index { 3641 private nodeController: MyNodeController = new MyNodeController(); 3642 3643 build() { 3644 Row() { 3645 Column() { 3646 NodeContainer(this.nodeController) 3647 .width('100%') 3648 .height(100) 3649 .backgroundColor('#FFF0F0F0') 3650 Button('Invalidate') 3651 .onClick(() => { 3652 this.nodeController?.rootNode?.addWidth(); 3653 this.nodeController?.rootNode?.invalidate(); 3654 }) 3655 Button('UpdateLayout') 3656 .onClick(() => { 3657 this.nodeController?.rootNode?.setNeedsLayout(); 3658 }) 3659 } 3660 .width('100%') 3661 .height('100%') 3662 } 3663 .height('100%') 3664 } 3665} 3666``` 3667## NodeAdapter Usage Example 3668 3669```ts 3670import { FrameNode, NodeController, NodeAdapter, typeNode } from '@kit.ArkUI'; 3671 3672class MyNodeAdapter extends NodeAdapter { 3673 uiContext: UIContext 3674 cachePool: Array<FrameNode> = new Array(); 3675 changed: boolean = false 3676 reloadTimes: number = 0; 3677 data: Array<string> = new Array(); 3678 hostNode?: FrameNode 3679 3680 constructor(uiContext: UIContext, count: number) { 3681 super(); 3682 this.uiContext = uiContext; 3683 this.totalNodeCount = count; 3684 this.loadData(); 3685 } 3686 3687 reloadData(count: number): void { 3688 this.reloadTimes++; 3689 NodeAdapter.attachNodeAdapter(this, this.hostNode); 3690 this.totalNodeCount = count; 3691 this.loadData(); 3692 this.reloadAllItems(); 3693 } 3694 3695 refreshData(): void { 3696 let items = this.getAllAvailableItems() 3697 console.log("UINodeAdapter get All items:" + items.length); 3698 this.reloadAllItems(); 3699 } 3700 3701 detachData(): void { 3702 NodeAdapter.detachNodeAdapter(this.hostNode); 3703 this.reloadTimes = 0; 3704 } 3705 3706 loadData(): void { 3707 for (let i = 0; i < this.totalNodeCount; i++) { 3708 this.data[i] = "Adapter ListItem " + i + " r:" + this.reloadTimes; 3709 } 3710 } 3711 3712 changeData(from: number, count: number): void { 3713 this.changed = !this.changed; 3714 for (let i = 0; i < count; i++) { 3715 let index = i + from; 3716 this.data[index] = "Adapter ListItem " + (this.changed ? "changed:" : "") + index + " r:" + this.reloadTimes; 3717 } 3718 this.reloadItem(from, count); 3719 } 3720 3721 insertData(from: number, count: number): void { 3722 for (let i = 0; i < count; i++) { 3723 let index = i + from; 3724 this.data.splice(index, 0, "Adapter ListItem " + from + "-" + i); 3725 } 3726 this.insertItem(from, count); 3727 this.totalNodeCount += count; 3728 console.log("UINodeAdapter after insert count:" + this.totalNodeCount); 3729 } 3730 3731 removeData(from: number, count: number): void { 3732 let arr = this.data.splice(from, count); 3733 this.removeItem(from, count); 3734 this.totalNodeCount -= arr.length; 3735 console.log("UINodeAdapter after remove count:" + this.totalNodeCount); 3736 } 3737 3738 moveData(from: number, to: number): void { 3739 let tmp = this.data.splice(from, 1); 3740 this.data.splice(to, 0, tmp[0]); 3741 this.moveItem(from, to); 3742 } 3743 3744 onAttachToNode(target: FrameNode): void { 3745 console.log("UINodeAdapter onAttachToNode id:" + target.getUniqueId()); 3746 this.hostNode = target; 3747 } 3748 3749 onDetachFromNode(): void { 3750 console.log("UINodeAdapter onDetachFromNode"); 3751 } 3752 3753 onGetChildId(index: number): number { 3754 console.log("UINodeAdapter onGetChildId:" + index); 3755 return index; 3756 } 3757 3758 onCreateChild(index: number): FrameNode { 3759 console.log("UINodeAdapter onCreateChild:" + index); 3760 if (this.cachePool.length > 0) { 3761 let cacheNode = this.cachePool.pop(); 3762 if (cacheNode !== undefined) { 3763 console.log("UINodeAdapter onCreateChild reused id:" + cacheNode.getUniqueId()); 3764 let text = cacheNode?.getFirstChild(); 3765 let textNode = text as typeNode.Text; 3766 textNode?.initialize(this.data[index]).fontSize(20); 3767 return cacheNode; 3768 } 3769 } 3770 console.log("UINodeAdapter onCreateChild createNew"); 3771 let itemNode = typeNode.createNode(this.uiContext, "ListItem"); 3772 let textNode = typeNode.createNode(this.uiContext, "Text"); 3773 textNode.initialize(this.data[index]).fontSize(20); 3774 itemNode.appendChild(textNode); 3775 return itemNode; 3776 } 3777 3778 onDisposeChild(id: number, node: FrameNode): void { 3779 console.log("UINodeAdapter onDisposeChild:" + id); 3780 if (this.cachePool.length < 10) { 3781 if (!this.cachePool.includes(node)) { 3782 console.log("UINodeAdapter caching node id:" + node.getUniqueId()); 3783 this.cachePool.push(node); 3784 } 3785 } else { 3786 node.dispose(); 3787 } 3788 } 3789 3790 onUpdateChild(id: number, node: FrameNode): void { 3791 let index = id; 3792 let text = node.getFirstChild(); 3793 let textNode = text as typeNode.Text; 3794 textNode?.initialize(this.data[index]).fontSize(20); 3795 } 3796} 3797 3798class MyNodeAdapterController extends NodeController { 3799 rootNode: FrameNode | null = null; 3800 nodeAdapter: MyNodeAdapter | null = null; 3801 3802 makeNode(uiContext: UIContext): FrameNode | null { 3803 this.rootNode = new FrameNode(uiContext); 3804 let listNode = typeNode.createNode(uiContext, "List"); 3805 listNode.initialize({ space: 3 }).borderWidth(2).borderColor(Color.Black); 3806 this.rootNode.appendChild(listNode); 3807 this.nodeAdapter = new MyNodeAdapter(uiContext, 100); 3808 NodeAdapter.attachNodeAdapter(this.nodeAdapter, listNode); 3809 return this.rootNode; 3810 } 3811} 3812 3813@Entry 3814@Component 3815struct ListNodeTest { 3816 adapterController: MyNodeAdapterController = new MyNodeAdapterController(); 3817 3818 build() { 3819 Column() { 3820 Text("ListNode Adapter"); 3821 NodeContainer(this.adapterController) 3822 .width(300).height(300) 3823 .borderWidth(1).borderColor(Color.Black); 3824 Row() { 3825 Button("Reload") 3826 .onClick(() => { 3827 this.adapterController.nodeAdapter?.reloadData(50); 3828 }) 3829 Button("Change") 3830 .onClick(() => { 3831 this.adapterController.nodeAdapter?.changeData(5, 10) 3832 }) 3833 Button("Insert") 3834 .onClick(() => { 3835 this.adapterController.nodeAdapter?.insertData(10, 10); 3836 }) 3837 } 3838 3839 Row() { 3840 Button("Remove") 3841 .onClick(() => { 3842 this.adapterController.nodeAdapter?.removeData(10, 10); 3843 }) 3844 Button("Move") 3845 .onClick(() => { 3846 this.adapterController.nodeAdapter?.moveData(2, 5); 3847 }) 3848 Button("Refresh") 3849 .onClick(() => { 3850 this.adapterController.nodeAdapter?.refreshData(); 3851 }) 3852 Button("Detach") 3853 .onClick(() => { 3854 this.adapterController.nodeAdapter?.detachData(); 3855 }) 3856 } 3857 }.borderWidth(1) 3858 .width("100%") 3859 } 3860} 3861 3862``` 3863
