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 row4.addComponentContent(component) 1128 col.appendChild(row4) 1129 return node 1130 } 1131} 1132 1133@Entry 1134@Component 1135struct FrameNodeTypeTest { 1136 private myNodeController: MyNodeController = new MyNodeController(); 1137 1138 build() { 1139 Row() { 1140 NodeContainer(this.myNodeController); 1141 } 1142 } 1143} 1144``` 1145 1146### disposeTree<sup>12+</sup> 1147 1148disposeTree(): void 1149 1150Traverses down the tree and recursively releases the subtree with this node as the root. 1151 1152**Atomic service API**: This API can be used in atomic services since API version 12. 1153 1154**System capability**: SystemCapability.ArkUI.ArkUI.Full 1155 1156```ts 1157import { FrameNode, NodeController, BuilderNode } from '@kit.ArkUI'; 1158 1159@Component 1160struct TestComponent { 1161 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent2)); 1162 1163 build() { 1164 Column() { 1165 Text('This is a BuilderNode.') 1166 .fontSize(16) 1167 .fontWeight(FontWeight.Bold) 1168 NodeContainer(this.myNodeController) 1169 } 1170 .width('100%') 1171 .backgroundColor(Color.Gray) 1172 } 1173 1174 aboutToAppear() { 1175 console.error('BuilderNode aboutToAppear'); 1176 } 1177 1178 aboutToDisappear() { 1179 console.error('BuilderNode aboutToDisappear'); 1180 } 1181} 1182 1183@Component 1184struct TestComponent2 { 1185 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent3)); 1186 private myNodeController2: MyNodeController = new MyNodeController(wrapBuilder(buildComponent4)); 1187 1188 build() { 1189 Column() { 1190 Text('This is a BuilderNode 2.') 1191 .fontSize(16) 1192 .fontWeight(FontWeight.Bold) 1193 NodeContainer(this.myNodeController) 1194 NodeContainer(this.myNodeController2) 1195 } 1196 .width('100%') 1197 .backgroundColor(Color.Gray) 1198 } 1199 1200 aboutToAppear() { 1201 console.error('BuilderNode 2 aboutToAppear'); 1202 } 1203 1204 aboutToDisappear() { 1205 console.error('BuilderNode 2 aboutToDisappear'); 1206 } 1207} 1208 1209@Component 1210struct TestComponent3 { 1211 build() { 1212 Column() { 1213 Text('This is a BuilderNode 3.') 1214 .fontSize(16) 1215 .fontWeight(FontWeight.Bold) 1216 1217 } 1218 .width('100%') 1219 .backgroundColor(Color.Gray) 1220 } 1221 1222 aboutToAppear() { 1223 console.error('BuilderNode 3 aboutToAppear'); 1224 } 1225 1226 aboutToDisappear() { 1227 console.error('BuilderNode 3 aboutToDisappear'); 1228 } 1229} 1230 1231@Component 1232struct TestComponent4 { 1233 build() { 1234 Column() { 1235 Text('This is a BuilderNode 4.') 1236 .fontSize(16) 1237 .fontWeight(FontWeight.Bold) 1238 1239 } 1240 .width('100%') 1241 .backgroundColor(Color.Gray) 1242 } 1243 1244 aboutToAppear() { 1245 console.error('BuilderNode 4 aboutToAppear'); 1246 } 1247 1248 aboutToDisappear() { 1249 console.error('BuilderNode 4 aboutToDisappear'); 1250 } 1251} 1252 1253@Builder 1254function buildComponent() { 1255 TestComponent() 1256} 1257 1258@Builder 1259function buildComponent2() { 1260 TestComponent2() 1261} 1262 1263@Builder 1264function buildComponent3() { 1265 TestComponent3() 1266} 1267 1268@Builder 1269function buildComponent4() { 1270 TestComponent4() 1271} 1272 1273class MyNodeController extends NodeController { 1274 private rootNode: FrameNode | null = null; 1275 private builderNode: BuilderNode<[]> | null = null; 1276 private wrappedBuilder: WrappedBuilder<[]>; 1277 1278 constructor(builder: WrappedBuilder<[]>) { 1279 super(); 1280 this.wrappedBuilder = builder; 1281 } 1282 1283 makeNode(uiContext: UIContext): FrameNode | null { 1284 this.builderNode = new BuilderNode(uiContext, { selfIdealSize: { width: 200, height: 100 } }); 1285 this.builderNode.build(this.wrappedBuilder); 1286 1287 return this.builderNode.getFrameNode(); 1288 } 1289 1290 dispose() { 1291 if (this.builderNode !== null) { 1292 this.builderNode.getFrameNode()?.disposeTree() 1293 } 1294 } 1295 1296 removeBuilderNode() { 1297 const rootRenderNode = this.rootNode!.getRenderNode(); 1298 if (rootRenderNode !== null && this.builderNode !== null && this.builderNode.getFrameNode() !== null) { 1299 rootRenderNode.removeChild(this.builderNode!.getFrameNode()!.getRenderNode()); 1300 } 1301 } 1302} 1303 1304@Entry 1305@Component 1306struct Index { 1307 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent)); 1308 1309 build() { 1310 Column({ space: 4 }) { 1311 NodeContainer(this.myNodeController) 1312 Button('BuilderNode dispose') 1313 .onClick(() => { 1314 this.myNodeController.dispose(); 1315 }) 1316 .width('100%') 1317 Button('BuilderNode rebuild') 1318 .onClick(() => { 1319 this.myNodeController.rebuild(); 1320 }) 1321 .width('100%') 1322 } 1323 } 1324} 1325``` 1326 1327**Example** 1328 1329See [Example of Customizing a Node](#example-of-customizing-a-node). 1330 1331## TypedFrameNode<sup>12+</sup> 1332 1333Inherits from [FrameNode](#framenode), used to declare a specific type of FrameNode. 1334 1335### initialize<sup>12+</sup> 1336 1337initialize: C 1338 1339Creates construction parameters of a component to set or update the initial value of the component. 1340 1341**Atomic service API**: This API can be used in atomic services since API version 12. 1342 1343**System capability**: SystemCapability.ArkUI.ArkUI.Full 1344 1345### attribute<sup>12+</sup> 1346 1347attribute(): T 1348 1349Obtains the attribute setting object of a component to set or update the common and private attributes of the component. 1350 1351**Atomic service API**: This API can be used in atomic services since API version 12. 1352 1353**System capability**: SystemCapability.ArkUI.ArkUI.Full 1354 1355## typeNode<sup>12+</sup> 1356 1357Provides 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. 1358 1359**Example** 1360 1361For details, see [Example of Customizing a Node of a Specific Type](#example-of-customizing-a node-of-a-specific-type). 1362 1363### Text<sup>12+</sup> 1364type Text = TypedFrameNode<TextInterface, TextAttribute> 1365 1366Represents a FrameNode of the Text type. 1367 1368**Atomic service API**: This API can be used in atomic services since API version 12. 1369 1370**System capability**: SystemCapability.ArkUI.ArkUI.Full 1371 1372| Type | Description | 1373| ----------------------------- | -------------------- | 1374| 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. | 1375 1376### createNode('Text')<sup>12+</sup> 1377createNode(context: UIContext, nodeType: 'Text'): Text 1378 1379Create a FrameNode of the Text type. 1380 1381**Atomic service API**: This API can be used in atomic services since API version 12. 1382 1383**System capability**: SystemCapability.ArkUI.ArkUI.Full 1384 1385**Parameters** 1386 1387| Name | Type | Mandatory | Description | 1388| ------------------ | ------------------ | ------------------- | ------------------- | 1389| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1390| nodeType | 'Text' | Yes | Node type. | 1391 1392**Return value** 1393 1394| Type | Description | 1395| ------------------ | ------------------ | 1396| [Text](#text12) | FrameNode node of the Text type. | 1397 1398**Example** 1399 1400```ts 1401typeNode.createNode(uiContext, 'Text'); 1402``` 1403 1404### Column<sup>12+</sup> 1405type Column = TypedFrameNode<ColumnInterface, ColumnAttribute> 1406 1407Represents a FrameNode of the Text type. 1408 1409**Atomic service API**: This API can be used in atomic services since API version 12. 1410 1411**System capability**: SystemCapability.ArkUI.ArkUI.Full 1412 1413| Type | Description | 1414| ----------------------------- | -------------------- | 1415| 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. | 1416 1417### createNode('Column')<sup>12+</sup> 1418createNode(context: UIContext, nodeType: 'Column'): Column 1419 1420Creates a FrameNode of the Column type. 1421 1422**Atomic service API**: This API can be used in atomic services since API version 12. 1423 1424**System capability**: SystemCapability.ArkUI.ArkUI.Full 1425 1426**Parameters** 1427 1428| Name | Type | Mandatory | Description | 1429| ------------------ | ------------------ | ------------------- | ------------------- | 1430| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1431| nodeType | 'Column' | Yes | Node type, which is Column in this API. | 1432 1433**Return value** 1434 1435| Type | Description | 1436| ------------------ | ------------------ | 1437| [Column](#column12) | FrameNode node of the Column type. | 1438 1439**Example** 1440 1441```ts 1442typeNode.createNode(uiContext, 'Column'); 1443``` 1444### Row<sup>12+</sup> 1445type Row = TypedFrameNode<RowInterface, RowAttribute> 1446 1447Represents a FrameNode of the Row type. 1448 1449**Atomic service API**: This API can be used in atomic services since API version 12. 1450 1451**System capability**: SystemCapability.ArkUI.ArkUI.Full 1452 1453| Type | Description | 1454| ----------------------------- | -------------------- | 1455| 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. | 1456 1457### createNode('Row')<sup>12+</sup> 1458createNode(context: UIContext, nodeType: 'Row'): Row 1459 1460Creates a FrameNode of the Row type. 1461 1462**Atomic service API**: This API can be used in atomic services since API version 12. 1463 1464**System capability**: SystemCapability.ArkUI.ArkUI.Full 1465 1466**Parameters** 1467 1468| Name | Type | Mandatory | Description | 1469| ------------------ | ------------------ | ------------------- | ------------------- | 1470| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1471| nodeType | 'Row' | Yes | Node type, which is Row in this API. | 1472 1473**Return value** 1474 1475| Type | Description | 1476| ------------------ | ------------------ | 1477| [Row](#row12) | FrameNode node of the Row type. | 1478 1479**Example** 1480 1481```ts 1482typeNode.createNode(uiContext, 'Row'); 1483``` 1484### Stack<sup>12+</sup> 1485type Stack = TypedFrameNode<StackInterface, StackAttribute> 1486 1487Represents a FrameNode of the Stack type. 1488 1489**Atomic service API**: This API can be used in atomic services since API version 12. 1490 1491**System capability**: SystemCapability.ArkUI.ArkUI.Full 1492 1493| Type | Description | 1494| ----------------------------- | -------------------- | 1495| 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. | 1496 1497### createNode('Stack')<sup>12+</sup> 1498createNode(context: UIContext, nodeType: 'Stack'): Stack 1499 1500Creates a FrameNode of the Stack type. 1501 1502**Atomic service API**: This API can be used in atomic services since API version 12. 1503 1504**System capability**: SystemCapability.ArkUI.ArkUI.Full 1505 1506**Parameters** 1507 1508| Name | Type | Mandatory | Description | 1509| ------------------ | ------------------ | ------------------- | ------------------- | 1510| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1511| nodeType | 'Stack' | Yes | Node type, which is Stack in this API. | 1512 1513**Return value** 1514 1515| Type | Description | 1516| ------------------ | ------------------ | 1517| [Stack](#stack12) | FrameNode node of the Stack type. | 1518 1519**Example** 1520 1521```ts 1522typeNode.createNode(uiContext, 'Stack'); 1523``` 1524### GridRow<sup>12+</sup> 1525type GridRow = TypedFrameNode<GridRowInterface, GridRowAttribute> 1526 1527Represents a FrameNode of the GridRow type. 1528 1529**Atomic service API**: This API can be used in atomic services since API version 12. 1530 1531**System capability**: SystemCapability.ArkUI.ArkUI.Full 1532 1533| Type | Description | 1534| ----------------------------- | -------------------- | 1535| 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. | 1536 1537### createNode('GridRow')<sup>12+</sup> 1538createNode(context: UIContext, nodeType: 'GridRow'): GridRow 1539 1540Creates a FrameNode of the GridRow type. 1541 1542**Atomic service API**: This API can be used in atomic services since API version 12. 1543 1544**System capability**: SystemCapability.ArkUI.ArkUI.Full 1545 1546**Parameters** 1547 1548| Name | Type | Mandatory | Description | 1549| ------------------ | ------------------ | ------------------- | ------------------- | 1550| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1551| nodeType | 'GridRow' | Yes | Node type, which is GridRow in this API. | 1552 1553**Return value** 1554 1555| Type | Description | 1556| ------------------ | ------------------ | 1557| [GridRow](#gridrow12) | FrameNode node of the GridRow type. | 1558 1559**Example** 1560 1561```ts 1562typeNode.createNode(uiContext, 'GridRow'); 1563``` 1564### GridCol<sup>12+</sup> 1565type GridCol = TypedFrameNode<GridColInterface, GridColAttribute> 1566 1567Represents a FrameNode of the GridCol type. 1568 1569**Atomic service API**: This API can be used in atomic services since API version 12. 1570 1571**System capability**: SystemCapability.ArkUI.ArkUI.Full 1572 1573| Type | Description | 1574| ----------------------------- | -------------------- | 1575| 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. | 1576 1577### createNode('GridCol')<sup>12+</sup> 1578createNode(context: UIContext, nodeType: 'GridCol'): GridCol 1579 1580Creates a FrameNode of the GridCol type. 1581 1582**Atomic service API**: This API can be used in atomic services since API version 12. 1583 1584**System capability**: SystemCapability.ArkUI.ArkUI.Full 1585 1586**Parameters** 1587 1588| Name | Type | Mandatory | Description | 1589| ------------------ | ------------------ | ------------------- | ------------------- | 1590| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1591| nodeType | 'GridCol' | Yes | Node type, which is GridCol in this API. | 1592 1593**Return value** 1594 1595| Type | Description | 1596| ------------------ | ------------------ | 1597| [GridCol](#gridcol12) | FrameNode node of the GridCol type. | 1598 1599**Example** 1600 1601```ts 1602typeNode.createNode(uiContext, 'GridCol'); 1603``` 1604### Flex<sup>12+</sup> 1605type Flex = TypedFrameNode<FlexInterface, FlexAttribute> 1606 1607Represents a FrameNode of the Flex type. 1608 1609**Atomic service API**: This API can be used in atomic services since API version 12. 1610 1611**System capability**: SystemCapability.ArkUI.ArkUI.Full 1612 1613| Type | Description | 1614| ----------------------------- | -------------------- | 1615| 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. | 1616 1617### createNode('Flex')<sup>12+</sup> 1618createNode(context: UIContext, nodeType: 'Flex'): Flex 1619 1620Creates a FrameNode of the Flex type. 1621 1622**Atomic service API**: This API can be used in atomic services since API version 12. 1623 1624**System capability**: SystemCapability.ArkUI.ArkUI.Full 1625 1626**Parameters** 1627 1628| Name | Type | Mandatory | Description | 1629| ------------------ | ------------------ | ------------------- | ------------------- | 1630| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1631| nodeType | 'Flex' | Yes | Node type, which is Flex in this API. | 1632 1633**Return value** 1634 1635| Type | Description | 1636| ------------------ | ------------------ | 1637| [Flex](#flex12) | FrameNode node of the Flex type. | 1638 1639**Example** 1640 1641```ts 1642typeNode.createNode(uiContext, 'Flex'); 1643``` 1644### Swiper<sup>12+</sup> 1645type Swiper = TypedFrameNode<SwiperInterface, SwiperAttribute> 1646 1647Represents a FrameNode of the Swiper type. 1648 1649**Atomic service API**: This API can be used in atomic services since API version 12. 1650 1651**System capability**: SystemCapability.ArkUI.ArkUI.Full 1652 1653| Type | Description | 1654| ----------------------------- | -------------------- | 1655| 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. | 1656 1657### createNode('Swiper')<sup>12+</sup> 1658createNode(context: UIContext, nodeType: 'Swiper'): Swiper 1659 1660Creates a FrameNode of the Swiper type. 1661 1662**Atomic service API**: This API can be used in atomic services since API version 12. 1663 1664**System capability**: SystemCapability.ArkUI.ArkUI.Full 1665 1666**Parameters** 1667 1668| Name | Type | Mandatory | Description | 1669| ------------------ | ------------------ | ------------------- | ------------------- | 1670| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1671| nodeType | 'Swiper' | Yes | Node type, which is Swiper in this API. | 1672 1673**Return value** 1674 1675| Type | Description | 1676| ------------------ | ------------------ | 1677| [Swiper](#swiper12) | FrameNode node of the Swiper type. | 1678 1679**Example** 1680 1681```ts 1682typeNode.createNode(uiContext, 'Swiper'); 1683``` 1684### Progress<sup>12+</sup> 1685type Progress = TypedFrameNode<ProgressInterface, ProgressAttribute> 1686 1687Represents a FrameNode of the Progress type. 1688 1689**Atomic service API**: This API can be used in atomic services since API version 12. 1690 1691**System capability**: SystemCapability.ArkUI.ArkUI.Full 1692 1693| Type | Description | 1694| ----------------------------- | -------------------- | 1695| 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. | 1696 1697### createNode('Progress')<sup>12+</sup> 1698createNode(context: UIContext, nodeType: 'Progress'): Progress 1699 1700Creates a FrameNode of the Progress type. 1701 1702**Atomic service API**: This API can be used in atomic services since API version 12. 1703 1704**System capability**: SystemCapability.ArkUI.ArkUI.Full 1705 1706**Parameters** 1707 1708| Name | Type | Mandatory | Description | 1709| ------------------ | ------------------ | ------------------- | ------------------- | 1710| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1711| nodeType | 'Progress' | Yes | Node type, which is Progress in this API. | 1712 1713**Return value** 1714 1715| Type | Description | 1716| ------------------ | ------------------ | 1717| [Progress](#progress12) | FrameNode node of the Progress type. | 1718 1719**Example** 1720 1721```ts 1722typeNode.createNode(uiContext, 'Progress'); 1723``` 1724### Scroll<sup>12+</sup> 1725type Scroll = TypedFrameNode<ScrollInterface, ScrollAttribute> 1726 1727Represents a FrameNode of the Scroll type. 1728 1729**Atomic service API**: This API can be used in atomic services since API version 12. 1730 1731**System capability**: SystemCapability.ArkUI.ArkUI.Full 1732 1733| Type | Description | 1734| ----------------------------- | -------------------- | 1735| 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. | 1736 1737### createNode('Scroll')<sup>12+</sup> 1738createNode(context: UIContext, nodeType: 'Scroll'): Scroll 1739 1740Creates a FrameNode of the Scroll type. 1741 1742**Atomic service API**: This API can be used in atomic services since API version 12. 1743 1744**System capability**: SystemCapability.ArkUI.ArkUI.Full 1745 1746**Parameters** 1747 1748| Name | Type | Mandatory | Description | 1749| ------------------ | ------------------ | ------------------- | ------------------- | 1750| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1751| nodeType | 'Scroll' | Yes | Node type, which is Scroll in this API. | 1752 1753**Return value** 1754 1755| Type | Description | 1756| ------------------ | ------------------ | 1757| [Scroll](#scroll12) | FrameNode node of the Scroll type. | 1758 1759**Example** 1760 1761```ts 1762typeNode.createNode(uiContext, 'Scroll'); 1763``` 1764### RelativeContainer<sup>12+</sup> 1765type RelativeContainer = TypedFrameNode<RelativeContainerInterface, RelativeContainerAttribute> 1766 1767Represents a FrameNode of the RelativeContainer type. 1768 1769**Atomic service API**: This API can be used in atomic services since API version 12. 1770 1771**System capability**: SystemCapability.ArkUI.ArkUI.Full 1772 1773| Type | Description | 1774| ----------------------------- | -------------------- | 1775| 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. | 1776 1777### createNode('RelativeContainer')<sup>12+</sup> 1778createNode(context: UIContext, nodeType: 'RelativeContainer'): RelativeContainer 1779 1780Creates a FrameNode of the RelativeContainer type. 1781 1782**Atomic service API**: This API can be used in atomic services since API version 12. 1783 1784**System capability**: SystemCapability.ArkUI.ArkUI.Full 1785 1786**Parameters** 1787 1788| Name | Type | Mandatory | Description | 1789| ------------------ | ------------------ | ------------------- | ------------------- | 1790| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1791| nodeType | 'RelativeContainer' | Yes | Node type, which is RelativeContainer in this API. | 1792 1793**Return value** 1794 1795| Type | Description | 1796| ------------------ | ------------------ | 1797| [RelativeContainer](#relativecontainer12) | FrameNode node of the RelativeContainer type. | 1798 1799**Example** 1800 1801```ts 1802typeNode.createNode(uiContext, 'RelativeContainer'); 1803``` 1804### Divider<sup>12+</sup> 1805type Divider = TypedFrameNode<DividerInterface, DividerAttribute> 1806 1807Represents a FrameNode of the Divider type. 1808 1809**Atomic service API**: This API can be used in atomic services since API version 12. 1810 1811**System capability**: SystemCapability.ArkUI.ArkUI.Full 1812 1813| Type | Description | 1814| ----------------------------- | -------------------- | 1815| 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. | 1816 1817### createNode('Divider')<sup>12+</sup> 1818createNode(context: UIContext, nodeType: 'Divider'): Divider 1819 1820Creates a FrameNode of the Divider type. 1821 1822**Atomic service API**: This API can be used in atomic services since API version 12. 1823 1824**System capability**: SystemCapability.ArkUI.ArkUI.Full 1825 1826**Parameters** 1827 1828| Name | Type | Mandatory | Description | 1829| ------------------ | ------------------ | ------------------- | ------------------- | 1830| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1831| nodeType | 'Divider' | Yes | Node type, which is Divider in this API. | 1832 1833**Return value** 1834 1835| Type | Description | 1836| ------------------ | ------------------ | 1837| [Divider](#divider12) | FrameNode node of the Divider type. | 1838 1839**Example** 1840 1841```ts 1842typeNode.createNode(uiContext, 'Divider'); 1843``` 1844### LoadingProgress<sup>12+</sup> 1845type LoadingProgress = TypedFrameNode<LoadingProgressInterface, LoadingProgressAttribute> 1846 1847Represents a FrameNode of the LoadingProgress type. 1848 1849**Atomic service API**: This API can be used in atomic services since API version 12. 1850 1851**System capability**: SystemCapability.ArkUI.ArkUI.Full 1852 1853| Type | Description | 1854| ----------------------------- | -------------------- | 1855| 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. | 1856 1857### createNode('LoadingProgress')<sup>12+</sup> 1858createNode(context: UIContext, nodeType: 'LoadingProgress'): LoadingProgress 1859 1860Creates a FrameNode of the LoadingProgress type. 1861 1862**Atomic service API**: This API can be used in atomic services since API version 12. 1863 1864**System capability**: SystemCapability.ArkUI.ArkUI.Full 1865 1866**Parameters** 1867 1868| Name | Type | Mandatory | Description | 1869| ------------------ | ------------------ | ------------------- | ------------------- | 1870| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1871| nodeType | 'LoadingProgress' | Yes | Node type, which is LoadingProgress in this API. | 1872 1873**Return value** 1874 1875| Type | Description | 1876| ------------------ | ------------------ | 1877| [LoadingProgress](#loadingprogress12) | FrameNode node of the LoadingProgress type. | 1878 1879**Example** 1880 1881```ts 1882typeNode.createNode(uiContext, 'LoadingProgress'); 1883``` 1884### Search<sup>12+</sup> 1885type Search = TypedFrameNode<SearchInterface, SearchAttribute> 1886 1887Represents a FrameNode of the Search type. 1888 1889**Atomic service API**: This API can be used in atomic services since API version 12. 1890 1891**System capability**: SystemCapability.ArkUI.ArkUI.Full 1892 1893| Type | Description | 1894| ----------------------------- | -------------------- | 1895| 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. | 1896 1897### createNode('Search')<sup>12+</sup> 1898createNode(context: UIContext, nodeType: 'Search'): Search 1899 1900Creates a FrameNode of the Search type. 1901 1902**Atomic service API**: This API can be used in atomic services since API version 12. 1903 1904**System capability**: SystemCapability.ArkUI.ArkUI.Full 1905 1906**Parameters** 1907 1908| Name | Type | Mandatory | Description | 1909| ------------------ | ------------------ | ------------------- | ------------------- | 1910| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1911| nodeType | 'Search' | Yes | Node type, which is Search in this API. | 1912 1913**Return value** 1914 1915| Type | Description | 1916| ------------------ | ------------------ | 1917| [Search](#search12) | FrameNode node of the Search type. | 1918 1919**Example** 1920 1921```ts 1922typeNode.createNode(uiContext, 'Search'); 1923``` 1924### Blank<sup>12+</sup> 1925type Blank = TypedFrameNode<BlankInterface, BlankAttribute> 1926 1927Represents a FrameNode of the Blank type. 1928 1929**Atomic service API**: This API can be used in atomic services since API version 12. 1930 1931**System capability**: SystemCapability.ArkUI.ArkUI.Full 1932 1933| Type | Description | 1934| ----------------------------- | -------------------- | 1935| 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. | 1936 1937### createNode('Blank')<sup>12+</sup> 1938createNode(context: UIContext, nodeType: 'Blank'): Blank; 1939 1940Creates a FrameNode of the Blank type. 1941 1942**Atomic service API**: This API can be used in atomic services since API version 12. 1943 1944**System capability**: SystemCapability.ArkUI.ArkUI.Full 1945 1946**Parameters** 1947 1948| Name | Type | Mandatory | Description | 1949| ------------------ | ------------------ | ------------------- | ------------------- | 1950| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1951| nodeType | 'Blank' | Yes | Node type, which is Blank in this API. | 1952 1953**Return value** 1954 1955| Type | Description | 1956| ------------------ | ------------------ | 1957| [Blank](#blank12) | FrameNode node of the Blank type. | 1958 1959**Example** 1960 1961```ts 1962typeNode.createNode(uiContext, 'Blank'); 1963``` 1964### Image<sup>12+</sup> 1965type Image = TypedFrameNode<ImageInterface, ImageAttribute> 1966 1967Represents a FrameNode of the Image type. 1968 1969**Atomic service API**: This API can be used in atomic services since API version 12. 1970 1971**System capability**: SystemCapability.ArkUI.ArkUI.Full 1972 1973| Type | Description | 1974| ----------------------------- | -------------------- | 1975| 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. | 1976 1977### createNode('Image')<sup>12+</sup> 1978createNode(context: UIContext, nodeType: 'Image'): Image 1979 1980Creates a FrameNode of the Image type. 1981 1982**Atomic service API**: This API can be used in atomic services since API version 12. 1983 1984**System capability**: SystemCapability.ArkUI.ArkUI.Full 1985 1986**Parameters** 1987 1988| Name | Type | Mandatory | Description | 1989| ------------------ | ------------------ | ------------------- | ------------------- | 1990| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 1991| nodeType | 'Image' | Yes | Node type, which is Image in this API. | 1992 1993**Return value** 1994 1995| Type | Description | 1996| ------------------ | ------------------ | 1997| [Image](#image12) | FrameNode node of the Image type. | 1998 1999**Example** 2000 2001```ts 2002typeNode.createNode(uiContext, 'Image'); 2003``` 2004### List<sup>12+</sup> 2005type List = TypedFrameNode<ListInterface, ListAttribute> 2006 2007Represents a FrameNode of the List type. 2008 2009**Atomic service API**: This API can be used in atomic services since API version 12. 2010 2011**System capability**: SystemCapability.ArkUI.ArkUI.Full 2012 2013| Type | Description | 2014| ----------------------------- | -------------------- | 2015| 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. | 2016 2017### createNode('List')<sup>12+</sup> 2018createNode(context: UIContext, nodeType: 'List'): List 2019 2020Creates a FrameNode of the List type. 2021 2022**Atomic service API**: This API can be used in atomic services since API version 12. 2023 2024**System capability**: SystemCapability.ArkUI.ArkUI.Full 2025 2026**Parameters** 2027 2028| Name | Type | Mandatory | Description | 2029| ------------------ | ------------------ | ------------------- | ------------------- | 2030| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2031| nodeType | 'List' | Yes | Node type, which is List in this API. | 2032 2033**Return value** 2034 2035| Type | Description | 2036| ------------------ | ------------------ | 2037| [List](#list12) | FrameNode node of the List type. | 2038 2039**Example** 2040 2041```ts 2042typeNode.createNode(uiContext, 'List'); 2043``` 2044### ListItem<sup>12+</sup> 2045type ListItem = TypedFrameNode<ListItemInterface, ListItemAttribute> 2046 2047Represents a FrameNode of the ListItem type. 2048 2049**Atomic service API**: This API can be used in atomic services since API version 12. 2050 2051**System capability**: SystemCapability.ArkUI.ArkUI.Full 2052 2053| Type | Description | 2054| ----------------------------- | -------------------- | 2055| 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. | 2056 2057### createNode('ListItem')<sup>12+</sup> 2058createNode(context: UIContext, nodeType: 'ListItem'): ListItem 2059 2060Creates a FrameNode of the ListItem type. 2061 2062**Atomic service API**: This API can be used in atomic services since API version 12. 2063 2064**System capability**: SystemCapability.ArkUI.ArkUI.Full 2065 2066**Parameters** 2067 2068| Name | Type | Mandatory | Description | 2069| ------------------ | ------------------ | ------------------- | ------------------- | 2070| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2071| nodeType | 'ListItem' | Yes | Node type, which is ListItem in this API. | 2072 2073**Return value** 2074 2075| Type | Description | 2076| ------------------ | ------------------ | 2077| [ListItem](#listitem12) | FrameNode node of the ListItem type. | 2078 2079**Example** 2080 2081```ts 2082typeNode.createNode(uiContext, 'ListItem'); 2083``` 2084 2085### TextInput<sup>12+</sup> 2086type TextInput = TypedFrameNode<TextInputInterface, TextInputAttribute> 2087 2088Represents a FrameNode of the TextInput type. 2089 2090**Atomic service API**: This API can be used in atomic services since API version 12. 2091 2092**System capability**: SystemCapability.ArkUI.ArkUI.Full 2093 2094| Type | Description | 2095| ----------------------------- | -------------------- | 2096| 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. | 2097 2098### createNode('TextInput')<sup>12+</sup> 2099createNode(context: UIContext, nodeType: 'TextInput'): TextInput 2100 2101Creates a FrameNode of the TextInput type. 2102 2103**Atomic service API**: This API can be used in atomic services since API version 12. 2104 2105**System capability**: SystemCapability.ArkUI.ArkUI.Full 2106 2107**Parameters** 2108 2109| Name | Type | Mandatory | Description | 2110| ------------------ | ------------------ | ------------------- | ------------------- | 2111| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2112| nodeType | 'TextInput' | Yes | Node type, which is TextInput in this API. | 2113 2114**Return value** 2115 2116| Type | Description | 2117| ------------------ | ------------------ | 2118| [TextInput](#textinput12) | FrameNode node of the TextInput type. | 2119 2120**Example** 2121 2122```ts 2123typeNode.createNode(uiContext, 'TextInput'); 2124``` 2125 2126### Button<sup>12+</sup> 2127type Button = TypedFrameNode<ButtonInterface, ButtonAttribute> 2128 2129Represents a FrameNode of the Button 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| Type | Description | 2136| ----------------------------- | -------------------- | 2137| 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. | 2138 2139### createNode('Button')<sup>12+</sup> 2140createNode(context: UIContext, nodeType: 'Button'): Button 2141 2142Creates a FrameNode of the Button type. 2143 2144**Atomic service API**: This API can be used in atomic services since API version 12. 2145 2146**System capability**: SystemCapability.ArkUI.ArkUI.Full 2147 2148**Parameters** 2149 2150| Name | Type | Mandatory | Description | 2151| ------------------ | ------------------ | ------------------- | ------------------- | 2152| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2153| nodeType | 'Button' | Yes | Node type, which is Button in this API. | 2154 2155**Return value** 2156 2157| Type | Description | 2158| ------------------ | ------------------ | 2159| [Button](#button12) | FrameNode node of the Button type. | 2160 2161**Example** 2162 2163```ts 2164typeNode.createNode(uiContext, 'Button'); 2165``` 2166 2167### ListItemGroup<sup>12+</sup> 2168type ListItemGroup = TypedFrameNode<ListItemGroupInterface, ListItemGroupAttribute> 2169 2170Represents a FrameNode of the ListItemGroup type. 2171 2172**Atomic service API**: This API can be used in atomic services since API version 12. 2173 2174**System capability**: SystemCapability.ArkUI.ArkUI.Full 2175 2176| Type | Description | 2177| ----------------------------- | -------------------- | 2178| 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. | 2179 2180### createNode('ListItemGroup')<sup>12+</sup> 2181createNode(context: UIContext, nodeType: 'ListItemGroup'): ListItemGroup 2182 2183Creates a FrameNode of the ListItemGroup type. 2184 2185**Atomic service API**: This API can be used in atomic services since API version 12. 2186 2187**System capability**: SystemCapability.ArkUI.ArkUI.Full 2188 2189**Parameters** 2190 2191| Name | Type | Mandatory | Description | 2192| ------------------ | ------------------ | ------------------- | ------------------- | 2193| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2194| nodeType | 'ListItemGroup' | Yes | Node type, which is ListItemGroup in this API. | 2195 2196**Return value** 2197 2198| Type | Description | 2199| ------------------ | ------------------ | 2200| [ListItemGroup](#listitemgroup12) | FrameNode node of the ListItemGroup type. | 2201 2202**Example** 2203 2204```ts 2205typeNode.createNode(uiContext, 'ListItemGroup'); 2206``` 2207 2208### WaterFlow<sup>12+</sup> 2209type WaterFlow = TypedFrameNode<WaterFlowInterface, WaterFlowAttribute> 2210 2211Represents a FrameNode of the WaterFlow type. 2212 2213**Atomic service API**: This API can be used in atomic services since API version 12. 2214 2215**System capability**: SystemCapability.ArkUI.ArkUI.Full 2216 2217| Type | Description | 2218| ----------------------------- | -------------------- | 2219| 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. | 2220 2221### createNode('WaterFlow')<sup>12+</sup> 2222createNode(context: UIContext, nodeType: 'WaterFlow'): WaterFlow 2223 2224Creates a FrameNode of the WaterFlow type. 2225 2226**Atomic service API**: This API can be used in atomic services since API version 12. 2227 2228**System capability**: SystemCapability.ArkUI.ArkUI.Full 2229 2230**Parameters** 2231 2232| Name | Type | Mandatory | Description | 2233| ------------------ | ------------------ | ------------------- | ------------------- | 2234| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2235| nodeType | 'WaterFlow' | Yes | Node type, which is WaterFlow in this API. | 2236 2237**Return value** 2238 2239| Type | Description | 2240| ------------------ | ------------------ | 2241| [WaterFlow](#waterflow12) | FrameNode node of the WaterFlow type. | 2242 2243**Example** 2244 2245```ts 2246typeNode.createNode(uiContext, 'WaterFlow'); 2247``` 2248 2249### FlowItem<sup>12+</sup> 2250type FlowItem = TypedFrameNode<FlowItemInterface, FlowItemAttribute> 2251 2252Represents a FrameNode of the FlowItem type. 2253 2254**Atomic service API**: This API can be used in atomic services since API version 12. 2255 2256**System capability**: SystemCapability.ArkUI.ArkUI.Full 2257 2258| Type | Description | 2259| ----------------------------- | -------------------- | 2260| 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. | 2261 2262### createNode('FlowItem')<sup>12+</sup> 2263createNode(context: UIContext, nodeType: 'FlowItem'): FlowItem 2264 2265Creates a FrameNode of the FlowItem type. 2266 2267**Atomic service API**: This API can be used in atomic services since API version 12. 2268 2269**System capability**: SystemCapability.ArkUI.ArkUI.Full 2270 2271**Parameters** 2272 2273| Name | Type | Mandatory | Description | 2274| ------------------ | ------------------ | ------------------- | ------------------- | 2275| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2276| nodeType | 'FlowItem' | Yes | Node type, which is FlowItem in this API. | 2277 2278**Return value** 2279 2280| Type | Description | 2281| ------------------ | ------------------ | 2282| [FlowItem](#flowitem12) | FrameNode node of the FlowItem type. | 2283 2284**Example** 2285 2286```ts 2287typeNode.createNode(uiContext, 'FlowItem'); 2288``` 2289 2290### XComponent<sup>12+</sup> 2291type XComponent = TypedFrameNode<XComponentInterface, XComponentAttribute> 2292 2293Represents a FrameNode of the XComponent type. 2294 2295**Atomic service API**: This API can be used in atomic services since API version 12. 2296 2297**System capability**: SystemCapability.ArkUI.ArkUI.Full 2298 2299| Type | Description | 2300| ----------------------------- | -------------------- | 2301| 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. | 2302 2303### createNode('XComponent')<sup>12+</sup> 2304createNode(context: UIContext, nodeType: 'XComponent'): XComponent 2305 2306Creates a FrameNode of the XComponent type. 2307 2308**Atomic service API**: This API can be used in atomic services since API version 12. 2309 2310**System capability**: SystemCapability.ArkUI.ArkUI.Full 2311 2312**Parameters** 2313 2314| Name | Type | Mandatory | Description | 2315| ------------------ | ------------------ | ------------------- | ------------------- | 2316| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context required for creating a node. | 2317| nodeType | 'XComponent' | Yes | Node type, which is XComponent in this API. | 2318 2319**Return value** 2320 2321| Type | Description | 2322| ------------------ | ------------------ | 2323| [XComponent](#xcomponent12) | FrameNode node of the XComponent type. | 2324 2325**Example** 2326 2327```ts 2328typeNode.createNode(uiContext, 'XComponent'); 2329``` 2330 2331## NodeAdapter<sup>12+</sup> 2332 2333Provides the lazy loading capability for the FrameNodes. 2334 2335> **NOTE** 2336> 2337> The input parameter cannot be a negative number; otherwise, no processing is performed. 2338 2339**Example** 2340 2341For details, see [NodeAdapter Usage Example](#nodeadapter-usage-example). 2342 2343### constructor<sup>12+</sup> 2344 2345constructor() 2346 2347A constructor used to create a **NodeAdapter** object. 2348 2349**Atomic service API**: This API can be used in atomic services since API version 12. 2350 2351**System capability**: SystemCapability.ArkUI.ArkUI.Full 2352 2353### dispose<sup>12+</sup> 2354 2355dispose(): void 2356 2357Disposes of this **NodeAdapter** object. Bindings, if any, of the object will be cleared before the object is disposed of. 2358 2359**Atomic service API**: This API can be used in atomic services since API version 12. 2360 2361**System capability**: SystemCapability.ArkUI.ArkUI.Full 2362 2363### totalNodeCount<sup>12+</sup> 2364 2365set totalNodeCount(count: number) 2366 2367Sets the total number of items in this node. 2368 2369**Atomic service API**: This API can be used in atomic services since API version 12. 2370 2371**System capability**: SystemCapability.ArkUI.ArkUI.Full 2372 2373**Parameters** 2374 2375| Name | Type | Mandatory | Description | 2376| ------- | ------------------------------------------------------ | ---- | ---------------- | 2377| count | number | Yes | Total number of items. | 2378 2379get totalNodeCount(): number 2380 2381Obtains the total number of items in this node. 2382 2383**Atomic service API**: This API can be used in atomic services since API version 12. 2384 2385**System capability**: SystemCapability.ArkUI.ArkUI.Full 2386 2387**Return value** 2388 2389| Type | Description | 2390| ----------------- | ------------ | 2391| number | Total number of items. | 2392 2393### reloadAllItems<sup>12+</sup> 2394 2395reloadAllItems(): void 2396 2397Reloads all items in this node. 2398 2399**Atomic service API**: This API can be used in atomic services since API version 12. 2400 2401**System capability**: SystemCapability.ArkUI.ArkUI.Full 2402 2403### reloadItem<sup>12+</sup> 2404 2405reloadItem(start: number, count: number): void 2406 2407Reloads a specified number of items starting from a specific index. 2408 2409**Atomic service API**: This API can be used in atomic services since API version 12. 2410 2411**System capability**: SystemCapability.ArkUI.ArkUI.Full 2412 2413**Parameters** 2414 2415| Name | Type | Mandatory | Description | 2416| ------- | ------------------------------------------------------ | ---- | ---------------- | 2417| start | number | Yes | Starting index of the items to reload. | 2418| count | number | Yes | Number of the items to reload. | 2419 2420### removeItem<sup>12+</sup> 2421 2422removeItem(start: number, count: number): void 2423 2424Removes a specified number of items starting from a specific index. 2425 2426**Atomic service API**: This API can be used in atomic services since API version 12. 2427 2428**System capability**: SystemCapability.ArkUI.ArkUI.Full 2429 2430**Parameters** 2431 2432| Name | Type | Mandatory | Description | 2433| ------- | ------------------------------------------------------ | ---- | ---------------- | 2434| start | number | Yes | Starting index of the items to remove. | 2435| count | number | Yes | Number of the items to remove. | 2436 2437### insertItem<sup>12+</sup> 2438 2439insertItem(start: number, count: number): void 2440 2441Inserts a specified number of items starting from a specific index. 2442 2443**Atomic service API**: This API can be used in atomic services since API version 12. 2444 2445**System capability**: SystemCapability.ArkUI.ArkUI.Full 2446 2447**Parameters** 2448 2449| Name | Type | Mandatory | Description | 2450| ------- | ------------------------------------------------------ | ---- | ---------------- | 2451| start | number | Yes | Starting index of the items to insert. | 2452| count | number | Yes | Number of the items to insert. | 2453 2454### moveItem<sup>12+</sup> 2455 2456moveItem(from: number, to: number): void 2457 2458Moves items from the starting index to the ending index. 2459 2460**Atomic service API**: This API can be used in atomic services since API version 12. 2461 2462**System capability**: SystemCapability.ArkUI.ArkUI.Full 2463 2464**Parameters** 2465 2466| Name | Type | Mandatory | Description | 2467| ------- | ------------------------------------------------------ | ---- | ---------------- | 2468| from | number | Yes | Index at which the movement starts. | 2469| to | number | Yes | Index at which the movement ends. | 2470 2471### getAllAvailableItems<sup>12+</sup> 2472 2473getAllAvailableItems(): Array<FrameNode> 2474 2475Obtains all available items. 2476 2477**Atomic service API**: This API can be used in atomic services since API version 12. 2478 2479**System capability**: SystemCapability.ArkUI.ArkUI.Full 2480 2481**Return value** 2482 2483| Type | Description | 2484| ----------------- | ------------ | 2485| Array<FrameNode> | Array of items in the FrameNode. | 2486 2487### onAttachToNode<sup>12+</sup> 2488 2489onAttachToNode?(target: FrameNode): void 2490 2491Called when a FrameNode is attached to the NodeAdapter. 2492 2493**Atomic service API**: This API can be used in atomic services since API version 12. 2494 2495**System capability**: SystemCapability.ArkUI.ArkUI.Full 2496 2497**Parameters** 2498 2499| Name | Type | Mandatory | Description | 2500| ------- | ------------------------------------------------------ | ---- | ---------------- | 2501| target | FrameNode | Yes | FrameNode attached to the NodeAdapter. | 2502 2503### onDetachFromNode<sup>12+</sup> 2504 2505onDetachFromNode?(): void 2506 2507Called when detachment occurs. 2508 2509**Atomic service API**: This API can be used in atomic services since API version 12. 2510 2511**System capability**: SystemCapability.ArkUI.ArkUI.Full 2512 2513### onGetChildId<sup>12+</sup> 2514 2515onGetChildId?(index: number): number 2516 2517Called 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. 2518 2519**Atomic service API**: This API can be used in atomic services since API version 12. 2520 2521**System capability**: SystemCapability.ArkUI.ArkUI.Full 2522 2523**Parameters** 2524 2525| Name | Type | Mandatory | Description | 2526| ------- | ------------------------------------------------------ | ---- | ---------------- | 2527| index | number | Yes | Index of the loaded node. | 2528 2529**Return value** 2530 2531| Type | Description | 2532| ----------------- | ------------ | 2533| number | ID customized by you. Make sure the ID is unique. | 2534 2535### onCreateChild<sup>12+</sup> 2536 2537onCreateChild?(index: number): FrameNode 2538 2539Called when this node is loaded for the first time or a new child node is detected. 2540 2541**Atomic service API**: This API can be used in atomic services since API version 12. 2542 2543**System capability**: SystemCapability.ArkUI.ArkUI.Full 2544 2545**Parameters** 2546 2547| Name | Type | Mandatory | Description | 2548| ------- | ------------------------------------------------------ | ---- | ---------------- | 2549| index | number | Yes | Index of the loaded node. | 2550 2551**Return value** 2552 2553| Type | Description | 2554| ----------------- | ------------ | 2555| FrameNode | FrameNode created by you. | 2556 2557### onDisposeChild<sup>12+</sup> 2558 2559onDisposeChild?(id: number, node: FrameNode): void 2560 2561Called when a child node is about to be disposed of. 2562 2563**Atomic service API**: This API can be used in atomic services since API version 12. 2564 2565**System capability**: SystemCapability.ArkUI.ArkUI.Full 2566 2567**Parameters** 2568 2569| Name | Type | Mandatory | Description | 2570| ------- | ------------------------------------------------------ | ---- | ---------------- | 2571| id | number | Yes | ID of the child node to be disposed of. | 2572| node | FrameNode | Yes | FrameNode to be disposed of. | 2573 2574### onUpdateChild<sup>12+</sup> 2575 2576onUpdateChild?(id: number, node: FrameNode): void 2577 2578Called when a loaded node is reused. 2579 2580**Atomic service API**: This API can be used in atomic services since API version 12. 2581 2582**System capability**: SystemCapability.ArkUI.ArkUI.Full 2583 2584**Parameters** 2585 2586| Name | Type | Mandatory | Description | 2587| ------- | ------------------------------------------------------ | ---- | ---------------- | 2588| id | number | Yes | ID of the node that is reused. | 2589| node | FrameNode | Yes | FrameNode that is reused. | 2590 2591### attachNodeAdapter<sup>12+</sup> 2592 2593static attachNodeAdapter(adapter: NodeAdapter, node: FrameNode): boolean 2594 2595Attaches 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**. 2596 2597**Atomic service API**: This API can be used in atomic services since API version 12. 2598 2599**System capability**: SystemCapability.ArkUI.ArkUI.Full 2600 2601**Parameters** 2602 2603| Name | Type | Mandatory | Description | 2604| ------- | ------------------------------------------------------ | ---- | ---------------- | 2605| adapter | [NodeAdapter](#nodeadapter12) | Yes | NodeAdapter class for lazy loading. | 2606| node | FrameNode | Yes | FrameNode to be attached to the NodeAdapter. | 2607 2608**Return value** 2609 2610| Type | Description | 2611| ----------------- | ------------ | 2612| boolean | Attachment result. Returns **true** if the attachment is successful; returns **false** otherwise. | 2613 2614### detachNodeAdapter<sup>12+</sup> 2615 2616static detachNodeAdapter(node: FrameNode): void 2617 2618Detaches a FrameNode from a NodeAdapter. 2619 2620**Atomic service API**: This API can be used in atomic services since API version 12. 2621 2622**System capability**: SystemCapability.ArkUI.ArkUI.Full 2623 2624**Parameters** 2625 2626| Name | Type | Mandatory | Description | 2627| ------- | ------------------------------------------------------ | ---- | ---------------- | 2628| node | FrameNode | Yes | FrameNode to detach. | 2629 2630## Example of Customizing a Node of a Specific Type 2631 2632The following example shows how to create a node of the Text type. 2633 2634```ts 2635import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 2636 2637class MyNodeController extends NodeController { 2638 makeNode(uiContext: UIContext): FrameNode | null { 2639 let node = new FrameNode(uiContext); 2640 node.commonAttribute.width(100) 2641 .height(50) 2642 .borderColor(Color.Gray) 2643 .borderWidth(1) 2644 .margin({ left: 10 }); 2645 let col = typeNode.createNode(uiContext, 'Column'); 2646 col.initialize({ space: 5 }) 2647 .width('100%').height('100%').margin({ top: 5 }); 2648 node.appendChild(col); 2649 let text = typeNode.createNode(uiContext, 'Text'); 2650 text.initialize("Hello").fontColor(Color.Blue).fontSize(14); 2651 col.appendChild(text); 2652 return node; 2653 } 2654} 2655 2656@Entry 2657@Component 2658struct FrameNodeTypeTest { 2659 private myNodeController: MyNodeController = new MyNodeController(); 2660 2661 build() { 2662 Row() { 2663 NodeContainer(this.myNodeController); 2664 } 2665 } 2666} 2667``` 2668 2669 2670 2671## Example of Node Operations 2672```ts 2673import { NodeController, FrameNode, UIContext } from '@kit.ArkUI'; 2674import { BusinessError } from '@kit.BasicServicesKit'; 2675 2676const TEST_TAG : string = "FrameNode" 2677class MyNodeController extends NodeController { 2678 public frameNode: FrameNode | null = null; 2679 public childList:Array<FrameNode> = new Array<FrameNode>(); 2680 private rootNode: FrameNode | null = null; 2681 private uiContext: UIContext | null = null; 2682 private childrenCount: number = 0; 2683 makeNode(uiContext: UIContext): FrameNode | null { 2684 this.rootNode = new FrameNode(uiContext); 2685 this.childrenCount = this.childrenCount + 1; 2686 this.uiContext = uiContext; 2687 this.frameNode = new FrameNode(uiContext); 2688 this.rootNode.appendChild(this.frameNode); 2689 for (let i = 0; i < 10; i++) { 2690 let childNode = new FrameNode(uiContext); 2691 this.childList.push(childNode); 2692 this.frameNode.appendChild(childNode); 2693 } 2694 return this.rootNode; 2695 } 2696 appendChild() 2697 { 2698 let childNode = new FrameNode(this.uiContext!); 2699 this.rootNode!.appendChild(childNode); 2700 this.childrenCount = this.childrenCount + 1; 2701 } 2702 insertChildAfter(index : number) 2703 { 2704 let insertNode = new FrameNode(this.uiContext!); 2705 let childNode = this.rootNode!.getChild(index); 2706 this.rootNode!.insertChildAfter(insertNode,childNode); 2707 this.childrenCount = this.childrenCount + 1; 2708 } 2709 removeChild(index : number) 2710 { 2711 let childNode = this.rootNode!.getChild(index); 2712 if(childNode == null) 2713 { 2714 console.log(`${TEST_TAG} getchild at index {${index}} : fail`); 2715 return; 2716 } 2717 this.rootNode!.removeChild(childNode); 2718 this.childrenCount = this.childrenCount - 1; 2719 } 2720 getChildNumber() 2721 { 2722 console.log(TEST_TAG + " getChildNumber " + this.rootNode!.getChildrenCount()) 2723 console.log(TEST_TAG + " children count is " + this.childrenCount); 2724 2725 } 2726 clearChildren() 2727 { 2728 this.rootNode!.clearChildren(); 2729 } 2730 searchFrameNode() 2731 { 2732 if(this.rootNode!.getFirstChild() === null) 2733 { 2734 console.log(TEST_TAG + " the rootNode does not have child node.") 2735 } 2736 if(this.rootNode!.getFirstChild() === this.frameNode) { 2737 console.log(TEST_TAG + " getFirstChild result: success. The first child of the rootNode is equals to frameNode."); 2738 } else { 2739 console.log(TEST_TAG + " getFirstChild result: fail. The first child of the rootNode is not equals to frameNode."); 2740 } 2741 if(this.frameNode!.getChild(5) === this.frameNode!.getChild(4)!.getNextSibling()) { 2742 console.log(TEST_TAG + " getNextSibling result: success."); 2743 } else { 2744 console.log(TEST_TAG + " getNextSibling result: fail."); 2745 } 2746 if(this.frameNode!.getChild(3) === this.frameNode!.getChild(4)!.getPreviousSibling()) { 2747 console.log(TEST_TAG + " getPreviousSibling result: success."); 2748 } else { 2749 console.log(TEST_TAG + " getPreviousSibling result: fail."); 2750 } 2751 if(this.rootNode!.getFirstChild() !== null && this.rootNode!.getFirstChild()!.getParent() === this.rootNode) { 2752 console.log(TEST_TAG + " getParent result: success."); 2753 } else { 2754 console.log(TEST_TAG + " getParent result: fail."); 2755 } 2756 if(this.rootNode!.getParent() !== undefined || this.rootNode!.getParent() !== null) 2757 { 2758 console.log(TEST_TAG + " get ArkTsNode success.") 2759 console.log(TEST_TAG + " check rootNode whether is modifiable " + this.rootNode!.isModifiable()) 2760 console.log(TEST_TAG + " check getParent whether is modifiable " + this.rootNode!.getParent()!.isModifiable()) 2761 } else { 2762 console.log(TEST_TAG + " get ArkTsNode fail."); 2763 } 2764 } 2765 getPositionToWindow() 2766 { 2767 let positionToWindow = this.rootNode?.getPositionToWindow(); 2768 console.log(TEST_TAG + JSON.stringify(positionToWindow)); 2769 } 2770 getPositionToParent() 2771 { 2772 let positionToParent = this.rootNode?.getPositionToParent(); 2773 console.log(TEST_TAG + JSON.stringify(positionToParent)); 2774 } 2775 getPositionToScreen() 2776 { 2777 let positionToScreen = this.rootNode?.getPositionToScreen(); 2778 console.log(TEST_TAG + JSON.stringify(positionToScreen)); 2779 } 2780 getPositionToWindowWithTransform() 2781 { 2782 let positionToWindowWithTransform = this.rootNode?.getPositionToWindowWithTransform(); 2783 console.log(TEST_TAG + JSON.stringify(positionToWindowWithTransform)); 2784 } 2785 getPositionToParentWithTransform() 2786 { 2787 let positionToParentWithTransform = this.rootNode?.getPositionToParentWithTransform(); 2788 console.log(TEST_TAG + JSON.stringify(positionToParentWithTransform)); 2789 } 2790 getPositionToScreenWithTransform() 2791 { 2792 let positionToScreenWithTransform = this.rootNode?.getPositionToScreenWithTransform(); 2793 console.log(TEST_TAG + JSON.stringify(positionToScreenWithTransform)); 2794 } 2795 getMeasuredSize() 2796 { 2797 let measuredSize = this.frameNode?.getMeasuredSize(); 2798 console.log(TEST_TAG + JSON.stringify(measuredSize)); 2799 } 2800 getLayoutPosition() 2801 { 2802 let layoutPosition = this.frameNode?.getLayoutPosition(); 2803 console.log(TEST_TAG + JSON.stringify(layoutPosition)); 2804 } 2805 getUserConfigBorderWidth() 2806 { 2807 let userConfigBorderWidth = this.frameNode?.getUserConfigBorderWidth(); 2808 console.log(TEST_TAG + JSON.stringify(userConfigBorderWidth)); 2809 } 2810 getUserConfigPadding() 2811 { 2812 let userConfigPadding = this.frameNode?.getUserConfigPadding(); 2813 console.log(TEST_TAG + JSON.stringify(userConfigPadding)); 2814 } 2815 getUserConfigMargin() 2816 { 2817 let userConfigMargin = this.frameNode?.getUserConfigMargin(); 2818 console.log(TEST_TAG + JSON.stringify(userConfigMargin)); 2819 } 2820 getUserConfigSize() 2821 { 2822 let userConfigSize = this.frameNode?.getUserConfigSize(); 2823 console.log(TEST_TAG + JSON.stringify(userConfigSize)); 2824 } 2825 getId() 2826 { 2827 let id = this.frameNode?.getId(); 2828 console.log(TEST_TAG + id); 2829 } 2830 getUniqueId() 2831 { 2832 let uniqueId = this.frameNode?.getUniqueId(); 2833 console.log(TEST_TAG + uniqueId); 2834 } 2835 getNodeType() 2836 { 2837 let nodeType = this.frameNode?.getNodeType(); 2838 console.log(TEST_TAG + nodeType); 2839 } 2840 getOpacity() 2841 { 2842 let opacity = this.frameNode?.getOpacity(); 2843 console.log(TEST_TAG + JSON.stringify(opacity)); 2844 } 2845 isVisible() 2846 { 2847 let visible = this.frameNode?.isVisible(); 2848 console.log(TEST_TAG + JSON.stringify(visible)); 2849 } 2850 isClipToFrame() 2851 { 2852 let clipToFrame = this.frameNode?.isClipToFrame(); 2853 console.log(TEST_TAG + JSON.stringify(clipToFrame)); 2854 } 2855 isAttached() 2856 { 2857 let attached = this.frameNode?.isAttached(); 2858 console.log(TEST_TAG + JSON.stringify(attached)); 2859 } 2860 getInspectorInfo() 2861 { 2862 let inspectorInfo = this.frameNode?.getInspectorInfo(); 2863 console.log(TEST_TAG + JSON.stringify(inspectorInfo)); 2864 } 2865 2866 throwError() 2867 { 2868 try{ 2869 this.rootNode!.getParent()!.clearChildren(); 2870 } catch (err) { 2871 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " +(err as BusinessError).message); 2872 } 2873 try{ 2874 this.rootNode!.getParent()!.appendChild(new FrameNode(this.uiContext)); 2875 } catch (err) { 2876 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " +(err as BusinessError).message); 2877 } 2878 try{ 2879 this.rootNode!.getParent()!.removeChild(this.rootNode!.getParent()!.getChild(0)); 2880 } catch (err) { 2881 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " +(err as BusinessError).message); 2882 } 2883 } 2884} 2885 2886@Entry 2887@Component 2888struct Index { 2889 private myNodeController: MyNodeController = new MyNodeController(); 2890 @State index : number = 0; 2891 build() { 2892 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 2893 Column(){ 2894 Row() 2895 { 2896 Button("ADD") 2897 .onClick(()=>{this.index++;}) 2898 Button("DEC") 2899 .onClick(()=>{this.index--;}) 2900 } 2901 Text("Current index is " + this.index) 2902 .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) 2903 .width('100%').fontSize(16) 2904 } 2905 Button("appendChild") 2906 .width(300) 2907 .onClick(()=>{ 2908 this.myNodeController.appendChild(); 2909 }) 2910 Button("insertChildAfter") 2911 .width(300) 2912 .onClick(()=>{ 2913 this.myNodeController.insertChildAfter(this.index); 2914 }) 2915 Button("removeChild") 2916 .width(300) 2917 .onClick(()=>{ 2918 this.myNodeController.removeChild(this.index); 2919 }) 2920 Button("clearChildren") 2921 .width(300) 2922 .onClick(()=>{ 2923 this.myNodeController.clearChildren(); 2924 }) 2925 Button("getChildNumber") 2926 .width(300) 2927 .onClick(()=>{ 2928 this.myNodeController.getChildNumber(); 2929 }) 2930 Button("searchFrameNode") 2931 .width(300) 2932 .onClick(()=>{ 2933 this.myNodeController.searchFrameNode(); 2934 }) 2935 Button("getPositionToWindow") 2936 .width(300) 2937 .onClick(()=>{ 2938 this.myNodeController.getPositionToWindow(); 2939 }) 2940 Button("getPositionToParent") 2941 .width(300) 2942 .onClick(()=>{ 2943 this.myNodeController.getPositionToParent(); 2944 }) 2945 Button("getPositionToScreen") 2946 .width(300) 2947 .onClick(()=>{ 2948 this.myNodeController.getPositionToScreen(); 2949 }) 2950 Button("getPositionToParentWithTransform") 2951 .width(300) 2952 .onClick(()=>{ 2953 this.myNodeController.getPositionToParentWithTransform(); 2954 }) 2955 Button("getPositionToWindowWithTransform") 2956 .width(300) 2957 .onClick(()=>{ 2958 this.myNodeController.getPositionToWindowWithTransform(); 2959 }) 2960 Button("getPositionToScreenWithTransform") 2961 .width(300) 2962 .onClick(()=>{ 2963 this.myNodeController.getPositionToScreenWithTransform(); 2964 }) 2965 Button("getMeasuredSize") 2966 .width(300) 2967 .onClick(()=>{ 2968 this.myNodeController.getMeasuredSize(); 2969 }) 2970 Button("getLayoutPosition") 2971 .width(300) 2972 .onClick(()=>{ 2973 this.myNodeController.getLayoutPosition(); 2974 }) 2975 Button("getUserConfigBorderWidth") 2976 .width(300) 2977 .onClick(()=>{ 2978 this.myNodeController.getUserConfigBorderWidth(); 2979 }) 2980 Button("getUserConfigPadding") 2981 .width(300) 2982 .onClick(()=>{ 2983 this.myNodeController.getUserConfigPadding(); 2984 }) 2985 Button("getUserConfigMargin") 2986 .width(300) 2987 .onClick(()=>{ 2988 this.myNodeController.getUserConfigMargin(); 2989 }) 2990 Button("getUserConfigSize") 2991 .width(300) 2992 .onClick(()=>{ 2993 this.myNodeController.getUserConfigSize(); 2994 }) 2995 Button("getId") 2996 .width(300) 2997 .onClick(()=>{ 2998 this.myNodeController.getId(); 2999 }) 3000 Button("getUniqueId") 3001 .width(300) 3002 .onClick(()=>{ 3003 this.myNodeController.getUniqueId(); 3004 }) 3005 Button("getNodeType") 3006 .width(300) 3007 .onClick(()=>{ 3008 this.myNodeController.getNodeType(); 3009 }) 3010 Button("getOpacity") 3011 .width(300) 3012 .onClick(()=>{ 3013 this.myNodeController.getOpacity(); 3014 }) 3015 Button("isVisible") 3016 .width(300) 3017 .onClick(()=>{ 3018 this.myNodeController.isVisible(); 3019 }) 3020 Button("isClipToFrame") 3021 .width(300) 3022 .onClick(()=>{ 3023 this.myNodeController.isClipToFrame(); 3024 }) 3025 Button("isAttached") 3026 .width(300) 3027 .onClick(()=>{ 3028 this.myNodeController.isAttached(); 3029 }) 3030 Button("getInspectorInfo") 3031 .width(300) 3032 .onClick(()=>{ 3033 this.myNodeController.getInspectorInfo(); 3034 }) 3035 Button("getCustomProperty") 3036 .width(300) 3037 .onClick(()=>{ 3038 const uiContext: UIContext = this.getUIContext(); 3039 if (uiContext) { 3040 const node: FrameNode | null = uiContext.getFrameNodeById("Test_Button") || null; 3041 if (node) { 3042 for (let i = 1; i < 4; i++) { 3043 const key = 'customProperty' + i; 3044 const property = node.getCustomProperty(key); 3045 console.log(TEST_TAG + key, JSON.stringify(property)); 3046 } 3047 } 3048 } 3049 }) 3050 .id('Test_Button') 3051 .customProperty('customProperty1', { 3052 'number': 10, 3053 'string': 'this is a string', 3054 'bool': true, 3055 'object': { 3056 'name': 'name', 3057 'value': 100 3058 } 3059 }) 3060 .customProperty('customProperty2', {}) 3061 .customProperty('customProperty2', undefined) 3062 Button("throwError") 3063 .width(300) 3064 .onClick(()=>{ 3065 this.myNodeController.throwError(); 3066 }) 3067 Column(){ 3068 Text("This is a NodeContainer.") 3069 .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) 3070 .width('100%').fontSize(16) 3071 NodeContainer(this.myNodeController) 3072 .borderWidth(1) 3073 .width(300) 3074 .height(100) 3075 } 3076 } 3077 .padding({ left: 35, right: 35, top: 35, bottom: 35 }) 3078 .width("100%") 3079 .height("100%") 3080 } 3081} 3082``` 3083## Basic Event Example 3084```ts 3085import { NodeController, FrameNode } from '@kit.ArkUI'; 3086 3087class MyNodeController extends NodeController { 3088 public rootNode: FrameNode | null = null; 3089 3090 makeNode(uiContext: UIContext): FrameNode | null { 3091 this.rootNode = new FrameNode(uiContext); 3092 this.rootNode.commonAttribute.width(100) 3093 .height(100) 3094 .backgroundColor(Color.Pink); 3095 this.addCommonEvent(this.rootNode); 3096 return this.rootNode; 3097 } 3098 3099 addCommonEvent(frameNode: FrameNode) { 3100 frameNode.commonEvent.setOnHover(((isHover: boolean, event: HoverEvent): void => { 3101 console.log(`isHover FrameNode: ${isHover}`); 3102 console.log(`isHover FrameNode: ${JSON.stringify(event)}`); 3103 event.stopPropagation(); 3104 })) 3105 frameNode.commonEvent.setOnClick((event: ClickEvent) => { 3106 console.log(`Click FrameNode: ${JSON.stringify(event)}`) 3107 }) 3108 frameNode.commonEvent.setOnTouch((event: TouchEvent) => { 3109 console.log(`touch FrameNode: ${JSON.stringify(event)}`) 3110 }) 3111 frameNode.commonEvent.setOnAppear(() => { 3112 console.log(`on Appear FrameNode`) 3113 }) 3114 frameNode.commonEvent.setOnDisappear(() => { 3115 console.log(`onDisAppear FrameNode`) 3116 }) 3117 frameNode.commonEvent.setOnFocus(() => { 3118 console.log(`onFocus FrameNode`) 3119 }) 3120 frameNode.commonEvent.setOnBlur(() => { 3121 console.log(`onBlur FrameNode`) 3122 }) 3123 frameNode.commonEvent.setOnKeyEvent((event: KeyEvent) => { 3124 console.log(`Key FrameNode: ${JSON.stringify(event)}`) 3125 }) 3126 frameNode.commonEvent.setOnMouse((event: MouseEvent) => { 3127 console.log(`Mouse FrameNode: ${JSON.stringify(event)}`) 3128 }) 3129 frameNode.commonEvent.setOnSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 3130 console.info(`onSizeChange FrameNode: oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 3131 }) 3132 } 3133} 3134 3135@Entry 3136@Component 3137struct Index { 3138 @State index: number = 0; 3139 private myNodeController: MyNodeController = new MyNodeController(); 3140 3141 build() { 3142 Column() { 3143 Button("add CommonEvent to Text") 3144 .onClick(() => { 3145 this.myNodeController!.addCommonEvent(this.myNodeController!.rootNode!.getParent()!.getPreviousSibling() !) 3146 }) 3147 Text("this is a Text") 3148 .fontSize(16) 3149 .borderWidth(1) 3150 .onHover(((isHover: boolean, event: HoverEvent): void => { 3151 console.log(`isHover Text: ${isHover}`); 3152 console.log(`isHover Text: ${JSON.stringify(event)}`); 3153 event.stopPropagation(); 3154 })) 3155 .onClick((event: ClickEvent) => { 3156 console.log(`Click Text : ${JSON.stringify(event)}`) 3157 }) 3158 .onTouch((event: TouchEvent) => { 3159 console.log(`touch Text : ${JSON.stringify(event)}`) 3160 }) 3161 .onAppear(() => { 3162 console.log(`on Appear Text`) 3163 }) 3164 .onDisAppear(() => { 3165 console.log(`onDisAppear Text`) 3166 }) 3167 .onFocus(() => { 3168 console.log(`onFocus Text`) 3169 }) 3170 .onBlur(() => { 3171 console.log(`onBlur Text`) 3172 }) 3173 .onKeyEvent((event: KeyEvent) => { 3174 console.log(`Key Text : ${JSON.stringify(event)}`) 3175 }) 3176 .onMouse((event: MouseEvent) => { 3177 console.log(`Mouse Text : ${JSON.stringify(event)}`) 3178 }) 3179 .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 3180 console.info(`onSizeChange Text: oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 3181 }) 3182 NodeContainer(this.myNodeController) 3183 .borderWidth(1) 3184 .width(300) 3185 .height(100) 3186 }.width("100%") 3187 } 3188} 3189``` 3190 3191## Example of Using Basic Events in the LazyForEach Scenario 3192 3193<!--code_no_check--> 3194 3195```ts 3196// index.ets 3197import {Track, TrackManager, TrackNode} from "./track" 3198 3199@Builder 3200function page1() { 3201 Column() { 3202 Text("Page1") 3203 PageList().height("90%") 3204 Button("DumpMessage") 3205 .onClick(() => { 3206 TrackManager.get().dump() 3207 }) 3208 3209 }.width("100%").height("100%") 3210} 3211 3212class BasicDataSource implements IDataSource { 3213 private listeners: DataChangeListener[] = []; 3214 private originDataArray: string[] = []; 3215 3216 public totalCount(): number { 3217 return 0; 3218 } 3219 3220 public getData(index: number): string { 3221 return this.originDataArray[index]; 3222 } 3223 3224 // This method is called by the framework to add a listener to the LazyForEach data source. 3225 registerDataChangeListener(listener: DataChangeListener): void { 3226 if (this.listeners.indexOf(listener) < 0) { 3227 console.info('add listener'); 3228 this.listeners.push(listener); 3229 } 3230 } 3231 3232 // This method is called by the framework to remove the listener from the LazyForEach data source. 3233 unregisterDataChangeListener(listener: DataChangeListener): void { 3234 const pos = this.listeners.indexOf(listener); 3235 if (pos >= 0) { 3236 console.info('remove listener'); 3237 this.listeners.splice(pos, 1); 3238 } 3239 } 3240 3241 // Notify LazyForEach that all child components need to be reloaded. 3242 notifyDataReload(): void { 3243 this.listeners.forEach(listener => { 3244 listener.onDataReloaded(); 3245 }) 3246 } 3247 3248 // Notify LazyForEach that a child component needs to be added for the data item with the specified index. 3249 notifyDataAdd(index: number): void { 3250 this.listeners.forEach(listener => { 3251 listener.onDataAdd(index); 3252 }) 3253 } 3254 3255 // Notify LazyForEach that the data item with the specified index has changed and the child component needs to be rebuilt. 3256 notifyDataChange(index: number): void { 3257 this.listeners.forEach(listener => { 3258 listener.onDataChange(index); 3259 }) 3260 } 3261 3262 // Notify LazyForEach that the child component that matches the specified index needs to be deleted. 3263 notifyDataDelete(index: number): void { 3264 this.listeners.forEach(listener => { 3265 listener.onDataDelete(index); 3266 }) 3267 } 3268 3269 // Notify LazyForEach that data needs to be swapped between the from and to positions. 3270 notifyDataMove(from: number, to: number): void { 3271 this.listeners.forEach(listener => { 3272 listener.onDataMove(from, to); 3273 }) 3274 } 3275} 3276 3277class MyDataSource extends BasicDataSource { 3278 private dataArray: string[] = []; 3279 3280 public totalCount(): number { 3281 return this.dataArray.length; 3282 } 3283 3284 public getData(index: number): string { 3285 return this.dataArray[index]; 3286 } 3287 3288 public addData(index: number, data: string): void { 3289 this.dataArray.splice(index, 0, data); 3290 this.notifyDataAdd(index); 3291 } 3292 3293 public pushData(data: string): void { 3294 this.dataArray.push(data); 3295 this.notifyDataAdd(this.dataArray.length - 1); 3296 } 3297} 3298 3299@Component 3300struct PageList { 3301 private data: MyDataSource = new MyDataSource(); 3302 3303 aboutToAppear() { 3304 for (let i = 0; i <= 100; i++) { 3305 this.data.pushData(`Hello ${i}`) 3306 } 3307 } 3308 3309 build() { 3310 List({ space: 3 }) { 3311 LazyForEach(this.data, (item: string, index: number) => { 3312 ListItem() { 3313 // Encapsulate and instrument the component with tracking through TrackNode. 3314 TrackNode({track: new Track().tag("xxx"+ item).id(index + 30000)}) { 3315 Row() { 3316 Text(item).fontSize(30) 3317 .onClick(() => { 3318 }) 3319 }.margin({ left: 10, right: 10 }) 3320 } 3321 } 3322 }, (item: string) => item) 3323 }.cachedCount(5) 3324 } 3325} 3326 3327 3328@Entry 3329@Component 3330struct TrackTest { 3331 pageInfos: NavPathStack = new NavPathStack() 3332 build() { 3333 Row() { 3334 TrackNode({ track: new Track().tag("root").id(10000)}) { 3335 page1() 3336 } 3337 } 3338 } 3339 3340 aboutToAppear(): void { 3341 TrackManager.get().startListenClick(this.getUIContext()) 3342 } 3343} 3344``` 3345 3346<!--code_no_check--> 3347 3348```ts 3349// ./track.ets 3350import { FrameNode, Rect } from '@kit.ArkUI'; 3351 3352@Component 3353export struct TrackNode { 3354 @BuilderParam closer: VoidCallback = this.defaultBuilder 3355 track: Track | null = null 3356 trackShadow: TrackShadow = new TrackShadow() 3357 3358 @Builder defaultBuilder() { 3359 } 3360 3361 build() { 3362 this.closer() 3363 } 3364 3365 aboutToAppear(): void { 3366 // use onDidBuild later 3367 } 3368 3369 aboutToDisappear(): void { 3370 TrackManager.get().removeTrack(this.trackShadow.id) 3371 console.log("Track disappear:" + this.trackShadow.id) 3372 } 3373 3374 onDidBuild(): void { 3375 // Construct a virtual tree with the tracing point. The obtained node is the root node of the current page (Row in the case). 3376 let uid = this.getUniqueId() 3377 let node: FrameNode | null = this.getUIContext().getFrameNodeByUniqueId(uid); 3378 console.log("Track onDidBuild node:" + node?.getNodeType()) 3379 if (node === null) { 3380 return 3381 } 3382 this.trackShadow.node = node 3383 this.trackShadow.id = node?.getUniqueId() 3384 this.trackShadow.track = this.track; 3385 TrackManager.get().addTrack(this.trackShadow.id, this.trackShadow) 3386 // Use setOnVisibleAreaApproximateChange to listen for and record changes in the visible area of the tracked component. 3387 node?.commonEvent.setOnVisibleAreaApproximateChange( 3388 { ratios: [0, 0.1, 0.2, 0.5, 0.8, 1], expectedUpdateInterval: 500 }, 3389 (ratioInc: boolean, ratio: number) => { 3390 console.log(`Node ${node?.getUniqueId()}:${node?.getNodeType()} is visibleRatio is ${ratio}`); 3391 this.trackShadow.visibleRatio = ratio 3392 }) 3393 3394 let parent: FrameNode | null = node?.getParent() 3395 3396 let attachTrackToParent: (parent: FrameNode | null) => boolean = 3397 (parent: FrameNode | null) => { 3398 while (parent !== null) { 3399 let parentTrack = TrackManager.get().getTrackById(parent.getUniqueId()) 3400 if (parentTrack !== undefined) { 3401 parentTrack.childIds.add(this.trackShadow.id) 3402 this.trackShadow.parentId = parentTrack.id 3403 return true; 3404 } 3405 parent = parent.getParent() 3406 } 3407 return false; 3408 } 3409 let attached = attachTrackToParent(parent); 3410 3411 if (!attached) { 3412 node?.commonEvent.setOnAppear(() => { 3413 let attached = attachTrackToParent(parent); 3414 if (attached) { 3415 console.log("Track lazy attached:" + this.trackShadow.id) 3416 } 3417 }) 3418 } 3419 } 3420} 3421 3422export class Track { 3423 public areaPercent: number = 0 3424 private trackTag: string = "" 3425 private trackId: number = 0 3426 3427 constructor() { 3428 } 3429 3430 tag(newTag: string): Track { 3431 this.trackTag = newTag; 3432 return this; 3433 } 3434 3435 id(newId: number): Track { 3436 this.trackId = newId; 3437 return this; 3438 } 3439} 3440 3441export class TrackShadow { 3442 public node: FrameNode | null = null 3443 public id: number = -1 3444 public track: Track | null = null 3445 public childIds: Set<number> = new Set() 3446 public parentId: number = -1 3447 public visibleRect: Rect = { left: 0, top: 0, right: 0, bottom: 0 } 3448 public area: number = 0 3449 public visibleRatio: number = 0 3450 3451 // Output the tracing point tree information through global dump. 3452 dump(depth: number = 0): void { 3453 console.log("Track Dp:" + depth + " id:" + this.id + " areaPer:" + this.track?.areaPercent + " visibleRatio:" + this.visibleRatio) 3454 this.childIds.forEach((value: number) => { 3455 TrackManager.get().getTrackById(value)?.dump(depth + 1) 3456 }) 3457 } 3458} 3459 3460export class TrackManager { 3461 static instance: TrackManager 3462 private trackMap: Map<number, TrackShadow> = new Map() 3463 private rootTrack: TrackShadow | null = null 3464 3465 static get(): TrackManager { 3466 if (TrackManager.instance !== undefined) { 3467 return TrackManager.instance 3468 } 3469 TrackManager.instance = new TrackManager() 3470 return TrackManager.instance 3471 } 3472 3473 addTrack(id: number, track: TrackShadow) { 3474 if (this.trackMap.size == 0) { 3475 this.rootTrack = track 3476 } 3477 console.log("Track add id:" + id) 3478 this.trackMap.set(id, track) 3479 } 3480 3481 removeTrack(id: number) { 3482 let current = this.getTrackById(id) 3483 if (current !== undefined) { 3484 this.trackMap.delete(id) 3485 let parent = this.getTrackById(current?.parentId) 3486 parent?.childIds.delete(id) 3487 } 3488 } 3489 3490 getTrackById(id: number): TrackShadow | undefined { 3491 return this.trackMap.get(id) 3492 } 3493 3494 startListenClick(context: UIContext) { 3495 // Obtain the FrameNode through listening for tracing point information. 3496 context.getUIObserver().on("willClick", (event: ClickEvent, node?: FrameNode) => { 3497 console.log("Track clicked:" + node) 3498 if (node == undefined) { 3499 return 3500 } 3501 let track = this.getTrackById(node.getUniqueId()) 3502 track?.dump(0); 3503 }) 3504 } 3505 3506 updateVisibleInfo(track: TrackShadow): void { 3507 // do something 3508 } 3509 3510 dump(): void { 3511 this.rootTrack?.dump(0) 3512 } 3513} 3514``` 3515## Example of Customizing a Node 3516 3517```ts 3518import { UIContext, DrawContext, FrameNode, NodeController, LayoutConstraint, Size, Position } from '@kit.ArkUI'; 3519import { drawing } from '@kit.ArkGraphics2D'; 3520 3521function GetChildLayoutConstraint(constraint: LayoutConstraint, child: FrameNode): LayoutConstraint { 3522 const size = child.getUserConfigSize(); 3523 const width = Math.max( 3524 Math.min(constraint.maxSize.width, size.width.value), 3525 constraint.minSize.width 3526 ); 3527 const height = Math.max( 3528 Math.min(constraint.maxSize.height, size.height.value), 3529 constraint.minSize.height 3530 ); 3531 const finalSize: Size = { width, height }; 3532 const res: LayoutConstraint = { 3533 maxSize: finalSize, 3534 minSize: finalSize, 3535 percentReference: finalSize 3536 }; 3537 3538 return res; 3539} 3540 3541class MyFrameNode extends FrameNode { 3542 public width: number = 10; 3543 private space: number = 1; 3544 3545 onMeasure(constraint: LayoutConstraint): void { 3546 let sizeRes: Size = { width: 100, height: 100 }; 3547 for (let i = 0;i < this.getChildrenCount();i++) { 3548 let child = this.getChild(i); 3549 if (child) { 3550 let childConstraint = GetChildLayoutConstraint(constraint, child); 3551 child.measure(childConstraint); 3552 let size = child.getMeasuredSize(); 3553 sizeRes.height += size.height + this.space; 3554 sizeRes.width = Math.max(sizeRes.width, size.width); 3555 } 3556 } 3557 this.setMeasuredSize(sizeRes); 3558 } 3559 3560 onLayout(position: Position): void { 3561 let y = 0; 3562 for (let i = 0;i < this.getChildrenCount();i++) { 3563 let child = this.getChild(i); 3564 if (child) { 3565 child.layout({ 3566 x: 20, 3567 y: y 3568 }); 3569 y += child.getMeasuredSize().height + this.space; 3570 } 3571 } 3572 this.setLayoutPosition(position); 3573 } 3574 3575 onDraw(context: DrawContext) { 3576 const canvas = context.canvas; 3577 const pen = new drawing.Pen(); 3578 pen.setStrokeWidth(5); 3579 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 3580 canvas.attachPen(pen); 3581 canvas.drawRect({ left: 0, right: this.width, top: 0, bottom: this.width }); 3582 canvas.detachPen(); 3583 } 3584 3585 addWidth() { 3586 this.width += 10; 3587 } 3588} 3589 3590class MyNodeController extends NodeController { 3591 public rootNode: MyFrameNode | null = null; 3592 3593 makeNode(context: UIContext): FrameNode | null { 3594 this.rootNode = new MyFrameNode(context); 3595 this.rootNode?.commonAttribute?.size({ width: 100, height: 100 }).backgroundColor(Color.Green); 3596 return this.rootNode; 3597 } 3598} 3599 3600@Entry 3601@Component 3602struct Index { 3603 private nodeController: MyNodeController = new MyNodeController(); 3604 3605 build() { 3606 Row() { 3607 Column() { 3608 NodeContainer(this.nodeController) 3609 .width('100%') 3610 .height(100) 3611 .backgroundColor('#FFF0F0F0') 3612 Button('Invalidate') 3613 .onClick(() => { 3614 this.nodeController?.rootNode?.addWidth(); 3615 this.nodeController?.rootNode?.invalidate(); 3616 }) 3617 Button('UpdateLayout') 3618 .onClick(() => { 3619 this.nodeController?.rootNode?.setNeedsLayout(); 3620 }) 3621 } 3622 .width('100%') 3623 .height('100%') 3624 } 3625 .height('100%') 3626 } 3627} 3628``` 3629## NodeAdapter Usage Example 3630 3631```ts 3632import { FrameNode, NodeController, NodeAdapter, typeNode } from '@kit.ArkUI'; 3633 3634class MyNodeAdapter extends NodeAdapter { 3635 uiContext: UIContext 3636 cachePool: Array<FrameNode> = new Array(); 3637 changed: boolean = false 3638 reloadTimes: number = 0; 3639 data: Array<string> = new Array(); 3640 hostNode?: FrameNode 3641 3642 constructor(uiContext: UIContext, count: number) { 3643 super(); 3644 this.uiContext = uiContext; 3645 this.totalNodeCount = count; 3646 this.loadData(); 3647 } 3648 3649 reloadData(count: number): void { 3650 this.reloadTimes++; 3651 NodeAdapter.attachNodeAdapter(this, this.hostNode); 3652 this.totalNodeCount = count; 3653 this.loadData(); 3654 this.reloadAllItems(); 3655 } 3656 3657 refreshData(): void { 3658 let items = this.getAllAvailableItems() 3659 console.log("UINodeAdapter get All items:" + items.length); 3660 this.reloadAllItems(); 3661 } 3662 3663 detachData(): void { 3664 NodeAdapter.detachNodeAdapter(this.hostNode); 3665 this.reloadTimes = 0; 3666 } 3667 3668 loadData(): void { 3669 for (let i = 0; i < this.totalNodeCount; i++) { 3670 this.data[i] = "Adapter ListItem " + i + " r:" + this.reloadTimes; 3671 } 3672 } 3673 3674 changeData(from: number, count: number): void { 3675 this.changed = !this.changed; 3676 for (let i = 0; i < count; i++) { 3677 let index = i + from; 3678 this.data[index] = "Adapter ListItem " + (this.changed ? "changed:" : "") + index + " r:" + this.reloadTimes; 3679 } 3680 this.reloadItem(from, count); 3681 } 3682 3683 insertData(from: number, count: number): void { 3684 for (let i = 0; i < count; i++) { 3685 let index = i + from; 3686 this.data.splice(index, 0, "Adapter ListItem " + from + "-" + i); 3687 } 3688 this.insertItem(from, count); 3689 this.totalNodeCount += count; 3690 console.log("UINodeAdapter after insert count:" + this.totalNodeCount); 3691 } 3692 3693 removeData(from: number, count: number): void { 3694 let arr = this.data.splice(from, count); 3695 this.removeItem(from, count); 3696 this.totalNodeCount -= arr.length; 3697 console.log("UINodeAdapter after remove count:" + this.totalNodeCount); 3698 } 3699 3700 moveData(from: number, to: number): void { 3701 let tmp = this.data.splice(from, 1); 3702 this.data.splice(to, 0, tmp[0]); 3703 this.moveItem(from, to); 3704 } 3705 3706 onAttachToNode(target: FrameNode): void { 3707 console.log("UINodeAdapter onAttachToNode id:" + target.getUniqueId()); 3708 this.hostNode = target; 3709 } 3710 3711 onDetachFromNode(): void { 3712 console.log("UINodeAdapter onDetachFromNode"); 3713 } 3714 3715 onGetChildId(index: number): number { 3716 console.log("UINodeAdapter onGetChildId:" + index); 3717 return index; 3718 } 3719 3720 onCreateChild(index: number): FrameNode { 3721 console.log("UINodeAdapter onCreateChild:" + index); 3722 if (this.cachePool.length > 0) { 3723 let cacheNode = this.cachePool.pop(); 3724 if (cacheNode !== undefined) { 3725 console.log("UINodeAdapter onCreateChild reused id:" + cacheNode.getUniqueId()); 3726 let text = cacheNode?.getFirstChild(); 3727 let textNode = text as typeNode.Text; 3728 textNode?.initialize(this.data[index]).fontSize(20); 3729 return cacheNode; 3730 } 3731 } 3732 console.log("UINodeAdapter onCreateChild createNew"); 3733 let itemNode = typeNode.createNode(this.uiContext, "ListItem"); 3734 let textNode = typeNode.createNode(this.uiContext, "Text"); 3735 textNode.initialize(this.data[index]).fontSize(20); 3736 itemNode.appendChild(textNode); 3737 return itemNode; 3738 } 3739 3740 onDisposeChild(id: number, node: FrameNode): void { 3741 console.log("UINodeAdapter onDisposeChild:" + id); 3742 if (this.cachePool.length < 10) { 3743 if (!this.cachePool.includes(node)) { 3744 console.log("UINodeAdapter caching node id:" + node.getUniqueId()); 3745 this.cachePool.push(node); 3746 } 3747 } else { 3748 node.dispose(); 3749 } 3750 } 3751 3752 onUpdateChild(id: number, node: FrameNode): void { 3753 let index = id; 3754 let text = node.getFirstChild(); 3755 let textNode = text as typeNode.Text; 3756 textNode?.initialize(this.data[index]).fontSize(20); 3757 } 3758} 3759 3760class MyNodeAdapterController extends NodeController { 3761 rootNode: FrameNode | null = null; 3762 nodeAdapter: MyNodeAdapter | null = null; 3763 3764 makeNode(uiContext: UIContext): FrameNode | null { 3765 this.rootNode = new FrameNode(uiContext); 3766 let listNode = typeNode.createNode(uiContext, "List"); 3767 listNode.initialize({ space: 3 }).borderWidth(2).borderColor(Color.Black); 3768 this.rootNode.appendChild(listNode); 3769 this.nodeAdapter = new MyNodeAdapter(uiContext, 100); 3770 NodeAdapter.attachNodeAdapter(this.nodeAdapter, listNode); 3771 return this.rootNode; 3772 } 3773} 3774 3775@Entry 3776@Component 3777struct ListNodeTest { 3778 adapterController: MyNodeAdapterController = new MyNodeAdapterController(); 3779 3780 build() { 3781 Column() { 3782 Text("ListNode Adapter"); 3783 NodeContainer(this.adapterController) 3784 .width(300).height(300) 3785 .borderWidth(1).borderColor(Color.Black); 3786 Row() { 3787 Button("Reload") 3788 .onClick(() => { 3789 this.adapterController.nodeAdapter?.reloadData(50); 3790 }) 3791 Button("Change") 3792 .onClick(() => { 3793 this.adapterController.nodeAdapter?.changeData(5, 10) 3794 }) 3795 Button("Insert") 3796 .onClick(() => { 3797 this.adapterController.nodeAdapter?.insertData(10, 10); 3798 }) 3799 } 3800 3801 Row() { 3802 Button("Remove") 3803 .onClick(() => { 3804 this.adapterController.nodeAdapter?.removeData(10, 10); 3805 }) 3806 Button("Move") 3807 .onClick(() => { 3808 this.adapterController.nodeAdapter?.moveData(2, 5); 3809 }) 3810 Button("Refresh") 3811 .onClick(() => { 3812 this.adapterController.nodeAdapter?.refreshData(); 3813 }) 3814 Button("Detach") 3815 .onClick(() => { 3816 this.adapterController.nodeAdapter?.detachData(); 3817 }) 3818 } 3819 }.borderWidth(1) 3820 .width("100%") 3821 } 3822} 3823 3824``` 3825
