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