1# FrameNode 2 3FrameNode表示组件树的实体节点。[NodeController](./js-apis-arkui-nodeController.md#nodecontroller)可通过[BuilderNode](./js-apis-arkui-builderNode.md#buildernode)持有的FrameNode将其挂载到[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)上，也可通过FrameNode获取[RenderNode](./js-apis-arkui-renderNode.md#rendernode)，挂载到其他FrameNode上。 4 5> **说明：** 6> 7> 本模块首批接口从API version 11开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 8> 9> 当前不支持在预览器中使用FrameNode节点。 10> 11> FrameNode节点暂不支持拖拽。 12 13## 导入模块 14 15```ts 16import { FrameNode, LayoutConstraint, typeNode, NodeAdapter } from "@kit.ArkUI"; 17``` 18 19## FrameNode 20 21### constructor 22 23constructor(uiContext: UIContext) 24 25FrameNode的构造函数。 26 27**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 28 29**系统能力：** SystemCapability.ArkUI.ArkUI.Full 30 31**参数：** 32 33| 参数名 | 类型 | 必填 | 说明 | 34| --------- | ----------------------------------------- | ---- | ---------------------------------- | 35| uiContext | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 36 37### getRenderNode 38 39getRenderNode(): RenderNode | null 40 41获取FrameNode中持有的RenderNode。 42 43**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 44 45**系统能力：** SystemCapability.ArkUI.ArkUI.Full 46 47**返回值：** 48 49| 类型 | 说明 | 50| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 51| [RenderNode](./js-apis-arkui-renderNode.md#rendernode) \| null | 一个RenderNode对象。若该FrameNode不包含RenderNode，则返回空对象null。如果当前FrameNode为声明式组件创建的节点，则返回null。 | 52 53**示例：** 54 55```ts 56import { NodeController, FrameNode } from '@kit.ArkUI'; 57 58class MyNodeController extends NodeController { 59 private rootNode: FrameNode | null = null; 60 61 makeNode(uiContext: UIContext): FrameNode | null { 62 this.rootNode = new FrameNode(uiContext); 63 64 const renderNode = this.rootNode.getRenderNode(); 65 if (renderNode !== null) { 66 renderNode.size = { width: 100, height: 100 }; 67 renderNode.backgroundColor = 0XFFFF0000; 68 } 69 70 return this.rootNode; 71 } 72} 73 74@Entry 75@Component 76struct Index { 77 private myNodeController: MyNodeController = new MyNodeController(); 78 79 build() { 80 Row() { 81 NodeContainer(this.myNodeController) 82 } 83 } 84} 85``` 86### isModifiable<sup>12+</sup> 87 88isModifiable(): boolean 89 90判断当前节点是否可修改。 91 92**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 93 94**系统能力：** SystemCapability.ArkUI.ArkUI.Full 95 96**返回值：** 97 98| 类型 | 说明 | 99| ------- | ------------------------------------------------------------------------------------------------------------------------------------- | 100| boolean | 判断当前节点是否可修改。当返回false的时候，当前FrameNode不支持appendChild、insertChildAfter、removeChild、clearChildren的操作。 | 101 102**示例：** 103 104请参考[节点操作示例](#节点操作示例)。 105 106### appendChild<sup>12+</sup> 107 108appendChild(node: FrameNode): void 109 110在FrameNode最后一个子节点后添加新的子节点。当前FrameNode如果不可修改，抛出异常信息。[typeNode](#typenode12)在appendChild时会校验子组件类型或个数，不满足抛出异常信息，限制情况请查看[typeNode](#typenode12)描述。 111 112**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 113 114**系统能力：** SystemCapability.ArkUI.ArkUI.Full 115 116**参数：** 117 118| 参数名 | 类型 | 必填 | 说明 | 119| ------ | ----------------------- | ---- | --------------------- | 120| node | [FrameNode](#framenode) | 是 | 需要添加的FrameNode。<br/>**说明：**<br/> node节点不可以为声明式创建的节点，即不可修改的FrameNode。仅有从BuilderNode中获取的声明式节点可以作为子节点。若子节点不符合规格，则抛出异常信息。<br/> node节点不可以拥有父节点，否则抛出异常信息。| 121 122**错误码：** 123 124| 错误码ID | 错误信息 | 125| -------- | -------------------------------- | 126| 100021 | The FrameNode is not modifiable. | 127 128**示例：** 129 130请参考[节点操作示例](#节点操作示例)。 131 132### insertChildAfter<sup>12+</sup> 133 134insertChildAfter(child: FrameNode, sibling: FrameNode | null): void 135 136在FrameNode指定子节点之后添加新的子节点。当前FrameNode如果不可修改，抛出异常信息。 137 138**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 139 140**系统能力：** SystemCapability.ArkUI.ArkUI.Full 141 142**参数：** 143 144| 参数名 | 类型 | 必填 | 说明 | 145| ------- | ----------------------------------------- | ---- | ---------------------------------------------------------------------------- | 146| child | [FrameNode](#framenode) | 是 | 需要添加的子节点。<br/>**说明：**<br/> child节点不可以为声明式创建的节点，即不可修改的FrameNode。仅有从BuilderNode中获取的声明式节点可以作为子节点。若子节点不符合规格，则抛出异常信息。<br/> child节点不可以拥有父节点，否则抛出异常信息。 | 147| sibling | [FrameNode](#framenode) \| null | 是 | 新节点将插入到该节点之后。若该参数设置为空，则新节点将插入到首个子节点之前。 | 148 149**错误码：** 150 151| 错误码ID | 错误信息 | 152| -------- | -------------------------------- | 153| 100021 | The FrameNode is not modifiable. | 154 155**示例：** 156 157请参考[节点操作示例](#节点操作示例)。 158 159### removeChild<sup>12+</sup> 160 161removeChild(node: FrameNode): void 162 163从FrameNode中删除指定的子节点。当前FrameNode如果不可修改，抛出异常信息。 164 165**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 166 167**系统能力：** SystemCapability.ArkUI.ArkUI.Full 168 169**参数：** 170 171| 参数名 | 类型 | 必填 | 说明 | 172| ------ | ----------------------- | ---- | ------------------ | 173| node | [FrameNode](#framenode) | 是 | 需要删除的子节点。 | 174 175**错误码：** 176 177| 错误码ID | 错误信息 | 178| -------- | -------------------------------- | 179| 100021 | The FrameNode is not modifiable. | 180 181**示例：** 182 183请参考[节点操作示例](#节点操作示例)。 184 185### clearChildren<sup>12+</sup> 186 187clearChildren(): void 188 189清除当前FrameNode的所有子节点。当前FrameNode如果不可修改，抛出异常信息。 190 191**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 192 193**系统能力：** SystemCapability.ArkUI.ArkUI.Full 194 195**错误码：** 196 197| 错误码ID | 错误信息 | 198| -------- | -------------------------------- | 199| 100021 | The FrameNode is not modifiable. | 200 201**示例：** 202 203请参考[节点操作示例](#节点操作示例)。 204 205### getChild<sup>12+</sup> 206 207getChild(index: number): FrameNode | null 208 209获取当前节点指定位置的子节点。 210 211**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 212 213**系统能力：** SystemCapability.ArkUI.ArkUI.Full 214 215**参数：** 216 217| 参数名 | 类型 | 必填 | 说明 | 218| ------ | ------ | ---- | -------------------------- | 219| index | number | 是 | 需要查询的子节点的序列号。 | 220 221**返回值：** 222 223| 类型 | 说明 | 224| ------------------------------- | ------------------------------------------------------------- | 225| [FrameNode](#framenode) \| null | 子节点。若该FrameNode不包含所查询的子节点，则返回空对象null。 | 226 227**示例：** 228 229请参考[节点操作示例](#节点操作示例)。 230### getFirstChild<sup>12+</sup> 231 232getFirstChild(): FrameNode | null 233 234获取当前FrameNode的第一个子节点 235 236**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 237 238**系统能力：** SystemCapability.ArkUI.ArkUI.Full 239 240**返回值：** 241 242| 类型 | 说明 | 243| ------------------------------- | --------------------------------------------------------- | 244| [FrameNode](#framenode) \| null | 首个子节点。若该FrameNode不包含子节点，则返回空对象null。 | 245 246**示例：** 247 248请参考[节点操作示例](#节点操作示例)。 249 250### getNextSibling<sup>12+</sup> 251 252getNextSibling(): FrameNode | null 253 254获取当前FrameNode的下一个同级节点。 255 256**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 257 258**系统能力：** SystemCapability.ArkUI.ArkUI.Full 259 260**返回值：** 261 262| 类型 | 说明 | 263| ------------------------------- | ------------------------------------------------------------------------------------ | 264| [FrameNode](#framenode) \| null | 当前FrameNode的下一个同级节点。若该FrameNode不包含下一个同级节点，则返回空对象null。 | 265 266**示例：** 267 268请参考[节点操作示例](#节点操作示例)。 269 270### getPreviousSibling<sup>12+</sup> 271 272getPreviousSibling(): FrameNode | null 273 274获取当前FrameNode的上一个同级节点。 275 276**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 277 278**系统能力：** SystemCapability.ArkUI.ArkUI.Full 279 280**返回值：** 281 282| 类型 | 说明 | 283| -------------------------------- | ------------------------------------------------------------------------------------ | 284| [FrameNode](#framenode) \| null | 当前FrameNode的上一个同级节点。若该FrameNode不包含上一个同级节点，则返回空对象null。 | 285 286**示例：** 287 288请参考[节点操作示例](#节点操作示例)。 289 290### getParent<sup>12+</sup> 291 292getParent(): FrameNode | null; 293 294获取当前FrameNode的父节点。 295 296**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 297 298**系统能力：** SystemCapability.ArkUI.ArkUI.Full 299 300**返回值：** 301 302| 类型 | 说明 | 303| -------------------------------- | -------------------------------------------------------------------- | 304| [FrameNode](#framenode) \| null | 当前FrameNode的父节点。若该FrameNode不包含父节点，则返回空对象null。 | 305 306**示例：** 307 308请参考[节点操作示例](#节点操作示例)。 309 310 311### getChildrenCount<sup>12+</sup> 312 313 getChildrenCount(): number; 314 315获取当前FrameNode的子节点数量。 316 317**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 318 319**系统能力：** SystemCapability.ArkUI.ArkUI.Full 320 321**返回值：** 322 323| 类型 | 说明 | 324| -------- | ------------------------------- | 325| number | 获取当前FrameNode的子节点数量。 | 326 327**示例：** 328 329请参考[节点操作示例](#节点操作示例)。 330 331### getPositionToWindow<sup>12+</sup> 332 333 getPositionToWindow(): Position 334 335获取FrameNode相对于窗口的位置偏移，单位为VP。 336 337**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 338 339**系统能力：** SystemCapability.ArkUI.ArkUI.Full 340 341**返回值：** 342 343| 类型 | 说明 | 344| -------- | ------------------------------- | 345| [Position](./js-apis-arkui-graphics.md#position) | 节点相对于窗口的位置偏移，单位为VP。 | 346 347**示例：** 348 349请参考[节点操作示例](#节点操作示例)。 350 351 352### getPositionToParent<sup>12+</sup> 353 354getPositionToParent(): Position 355 356获取FrameNode相对于父组件的位置偏移，单位为VP。 357 358**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 359 360**系统能力：** SystemCapability.ArkUI.ArkUI.Full 361 362**返回值：** 363 364| 类型 | 说明 | 365| -------------------------------------------------------------- | --------------------------------------------------------------------- | 366| [Position](./js-apis-arkui-graphics.md#position) | 节点相对于父组件的位置偏移，单位为VP。 | 367 368**示例：** 369 370请参考[节点操作示例](#节点操作示例)。 371 372### getPositionToScreen<sup>12+</sup> 373 374 getPositionToScreen(): Position 375 376获取FrameNode相对于屏幕的位置偏移，单位为VP。 377 378**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 379 380**系统能力：** SystemCapability.ArkUI.ArkUI.Full 381 382**返回值：** 383 384| 类型 | 说明 | 385| -------- | ------------------------------- | 386| [Position](./js-apis-arkui-graphics.md#position) | 节点相对于屏幕的位置偏移，单位为VP。 | 387 388**示例：** 389 390请参考[节点操作示例](#节点操作示例)。 391 392 393### getPositionToParentWithTransform<sup>12+</sup> 394 395getPositionToParentWithTransform(): Position 396 397获取FrameNode相对于父组件带有绘制属性的位置偏移，单位为VP，绘制属性比如transform, translate等，返回的坐标是组件布局时左上角变换后的坐标。 398 399**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 400 401**系统能力：** SystemCapability.ArkUI.ArkUI.Full 402 403**返回值：** 404 405| 类型 | 说明 | 406| -------------------------------------------------------------- | --------------------------------------------------------------------- | 407| [Position](./js-apis-arkui-graphics.md#position) | 节点相对于父组件的位置偏移，单位为VP。 当设置了其他（比如：transform, translate等）绘制属性，由于浮点数精度的影响，返回值会有微小偏差。 | 408 409**示例：** 410 411请参考[节点操作示例](#节点操作示例)。 412 413### getPositionToWindowWithTransform<sup>12+</sup> 414 415getPositionToWindowWithTransform(): Position 416 417获取FrameNode相对于窗口带有绘制属性的位置偏移，单位为VP，绘制属性比如transform, translate等，返回的坐标是组件布局时左上角变换后的坐标。 418 419**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 420 421**系统能力：** SystemCapability.ArkUI.ArkUI.Full 422 423**返回值：** 424 425| 类型 | 说明 | 426| -------------------------------------------------------------- | --------------------------------------------------------------------- | 427| [Position](./js-apis-arkui-graphics.md#position) | 节点相对于窗口的位置偏移，单位为VP。 当设置了其他（比如：transform, translate等）绘制属性，由于浮点数精度的影响，返回值会有微小偏差。 | 428 429**示例：** 430 431请参考[节点操作示例](#节点操作示例)。 432 433### getPositionToScreenWithTransform<sup>12+</sup> 434 435getPositionToScreenWithTransform(): Position 436 437获取FrameNode相对于屏幕带有绘制属性的位置偏移，单位为VP，绘制属性比如transform, translate等，返回的坐标是组件布局时左上角变换后的坐标。 438 439**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 440 441**系统能力：** SystemCapability.ArkUI.ArkUI.Full 442 443**返回值：** 444 445| 类型 | 说明 | 446| -------------------------------------------------------------- | --------------------------------------------------------------------- | 447| [Position](./js-apis-arkui-graphics.md#position) | 节点相对于屏幕的位置偏移，单位为VP。 当设置了其他（比如：transform, translate等）绘制属性，由于浮点数精度的影响，返回值会有微小偏差。 | 448 449**示例：** 450 451请参考[节点操作示例](#节点操作示例)。 452 453 454### getMeasuredSize<sup>12+</sup> 455 456getMeasuredSize(): Size 457 458获取FrameNode测量后的大小，单位为PX。 459 460**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 461 462**系统能力：** SystemCapability.ArkUI.ArkUI.Full 463 464**返回值：** 465 466| 类型 | 说明 | 467| -------------------------------------------------------------- | --------------------------------------------------------------------- | 468| [Size](./js-apis-arkui-graphics.md#size) | 节点测量后的大小，单位为PX。 | 469 470**示例：** 471 472请参考[节点操作示例](#节点操作示例)。 473 474 475### getLayoutPosition<sup>12+</sup> 476 477getLayoutPosition(): Position 478 479获取FrameNode布局后相对于父组件的位置偏移，单位为PX。该偏移是父容器对该节点进行布局之后的结果，因此布局之后生效的offset属性和不参与布局的position属性不影响该偏移值。 480 481**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 482 483**系统能力：** SystemCapability.ArkUI.ArkUI.Full 484 485**返回值：** 486 487| 类型 | 说明 | 488| -------------------------------------------------------------- | --------------------------------------------------------------------- | 489| [Position](./js-apis-arkui-graphics.md#position) | 节点布局后相对于父组件的位置偏移，单位为PX。 | 490 491**示例：** 492 493请参考[节点操作示例](#节点操作示例)。 494 495### getUserConfigBorderWidth<sup>12+</sup> 496 497getUserConfigBorderWidth(): Edges\<LengthMetrics\> 498 499获取用户设置的边框宽度。 500 501**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 502 503**系统能力：** SystemCapability.ArkUI.ArkUI.Full 504 505**返回值：** 506 507| 类型 | 说明 | 508| -------------------------------------------------------------- | --------------------------------------------------------------------- | 509| [Edges](./js-apis-arkui-graphics.md#edgest12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | 用户设置的边框宽度。 | 510 511**示例：** 512 513请参考[节点操作示例](#节点操作示例)。 514 515### getUserConfigPadding<sup>12+</sup> 516 517getUserConfigPadding(): Edges\<LengthMetrics\> 518 519获取用户设置的内边距。 520 521**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 522 523**系统能力：** SystemCapability.ArkUI.ArkUI.Full 524 525**返回值：** 526 527| 类型 | 说明 | 528| -------------------------------------------------------------- | --------------------------------------------------------------------- | 529| [Edges](./js-apis-arkui-graphics.md#edgest12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | 用户设置的内边距。 | 530 531**示例：** 532 533请参考[节点操作示例](#节点操作示例)。 534 535### getUserConfigMargin<sup>12+</sup> 536 537getUserConfigMargin(): Edges\<LengthMetrics\> 538 539获取用户设置的外边距。 540 541**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 542 543**系统能力：** SystemCapability.ArkUI.ArkUI.Full 544 545**返回值：** 546 547| 类型 | 说明 | 548| -------------------------------------------------------------- | --------------------------------------------------------------------- | 549| [Edges](./js-apis-arkui-graphics.md#edgest12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | 用户设置的外边距。 | 550 551**示例：** 552 553请参考[节点操作示例](#节点操作示例)。 554 555### getUserConfigSize<sup>12+</sup> 556 557getUserConfigSize(): SizeT\<LengthMetrics\> 558 559获取用户设置的宽高。 560 561**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 562 563**系统能力：** SystemCapability.ArkUI.ArkUI.Full 564 565**返回值：** 566 567| 类型 | 说明 | 568| ------------------------------------------------------------ | ---------------- | 569| [SizeT](./js-apis-arkui-graphics.md#sizett12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | 用户设置的宽高。 | 570 571**示例：** 572 573请参考[节点操作示例](#节点操作示例)。 574 575### getId<sup>12+</sup> 576 577getId(): string 578 579获取用户设置的节点ID（通用属性设置的[ID](./arkui-ts/ts-universal-attributes-component-id.md)）。 580 581**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 582 583**系统能力：** SystemCapability.ArkUI.ArkUI.Full 584 585**返回值：** 586 587| 类型 | 说明 | 588| -------------------------------------------------------------- | --------------------------------------------------------------------- | 589| string | 用户设置的节点ID（通用属性设置的[ID](./arkui-ts/ts-universal-attributes-component-id.md)）。 | 590 591**示例：** 592 593请参考[节点操作示例](#节点操作示例)。 594 595### getUniqueId<sup>12+</sup> 596 597getUniqueId(): number 598 599获取系统分配的唯一标识的节点UniqueID。 600 601**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 602 603**系统能力：** SystemCapability.ArkUI.ArkUI.Full 604 605**返回值：** 606 607| 类型 | 说明 | 608| -------------------------------------------------------------- | --------------------------------------------------------------------- | 609| number | 系统分配的唯一标识的节点UniqueID。 | 610 611**示例：** 612 613请参考[节点操作示例](#节点操作示例)。 614 615### getNodeType<sup>12+</sup> 616 617getNodeType(): string 618 619获取节点的类型。内置组件类型为组件名称，例如，按钮组件Button的类型为Button。而对于自定义组件，若其有渲染内容，则其类型为__Common__。 620 621**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 622 623**系统能力：** SystemCapability.ArkUI.ArkUI.Full 624 625**返回值：** 626 627| 类型 | 说明 | 628| -------------------------------------------------------------- | --------------------------------------------------------------------- | 629| string | 节点的类型。 | 630 631**示例：** 632 633请参考[节点操作示例](#节点操作示例)。 634 635### getOpacity<sup>12+</sup> 636 637getOpacity(): number 638 639获取节点的不透明度，最小值为0，最大值为1。 640 641**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 642 643**系统能力：** SystemCapability.ArkUI.ArkUI.Full 644 645**返回值：** 646 647| 类型 | 说明 | 648| -------------------------------------------------------------- | --------------------------------------------------------------------- | 649| number | 节点的不透明度。 | 650 651**示例：** 652 653请参考[节点操作示例](#节点操作示例)。 654 655### isVisible<sup>12+</sup> 656 657isVisible(): boolean 658 659获取节点是否可见。 660 661**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 662 663**系统能力：** SystemCapability.ArkUI.ArkUI.Full 664 665**返回值：** 666 667| 类型 | 说明 | 668| -------------------------------------------------------------- | --------------------------------------------------------------------- | 669| boolean | 节点是否可见。 | 670 671**示例：** 672 673请参考[节点操作示例](#节点操作示例)。 674 675### isClipToFrame<sup>12+</sup> 676 677isClipToFrame(): boolean 678 679获取节点是否是剪裁到组件区域。 680 681**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 682 683**系统能力：** SystemCapability.ArkUI.ArkUI.Full 684 685**返回值：** 686 687| 类型 | 说明 | 688| -------------------------------------------------------------- | --------------------------------------------------------------------- | 689| boolean | 节点是否是剪裁到组件区域。 | 690 691**示例：** 692 693请参考[节点操作示例](#节点操作示例)。 694 695### isAttached<sup>12+</sup> 696 697isAttached(): boolean 698 699获取节点是否被挂载到主节点树上。 700 701**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 702 703**系统能力：** SystemCapability.ArkUI.ArkUI.Full 704 705**返回值：** 706 707| 类型 | 说明 | 708| -------------------------------------------------------------- | --------------------------------------------------------------------- | 709| boolean | 节点是否被挂载到主节点树上。 | 710 711**示例：** 712 713请参考[节点操作示例](#节点操作示例)。 714 715### getInspectorInfo<sup>12+</sup> 716 717getInspectorInfo(): Object 718 719获取节点的结构信息，该信息和DevEco Studio内置<!--RP1-->ArkUI Inspector<!--RP1End-->工具里面的一致。 720 721**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 722 723**系统能力：** SystemCapability.ArkUI.ArkUI.Full 724 725**返回值：** 726 727| 类型 | 说明 | 728| -------------------------------------------------------------- | --------------------------------------------------------------------- | 729| Object | 节点的结构信息。 | 730 731**示例：** 732 733请参考[节点操作示例](#节点操作示例)。 734 735### getCustomProperty<sup>12+</sup> 736 737getCustomProperty(name: string): Object | undefined 738 739通过名称获取组件的自定义属性。 740 741**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 742 743**系统能力：** SystemCapability.ArkUI.ArkUI.Full 744 745**参数：** 746 747| 参数名 | 类型 | 必填 | 说明 | 748| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 749| name | string | 是 | 自定义属性的名称。 | 750 751**返回值：** 752 753| 类型 | 说明 | 754| -------------------------------------------------------------- | --------------------------------------------------------------------- | 755| Object \| undefined | 自定义属性的值。 | 756 757**示例：** 758 759请参考[节点操作示例](#节点操作示例)。 760 761### dispose<sup>12+</sup> 762 763dispose(): void 764 765立即解除当前FrameNode对象对实体FrameNode节点的引用关系。 766 767**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 768 769**系统能力：** SystemCapability.ArkUI.ArkUI.Full 770 771> **说明：** 772> 773> FrameNode对象调用dispose后，由于不对应任何实体FrameNode节点，在调用部分查询接口(getPositionToParent、getPositionToScreen、getPositionToWindow、getPositionToParentWithTransform、getPositionToScreenWithTransform、getPositionToWindowWithTransform、getMeasuredSize、getLayoutPosition、getUserConfigBorderWidth、getUserConfigPadding、getUserConfigMargin、getUserConfigSize)的时候会导致应用出现jscrash。 774> 775> 通过[getUniqueId](#getuniqueid12)可以判断当前FrameNode是否对应一个实体FrameNode节点。当UniqueId大于0时表示该对象对应一个实体FrameNode节点。 776 777**示例：** 778 779```ts 780import { NodeController, FrameNode, BuilderNode } from '@kit.ArkUI'; 781 782@Component 783struct TestComponent { 784 build() { 785 Column() { 786 Text('This is a BuilderNode.') 787 .fontSize(16) 788 .fontWeight(FontWeight.Bold) 789 } 790 .width('100%') 791 .backgroundColor(Color.Gray) 792 } 793 794 aboutToAppear() { 795 console.error('aboutToAppear'); 796 } 797 798 aboutToDisappear() { 799 console.error('aboutToDisappear'); 800 } 801} 802 803@Builder 804function buildComponent() { 805 TestComponent() 806} 807 808class MyNodeController extends NodeController { 809 private rootNode: FrameNode | null = null; 810 private builderNode: BuilderNode<[]> | null = null; 811 812 makeNode(uiContext: UIContext): FrameNode | null { 813 this.rootNode = new FrameNode(uiContext); 814 this.builderNode = new BuilderNode(uiContext, { selfIdealSize: { width: 200, height: 100 } }); 815 this.builderNode.build(new WrappedBuilder(buildComponent)); 816 817 const rootRenderNode = this.rootNode.getRenderNode(); 818 if (rootRenderNode !== null) { 819 rootRenderNode.size = { width: 200, height: 200 }; 820 rootRenderNode.backgroundColor = 0xff00ff00; 821 rootRenderNode.appendChild(this.builderNode!.getFrameNode()!.getRenderNode()); 822 } 823 824 return this.rootNode; 825 } 826 827 disposeFrameNode() { 828 if (this.rootNode !== null && this.builderNode !== null) { 829 this.rootNode.removeChild(this.builderNode.getFrameNode()); 830 this.builderNode.dispose(); 831 832 this.rootNode.dispose(); 833 } 834 } 835 836 removeBuilderNode() { 837 const rootRenderNode = this.rootNode!.getRenderNode(); 838 if (rootRenderNode !== null && this.builderNode !== null && this.builderNode.getFrameNode() !== null) { 839 rootRenderNode.removeChild(this.builderNode!.getFrameNode()!.getRenderNode()); 840 } 841 } 842} 843 844@Entry 845@Component 846struct Index { 847 private myNodeController: MyNodeController = new MyNodeController(); 848 849 build() { 850 Column({ space: 4 }) { 851 NodeContainer(this.myNodeController) 852 Button('FrameNode dispose') 853 .onClick(() => { 854 this.myNodeController.disposeFrameNode(); 855 }) 856 .width('100%') 857 } 858 } 859} 860``` 861 862### commonAttribute<sup>12+</sup> 863 864get commonAttribute(): CommonAttribute 865 866获取FrameNode中持有的CommonAttribute接口，用于设置通用属性。 867 868仅可以修改自定义节点的属性。 869 870**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 871 872**系统能力：** SystemCapability.ArkUI.ArkUI.Full 873 874**返回值：** 875 876| 类型 | 说明 | 877| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 878| CommonAttribute | 获取FrameNode中持有的CommonAttribute接口，用于设置通用属性。| 879 880> **说明：** 881> 882> FrameNode的效果参考对齐方式为顶部起始端的[Stack](./arkui-ts/ts-container-stack.md)容器组件。 883> 884> FrameNode的属性支持范围参考[CommonModifier](./arkui-ts/ts-universal-attributes-attribute-modifier.md#自定义modifier)。 885 886**示例：** 887 888请参考[基础事件示例](#基础事件示例)。 889 890### commonEvent<sup>12+</sup> 891 892get commonEvent(): UICommonEvent 893 894获取FrameNode中持有的UICommonEvent对象，用于设置基础事件。设置的基础事件与声明式定义的事件平行，参与事件竞争；设置的基础事件不覆盖原有的声明式事件。同时设置两个事件回调的时候，优先回调声明式事件。 895 896LazyForEach场景下，由于存在节点的销毁重建，对于重建的节点需要重新设置事件回调才能保证监听事件正常响应。 897 898**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 899 900**系统能力：** SystemCapability.ArkUI.ArkUI.Full 901 902**返回值：** 903 904| 类型 | 说明 | 905| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 906| [UICommonEvent](./arkui-ts/ts-uicommonevent.md#设置事件回调) | UICommonEvent对象，用于设置基础事件。 | 907 908**示例：** 909 910请参考[基础事件示例](#基础事件示例)和[LazyForEach场景基础事件使用示例](#lazyforeach场景基础事件使用示例)。 911 912### gestureEvent<sup>14+</sup> 913 914get gestureEvent(): UIGestureEvent 915 916获取FrameNode中持有的UIGestureEvent对象，用于设置组件绑定的手势事件。通过gestureEvent接口设置的手势不会覆盖通过[声明式手势接口](./arkui-ts/ts-gesture-settings.md)绑定的手势，两者同时设置了手势时，优先回调声明式接口设置的手势事件。 917 918**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 919 920**系统能力：** SystemCapability.ArkUI.ArkUI.Full 921 922**返回值：** 923 924| 类型 | 说明 | 925| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 926| [UIGestureEvent](./arkui-ts/ts-uigestureevent.md#设置组件绑定的手势) | UIGestureEvent对象，用于设置组件绑定的手势。 | 927 928**示例：** 929 930请参考[手势事件示例](#手势事件示例)。 931 932### onDraw<sup>12+</sup> 933 934onDraw?(context: DrawContext): void 935 936FrameNode的自绘制方法，该方法会在FrameNode进行内容绘制时被调用。 937 938**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 939 940**系统能力：** SystemCapability.ArkUI.ArkUI.Full 941 942**参数：** 943 944| 参数名 | 类型 | 必填 | 说明 | 945| ------- | ------------------------------------------------------ | ---- | ---------------- | 946| context | [DrawContext](./js-apis-arkui-graphics.md#drawcontext) | 是 | 图形绘制上下文。自绘制区域无法超出组件自身大小。 | 947 948**示例：** 949 950请参考[节点自定义示例](#节点自定义示例)。 951 952### onMeasure<sup>12+</sup> 953 954onMeasure(constraint: LayoutConstraint): void 955 956FrameNode的自定义测量方法，该方法会重写默认测量方法，在FrameNode进行测量时被调用，测量FrameNode及其内容的大小。 957 958**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 959 960**系统能力：** SystemCapability.ArkUI.ArkUI.Full 961 962**参数：** 963 964| 参数名 | 类型 | 必填 | 说明 | 965| ------- | ------------------------------------------------------ | ---- | ---------------- | 966| constraint | [LayoutConstraint](#layoutconstraint12) | 是 | 组件进行测量时使用的布局约束。 | 967 968**示例：** 969 970请参考[节点自定义示例](#节点自定义示例)。 971 972### LayoutConstraint<sup>12+</sup> 973 974描述组件的布局约束。 975 976**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 977 978**系统能力：** SystemCapability.ArkUI.ArkUI.Full 979 980| 名称 | 类型 | 必填 | 说明 | 981| -------------- | ------ | ----- | ------------------------------------------ | 982| maxSize | [Size](./js-apis-arkui-graphics.md#size) | 是 | 最大尺寸。 | 983| minSize | [Size](./js-apis-arkui-graphics.md#size) | 是 | 最小尺寸。 | 984| percentReference | [Size](./js-apis-arkui-graphics.md#size) | 是 | 子节点计算百分比时的尺寸基准。 985 986### onLayout<sup>12+</sup> 987 988onLayout(position: Position): void 989 990FrameNode的自定义布局方法，该方法会重写默认布局方法，在FrameNode进行布局时被调用，为FrameNode及其子节点指定位置。 991 992**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 993 994**系统能力：** SystemCapability.ArkUI.ArkUI.Full 995 996**参数：** 997 998| 参数名 | 类型 | 必填 | 说明 | 999| ------- | ------------------------------------------------------ | ---- | ---------------- | 1000| position | [Position](./js-apis-arkui-graphics.md#position) | 是 | 组件进行布局时使用的位置信息。 | 1001 1002**示例：** 1003 1004请参考[节点自定义示例](#节点自定义示例)。 1005 1006### setMeasuredSize<sup>12+</sup> 1007 1008setMeasuredSize(size: Size): void 1009 1010设置FrameNode的测量后的尺寸，默认单位PX。若设置的宽高为负数，自动取零。 1011 1012**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1013 1014**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1015 1016**参数：** 1017 1018| 参数名 | 类型 | 必填 | 说明 | 1019| ------- | ------------------------------------------------------ | ---- | ---------------- | 1020| size | [Size](./js-apis-arkui-graphics.md#size) | 是 | FrameNode的测量后的尺寸。 | 1021 1022**示例：** 1023 1024请参考[节点自定义示例](#节点自定义示例)。 1025 1026### setLayoutPosition<sup>12+</sup> 1027 1028setLayoutPosition(position: Position): void 1029 1030设置FrameNode的布局后的位置，默认单位PX。 1031 1032**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1033 1034**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1035 1036**参数：** 1037 1038| 参数名 | 类型 | 必填 | 说明 | 1039| ------- | ------------------------------------------------------ | ---- | ---------------- | 1040| position | [Position](./js-apis-arkui-graphics.md#position) | 是 | FrameNode的布局后的位置。 | 1041 1042**示例：** 1043 1044请参考[节点自定义示例](#节点自定义示例)。 1045 1046### measure<sup>12+</sup> 1047 1048measure(constraint: LayoutConstraint): void 1049 1050调用FrameNode的测量方法，根据父容器的布局约束，对FrameNode进行测量，计算出尺寸，如果测量方法被重写，则调用重写的方法。建议在[onMeasure](#onmeasure12)方法中调用。 1051 1052**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1053 1054**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1055 1056**参数：** 1057 1058| 参数名 | 类型 | 必填 | 说明 | 1059| ------- | ------------------------------------------------------ | ---- | ---------------- | 1060| constraint | [LayoutConstraint](#layoutconstraint12) | 是 | 组件进行测量时使用的父容器布局约束。 | 1061 1062**示例：** 1063 1064请参考[节点自定义示例](#节点自定义示例)。 1065 1066### layout<sup>12+</sup> 1067 1068layout(position: Position): void 1069 1070调用FrameNode的布局方法，为FrameNode及其子节点指定布局位置，如果布局方法被重写，则调用重写的方法。建议在[onLayout](#onlayout12)方法中调用。 1071 1072**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1073 1074**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1075 1076**参数：** 1077 1078| 参数名 | 类型 | 必填 | 说明 | 1079| ------- | ------------------------------------------------------ | ---- | ---------------- | 1080| position | [Position](./js-apis-arkui-graphics.md#position) | 是 | 组件进行布局时使用的位置信息。 | 1081 1082**示例：** 1083 1084请参考[节点自定义示例](#节点自定义示例)。 1085 1086### setNeedsLayout<sup>12+</sup> 1087 1088setNeedsLayout(): void 1089 1090该方法会将FrameNode标记为需要布局的状态，下一帧将会进行重新布局。 1091 1092**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1093 1094**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1095 1096**示例：** 1097 1098请参考[节点自定义示例](#节点自定义示例)。 1099 1100### invalidate<sup>12+</sup> 1101 1102invalidate(): void 1103 1104该方法会触发FrameNode自绘制内容的重新渲染。 1105 1106**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1107 1108**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1109 1110### addComponentContent<sup>12+</sup> 1111 1112addComponentContent\<T>(content: ComponentContent\<T>): void 1113 1114支持添加ComponentContent类型的组件内容。要求当前节点是一个可修改的节点，即[isModifiable](#ismodifiable12)的返回值为true，否则抛出异常信息。 1115 1116**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1117 1118**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1119 1120**参数：** 1121 1122| 参数名 | 类型 | 必填 | 说明 | 1123| ------- | ------------------------------------------------------ | ---- | ---------------- | 1124| content | [ComponentContent](./js-apis-arkui-ComponentContent.md#componentcontent)\<T> | 是 | FrameNode节点中显示的组件内容。 | 1125 1126**错误码：** 1127 1128| 错误码ID | 错误信息 | 1129| -------- | -------------------------------- | 1130| 100021 | The FrameNode is not modifiable. | 1131 1132```ts 1133import { NodeController, FrameNode, ComponentContent, typeNode } from '@kit.ArkUI'; 1134 1135@Builder 1136function buildText() { 1137 Column() { 1138 Text('hello') 1139 .width(50) 1140 .height(50) 1141 .backgroundColor(Color.Yellow) 1142 } 1143} 1144 1145class MyNodeController extends NodeController { 1146 makeNode(uiContext: UIContext): FrameNode | null { 1147 let node = new FrameNode(uiContext) 1148 node.commonAttribute.width(300).height(300).backgroundColor(Color.Red) 1149 let col = typeNode.createNode(uiContext, "Column") 1150 col.initialize({ space: 10 }) 1151 node.appendChild(col) 1152 let row4 = typeNode.createNode(uiContext, "Row") 1153 row4.attribute.width(200) 1154 .height(200) 1155 .borderWidth(1) 1156 .borderColor(Color.Black) 1157 .backgroundColor(Color.Green) 1158 let component = new ComponentContent<Object>(uiContext, wrapBuilder(buildText)) 1159 if (row4.isModifiable()) { 1160 row4.addComponentContent(component) 1161 col.appendChild(row4) 1162 } 1163 return node 1164 } 1165} 1166 1167@Entry 1168@Component 1169struct FrameNodeTypeTest { 1170 private myNodeController: MyNodeController = new MyNodeController(); 1171 1172 build() { 1173 Row() { 1174 NodeContainer(this.myNodeController); 1175 } 1176 } 1177} 1178``` 1179 1180### disposeTree<sup>12+</sup> 1181 1182disposeTree(): void 1183 1184下树并递归释放当前节点为根的子树。 1185 1186**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1187 1188**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1189 1190```ts 1191import { FrameNode, NodeController, BuilderNode } from '@kit.ArkUI'; 1192 1193@Component 1194struct TestComponent { 1195 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent2)); 1196 1197 build() { 1198 Column() { 1199 Text('This is a BuilderNode.') 1200 .fontSize(16) 1201 .fontWeight(FontWeight.Bold) 1202 NodeContainer(this.myNodeController) 1203 } 1204 .width('100%') 1205 .backgroundColor(Color.Gray) 1206 } 1207 1208 aboutToAppear() { 1209 console.error('BuilderNode aboutToAppear'); 1210 } 1211 1212 aboutToDisappear() { 1213 console.error('BuilderNode aboutToDisappear'); 1214 } 1215} 1216 1217@Component 1218struct TestComponent2 { 1219 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent3)); 1220 private myNodeController2: MyNodeController = new MyNodeController(wrapBuilder(buildComponent4)); 1221 1222 build() { 1223 Column() { 1224 Text('This is a BuilderNode 2.') 1225 .fontSize(16) 1226 .fontWeight(FontWeight.Bold) 1227 NodeContainer(this.myNodeController) 1228 NodeContainer(this.myNodeController2) 1229 } 1230 .width('100%') 1231 .backgroundColor(Color.Gray) 1232 } 1233 1234 aboutToAppear() { 1235 console.error('BuilderNode 2 aboutToAppear'); 1236 } 1237 1238 aboutToDisappear() { 1239 console.error('BuilderNode 2 aboutToDisappear'); 1240 } 1241} 1242 1243@Component 1244struct TestComponent3 { 1245 build() { 1246 Column() { 1247 Text('This is a BuilderNode 3.') 1248 .fontSize(16) 1249 .fontWeight(FontWeight.Bold) 1250 1251 } 1252 .width('100%') 1253 .backgroundColor(Color.Gray) 1254 } 1255 1256 aboutToAppear() { 1257 console.error('BuilderNode 3 aboutToAppear'); 1258 } 1259 1260 aboutToDisappear() { 1261 console.error('BuilderNode 3 aboutToDisappear'); 1262 } 1263} 1264 1265@Component 1266struct TestComponent4 { 1267 build() { 1268 Column() { 1269 Text('This is a BuilderNode 4.') 1270 .fontSize(16) 1271 .fontWeight(FontWeight.Bold) 1272 1273 } 1274 .width('100%') 1275 .backgroundColor(Color.Gray) 1276 } 1277 1278 aboutToAppear() { 1279 console.error('BuilderNode 4 aboutToAppear'); 1280 } 1281 1282 aboutToDisappear() { 1283 console.error('BuilderNode 4 aboutToDisappear'); 1284 } 1285} 1286 1287@Builder 1288function buildComponent() { 1289 TestComponent() 1290} 1291 1292@Builder 1293function buildComponent2() { 1294 TestComponent2() 1295} 1296 1297@Builder 1298function buildComponent3() { 1299 TestComponent3() 1300} 1301 1302@Builder 1303function buildComponent4() { 1304 TestComponent4() 1305} 1306 1307class MyNodeController extends NodeController { 1308 private rootNode: FrameNode | null = null; 1309 private builderNode: BuilderNode<[]> | null = null; 1310 private wrappedBuilder: WrappedBuilder<[]>; 1311 1312 constructor(builder: WrappedBuilder<[]>) { 1313 super(); 1314 this.wrappedBuilder = builder; 1315 } 1316 1317 makeNode(uiContext: UIContext): FrameNode | null { 1318 this.builderNode = new BuilderNode(uiContext, { selfIdealSize: { width: 200, height: 100 } }); 1319 this.builderNode.build(this.wrappedBuilder); 1320 1321 return this.builderNode.getFrameNode(); 1322 } 1323 1324 dispose() { 1325 if (this.builderNode !== null) { 1326 this.builderNode.getFrameNode()?.disposeTree() 1327 } 1328 } 1329 1330 removeBuilderNode() { 1331 const rootRenderNode = this.rootNode!.getRenderNode(); 1332 if (rootRenderNode !== null && this.builderNode !== null && this.builderNode.getFrameNode() !== null) { 1333 rootRenderNode.removeChild(this.builderNode!.getFrameNode()!.getRenderNode()); 1334 } 1335 } 1336} 1337 1338@Entry 1339@Component 1340struct Index { 1341 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent)); 1342 1343 build() { 1344 Column({ space: 4 }) { 1345 NodeContainer(this.myNodeController) 1346 Button('BuilderNode dispose') 1347 .onClick(() => { 1348 this.myNodeController.dispose(); 1349 }) 1350 .width('100%') 1351 Button('BuilderNode rebuild') 1352 .onClick(() => { 1353 this.myNodeController.rebuild(); 1354 }) 1355 .width('100%') 1356 } 1357 } 1358} 1359``` 1360 1361**示例：** 1362 1363请参考[节点自定义示例](#节点自定义示例)。 1364 1365## TypedFrameNode<sup>12+</sup> 1366 1367TypedFrameNode继承自[FrameNode](#framenode)，用于声明具体类型的FrameNode。 1368 1369### 属性 1370 1371**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1372 1373**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1374 1375| 名称 | 类型 | 只读 | 可选 | 说明 | 1376| ---------- | ---- | ---- | ---- | ------------------------------------------------------------ | 1377| initialize | C | 否 | 否 | 该接口用于创建对应组件的构造参数，用于设置/更新组件的初始值。 | 1378| attribute | T | 否 | 否 | 该接口用于获取对应组件的属性设置对象，用于设置/更新组件的通用、私有属性。 | 1379 1380## typeNode<sup>12+</sup> 1381 1382typeNode提供创建具体类型的FrameNode能力，可通过FrameNode的基础接口进行自定义的挂载，使用占位容器进行显示。 1383 1384使用typeNode创建Text、Image、Select、Toggle节点时，当传入的[UIContext](./js-apis-arkui-UIContext.md)对应的UI实例销毁后，调用该接口会返回一个无效的FrameNode节点，无法正常挂载和显示。 1385 1386**示例：** 1387 1388请参考[自定义具体类型节点示例](#自定义具体类型节点示例)。 1389 1390### Text<sup>12+</sup> 1391type Text = TypedFrameNode<TextInterface, TextAttribute> 1392 1393Text类型的FrameNode节点类型。不允许添加子组件。 1394 1395**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1396 1397**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1398 1399| 类型 | 说明 | 1400| -------------------------------------------------- | ------------------------------------------------------------ | 1401| TypedFrameNode<TextInterface, TextAttribute> | 提供Text类型FrameNode节点。<br/>**说明：**<br/> TextInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Text组件的构造函数类型。 <br/> TextAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Text组件的属性设置对象。 | 1402 1403### createNode('Text')<sup>12+</sup> 1404createNode(context: UIContext, nodeType: 'Text'): Text 1405 1406创建Text类型的FrameNode节点。 1407 1408**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1409 1410**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1411 1412**参数：** 1413 1414| 参数名 | 类型 | 必填 | 说明 | 1415| ------------------ | ------------------ | ------------------- | ------------------- | 1416| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1417| nodeType | 'Text' | 是 | 创建Text类型的FrameNode节点。 | 1418 1419**返回值：** 1420 1421| 类型 | 说明 | 1422| ------------------ | ------------------ | 1423| [Text](#text12) | Text类型的FrameNode节点。 | 1424 1425**示例：** 1426 1427<!--code_no_check--> 1428 1429```ts 1430typeNode.createNode(uiContext, 'Text'); 1431``` 1432 1433### Column<sup>12+</sup> 1434type Column = TypedFrameNode<ColumnInterface, ColumnAttribute> 1435 1436Column类型的FrameNode节点类型。 1437 1438**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1439 1440**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1441 1442| 类型 | 说明 | 1443| ------------------------------------------------------ | ------------------------------------------------------------ | 1444| TypedFrameNode<ColumnInterface, ColumnAttribute> | 提供Column类型FrameNode节点。<br/>**说明：**<br/> ColumnInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Column组件的构造函数类型。 <br/> ColumnAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Column组件的属性设置对象。 | 1445 1446### createNode('Column')<sup>12+</sup> 1447createNode(context: UIContext, nodeType: 'Column'): Column 1448 1449创建Column类型的FrameNode节点。 1450 1451**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1452 1453**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1454 1455**参数：** 1456 1457| 参数名 | 类型 | 必填 | 说明 | 1458| ------------------ | ------------------ | ------------------- | ------------------- | 1459| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1460| nodeType | 'Column' | 是 | 创建Column类型的FrameNode节点。 | 1461 1462**返回值：** 1463 1464| 类型 | 说明 | 1465| ------------------ | ------------------ | 1466| [Column](#column12) | Column类型的FrameNode节点。 | 1467 1468**示例：** 1469 1470<!--code_no_check--> 1471 1472```ts 1473typeNode.createNode(uiContext, 'Column'); 1474``` 1475### Row<sup>12+</sup> 1476type Row = TypedFrameNode<RowInterface, RowAttribute> 1477 1478Row类型的FrameNode节点类型。 1479 1480**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1481 1482**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1483 1484| 类型 | 说明 | 1485| ------------------------------------------------ | ------------------------------------------------------------ | 1486| TypedFrameNode<RowInterface, RowAttribute> | 提供Row类型FrameNode节点。<br/>**说明：**<br/> RowInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Row组件的构造函数类型。 <br/> RowAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Row组件的属性设置对象。 | 1487 1488### createNode('Row')<sup>12+</sup> 1489createNode(context: UIContext, nodeType: 'Row'): Row 1490 1491创建Row类型的FrameNode节点。 1492 1493**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1494 1495**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1496 1497**参数：** 1498 1499| 参数名 | 类型 | 必填 | 说明 | 1500| ------------------ | ------------------ | ------------------- | ------------------- | 1501| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1502| nodeType | 'Row' | 是 | 创建Row类型的FrameNode节点。 | 1503 1504**返回值：** 1505 1506| 类型 | 说明 | 1507| ------------------ | ------------------ | 1508| [Row](#row12) | Row类型的FrameNode节点。 | 1509 1510**示例：** 1511 1512<!--code_no_check--> 1513 1514```ts 1515typeNode.createNode(uiContext, 'Row'); 1516``` 1517### Stack<sup>12+</sup> 1518type Stack = TypedFrameNode<StackInterface, StackAttribute> 1519 1520Stack类型的FrameNode节点类型。 1521 1522**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1523 1524**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1525 1526| 类型 | 说明 | 1527| ---------------------------------------------------- | ------------------------------------------------------------ | 1528| TypedFrameNode<StackInterface, StackAttribute> | 提供Stack类型FrameNode节点。<br/>**说明：**<br/> StackInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Stack组件的构造函数类型。 <br/> StackAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Stack组件的属性设置对象。 | 1529 1530### createNode('Stack')<sup>12+</sup> 1531createNode(context: UIContext, nodeType: 'Stack'): Stack 1532 1533创建Stack类型的FrameNode节点。 1534 1535**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1536 1537**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1538 1539**参数：** 1540 1541| 参数名 | 类型 | 必填 | 说明 | 1542| ------------------ | ------------------ | ------------------- | ------------------- | 1543| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1544| nodeType | 'Stack' | 是 | 创建Stack类型的FrameNode节点。 | 1545 1546**返回值：** 1547 1548| 类型 | 说明 | 1549| ------------------ | ------------------ | 1550| [Stack](#stack12) | Stack类型的FrameNode节点。 | 1551 1552**示例：** 1553 1554<!--code_no_check--> 1555 1556```ts 1557typeNode.createNode(uiContext, 'Stack'); 1558``` 1559### GridRow<sup>12+</sup> 1560type GridRow = TypedFrameNode<GridRowInterface, GridRowAttribute> 1561 1562GridRow类型的FrameNode节点类型。只允许添加GridCol类型子组件。 1563 1564**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1565 1566**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1567 1568| 类型 | 说明 | 1569| -------------------------------------------------------- | ------------------------------------------------------------ | 1570| TypedFrameNode<GridRowInterface, GridRowAttribute> | 提供GridRow类型FrameNode节点。<br/>**说明：**<br/> GridRowInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为GridRow组件的构造函数类型。 <br/> GridRowAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回GridRow组件的属性设置对象。 | 1571 1572### createNode('GridRow')<sup>12+</sup> 1573createNode(context: UIContext, nodeType: 'GridRow'): GridRow 1574 1575创建GridRow类型的FrameNode节点。 1576 1577**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1578 1579**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1580 1581**参数：** 1582 1583| 参数名 | 类型 | 必填 | 说明 | 1584| ------------------ | ------------------ | ------------------- | ------------------- | 1585| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1586| nodeType | 'GridRow' | 是 | 创建GridRow类型的FrameNode节点。 | 1587 1588**返回值：** 1589 1590| 类型 | 说明 | 1591| ------------------ | ------------------ | 1592| [GridRow](#gridrow12) | GridRow类型的FrameNode节点。 | 1593 1594**示例：** 1595 1596<!--code_no_check--> 1597 1598```ts 1599typeNode.createNode(uiContext, 'GridRow'); 1600``` 1601### GridCol<sup>12+</sup> 1602type GridCol = TypedFrameNode<GridColInterface, GridColAttribute> 1603 1604GridCol类型的FrameNode节点类型。不允许添加子组件。 1605 1606**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1607 1608**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1609 1610| 类型 | 说明 | 1611| -------------------------------------------------------- | ------------------------------------------------------------ | 1612| TypedFrameNode<GridColInterface, GridColAttribute> | 提供GridCol类型FrameNode节点。<br/>**说明：**<br/> GridColInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为GridCol组件的构造函数类型。 <br/> GridColAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回GridCol组件的属性设置对象。 | 1613 1614### createNode('GridCol')<sup>12+</sup> 1615createNode(context: UIContext, nodeType: 'GridCol'): GridCol 1616 1617创建GridCol类型的FrameNode节点。 1618 1619**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1620 1621**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1622 1623**参数：** 1624 1625| 参数名 | 类型 | 必填 | 说明 | 1626| ------------------ | ------------------ | ------------------- | ------------------- | 1627| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1628| nodeType | 'GridCol' | 是 | 创建GridCol类型的FrameNode节点。 | 1629 1630**返回值：** 1631 1632| 类型 | 说明 | 1633| ------------------ | ------------------ | 1634| [GridCol](#gridcol12) | GridCol类型的FrameNode节点。 | 1635 1636**示例：** 1637 1638<!--code_no_check--> 1639 1640```ts 1641typeNode.createNode(uiContext, 'GridCol'); 1642``` 1643### Flex<sup>12+</sup> 1644type Flex = TypedFrameNode<FlexInterface, FlexAttribute> 1645 1646Flex类型的FrameNode节点类型。 1647 1648**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1649 1650**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1651 1652| 类型 | 说明 | 1653| -------------------------------------------------- | ------------------------------------------------------------ | 1654| TypedFrameNode<FlexInterface, FlexAttribute> | 提供Flex类型FrameNode节点。<br/>**说明：**<br/> FlexInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Flex组件的构造函数类型。 <br/> FlexAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Flex组件的属性设置对象。 | 1655 1656### createNode('Flex')<sup>12+</sup> 1657createNode(context: UIContext, nodeType: 'Flex'): Flex 1658 1659创建Flex类型的FrameNode节点。 1660 1661**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1662 1663**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1664 1665**参数：** 1666 1667| 参数名 | 类型 | 必填 | 说明 | 1668| ------------------ | ------------------ | ------------------- | ------------------- | 1669| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1670| nodeType | 'Flex' | 是 | 创建Flex类型的FrameNode节点。 | 1671 1672**返回值：** 1673 1674| 类型 | 说明 | 1675| ------------------ | ------------------ | 1676| [Flex](#flex12) | Flex类型的FrameNode节点。 | 1677 1678**示例： ** 1679 1680<!--code_no_check--> 1681 1682```ts 1683typeNode.createNode(uiContext, 'Flex'); 1684``` 1685### Swiper<sup>12+</sup> 1686type Swiper = TypedFrameNode<SwiperInterface, SwiperAttribute> 1687 1688Swiper类型的FrameNode节点类型。 1689 1690**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1691 1692**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1693 1694| 类型 | 说明 | 1695| ------------------------------------------------------ | ------------------------------------------------------------ | 1696| TypedFrameNode<SwiperInterface, SwiperAttribute> | 提供Swiper类型FrameNode节点。<br/>**说明：**<br/> SwiperInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Swiper组件的构造函数类型。 <br/> SwiperAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Swiper组件的属性设置对象。 | 1697 1698### createNode('Swiper')<sup>12+</sup> 1699createNode(context: UIContext, nodeType: 'Swiper'): Swiper 1700 1701创建Swiper类型的FrameNode节点。 1702 1703**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1704 1705**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1706 1707**参数：** 1708 1709| 参数名 | 类型 | 必填 | 说明 | 1710| ------------------ | ------------------ | ------------------- | ------------------- | 1711| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1712| nodeType | 'Swiper' | 是 | 创建Swiper类型的FrameNode节点。 | 1713 1714**返回值：** 1715 1716| 类型 | 说明 | 1717| ------------------ | ------------------ | 1718| [Swiper](#swiper12) | Swiper类型的FrameNode节点。 | 1719 1720**示例： ** 1721 1722<!--code_no_check--> 1723 1724```ts 1725typeNode.createNode(uiContext, 'Swiper'); 1726``` 1727### Progress<sup>12+</sup> 1728type Progress = TypedFrameNode<ProgressInterface, ProgressAttribute> 1729 1730Progress类型的FrameNode节点类型。不允许添加子组件。 1731 1732**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1733 1734**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1735 1736| 类型 | 说明 | 1737| ---------------------------------------------------------- | ------------------------------------------------------------ | 1738| TypedFrameNode<ProgressInterface, ProgressAttribute> | 提供Progress类型FrameNode节点。<br/>**说明：**<br/> ProgressInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Progress组件的构造函数类型。 <br/> ProgressAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Progress组件的属性设置对象。 | 1739 1740### createNode('Progress')<sup>12+</sup> 1741createNode(context: UIContext, nodeType: 'Progress'): Progress 1742 1743创建Progress类型的FrameNode节点。 1744 1745**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1746 1747**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1748 1749**参数：** 1750 1751| 参数名 | 类型 | 必填 | 说明 | 1752| ------------------ | ------------------ | ------------------- | ------------------- | 1753| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1754| nodeType | 'Progress' | 是 | 创建Progress类型的FrameNode节点。 | 1755 1756**返回值：** 1757 1758| 类型 | 说明 | 1759| ------------------ | ------------------ | 1760| [Progress](#progress12) | Progress类型的FrameNode节点。 | 1761 1762**示例：** 1763 1764```ts 1765typeNode.createNode(uiContext, 'Progress'); 1766``` 1767### Scroll<sup>12+</sup> 1768type Scroll = TypedFrameNode<ScrollInterface, ScrollAttribute> 1769 1770Scroll类型的FrameNode节点类型。允许添加一个子组件。 1771 1772**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1773 1774**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1775 1776| 类型 | 说明 | 1777| ------------------------------------------------------ | ------------------------------------------------------------ | 1778| TypedFrameNode<ScrollInterface, ScrollAttribute> | 提供Scroll类型FrameNode节点。<br/>**说明：**<br/> ScrollInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Scroll组件的构造函数类型。 <br/> ScrollAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Scroll组件的属性设置对象。 | 1779 1780### createNode('Scroll')<sup>12+</sup> 1781createNode(context: UIContext, nodeType: 'Scroll'): Scroll 1782 1783创建Scroll类型的FrameNode节点。 1784 1785**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1786 1787**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1788 1789**参数：** 1790 1791| 参数名 | 类型 | 必填 | 说明 | 1792| ------------------ | ------------------ | ------------------- | ------------------- | 1793| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1794| nodeType | 'Scroll' | 是 | 创建Scroll类型的FrameNode节点。 | 1795 1796**返回值：** 1797 1798| 类型 | 说明 | 1799| ------------------ | ------------------ | 1800| [Scroll](#scroll12) | Scroll类型的FrameNode节点。 | 1801 1802**示例：** 1803 1804```ts 1805typeNode.createNode(uiContext, 'Scroll'); 1806``` 1807### RelativeContainer<sup>12+</sup> 1808type RelativeContainer = TypedFrameNode<RelativeContainerInterface, RelativeContainerAttribute> 1809 1810RelativeContainer类型的FrameNode节点类型。 1811 1812**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1813 1814**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1815 1816| 类型 | 说明 | 1817| ------------------------------------------------------------ | ------------------------------------------------------------ | 1818| TypedFrameNode<RelativeContainerInterface, RelativeContainerAttribute> | 提供RelativeContainer类型FrameNode节点。<br/>**说明：**<br/> RelativeContainerInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为RelativeContainer组件的构造函数类型。 <br/> RelativeContainerAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回RelativeContainer组件的属性设置对象。 | 1819 1820### createNode('RelativeContainer')<sup>12+</sup> 1821createNode(context: UIContext, nodeType: 'RelativeContainer'): RelativeContainer 1822 1823创建RelativeContainer类型的FrameNode节点。 1824 1825**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1826 1827**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1828 1829**参数：** 1830 1831| 参数名 | 类型 | 必填 | 说明 | 1832| ------------------ | ------------------ | ------------------- | ------------------- | 1833| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1834| nodeType | 'RelativeContainer' | 是 | 创建RelativeContainer类型的FrameNode节点。 | 1835 1836**返回值：** 1837 1838| 类型 | 说明 | 1839| ------------------ | ------------------ | 1840| [RelativeContainer](#relativecontainer12) | RelativeContainer类型的FrameNode节点。 | 1841 1842**示例：** 1843 1844<!--code_no_check--> 1845 1846```ts 1847typeNode.createNode(uiContext, 'RelativeContainer'); 1848``` 1849### Divider<sup>12+</sup> 1850type Divider = TypedFrameNode<DividerInterface, DividerAttribute> 1851 1852Divider类型的FrameNode节点类型。不允许添加子组件。 1853 1854**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1855 1856**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1857 1858| 类型 | 说明 | 1859| -------------------------------------------------------- | ------------------------------------------------------------ | 1860| TypedFrameNode<DividerInterface, DividerAttribute> | 提供Divider类型FrameNode节点。<br/>**说明：**<br/> DividerInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为RelativeContainer组件的构造函数类型。 <br/> DividerAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Divider组件的属性设置对象。 | 1861 1862### createNode('Divider')<sup>12+</sup> 1863createNode(context: UIContext, nodeType: 'Divider'): Divider 1864 1865创建Divider类型的FrameNode节点。 1866 1867**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1868 1869**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1870 1871**参数：** 1872 1873| 参数名 | 类型 | 必填 | 说明 | 1874| ------------------ | ------------------ | ------------------- | ------------------- | 1875| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1876| nodeType | 'Divider' | 是 | 创建Divider类型的FrameNode节点。 | 1877 1878**返回值：** 1879 1880| 类型 | 说明 | 1881| ------------------ | ------------------ | 1882| [Divider](#divider12) | Divider类型的FrameNode节点。 | 1883 1884**示例：** 1885 1886<!--code_no_check--> 1887 1888```ts 1889typeNode.createNode(uiContext, 'Divider'); 1890``` 1891### LoadingProgress<sup>12+</sup> 1892type LoadingProgress = TypedFrameNode<LoadingProgressInterface, LoadingProgressAttribute> 1893 1894LoadingProgress类型的FrameNode节点类型。不允许添加子组件。 1895 1896**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1897 1898**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1899 1900| 类型 | 说明 | 1901| ------------------------------------------------------------ | ------------------------------------------------------------ | 1902| TypedFrameNode<LoadingProgressInterface, LoadingProgressAttribute> | 提供LoadingProgress类型FrameNode节点。<br/>**说明：**<br/> LoadingProgressInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为LoadingProgress组件的构造函数类型。 <br/> LoadingProgressAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回LoadingProgress组件的属性设置对象。 | 1903 1904### createNode('LoadingProgress')<sup>12+</sup> 1905createNode(context: UIContext, nodeType: 'LoadingProgress'): LoadingProgress 1906 1907创建LoadingProgress类型的FrameNode节点。 1908 1909**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1910 1911**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1912 1913**参数：** 1914 1915| 参数名 | 类型 | 必填 | 说明 | 1916| ------------------ | ------------------ | ------------------- | ------------------- | 1917| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1918| nodeType | 'LoadingProgress' | 是 | 创建LoadingProgress类型的FrameNode节点。 | 1919 1920**返回值：** 1921 1922| 类型 | 说明 | 1923| ------------------ | ------------------ | 1924| [LoadingProgress](#loadingprogress12) | LoadingProgress类型的FrameNode节点。 | 1925 1926**示例：** 1927 1928<!--code_no_check--> 1929 1930```ts 1931typeNode.createNode(uiContext, 'LoadingProgress'); 1932``` 1933### Search<sup>12+</sup> 1934type Search = TypedFrameNode<SearchInterface, SearchAttribute> 1935 1936Search类型的FrameNode节点类型。 1937 1938**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1939 1940**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1941 1942| 类型 | 说明 | 1943| ------------------------------------------------------ | ------------------------------------------------------------ | 1944| TypedFrameNode<SearchInterface, SearchAttribute> | 提供Search类型FrameNode节点。<br/>**说明：**<br/> SearchInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Search组件的构造函数类型。 <br/> SearchAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Search组件的属性设置对象。 | 1945 1946### createNode('Search')<sup>12+</sup> 1947createNode(context: UIContext, nodeType: 'Search'): Search 1948 1949创建Search类型的FrameNode节点。 1950 1951**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1952 1953**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1954 1955**参数：** 1956 1957| 参数名 | 类型 | 必填 | 说明 | 1958| ------------------ | ------------------ | ------------------- | ------------------- | 1959| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1960| nodeType | 'Search' | 是 | 创建Search类型的FrameNode节点。 | 1961 1962**返回值：** 1963 1964| 类型 | 说明 | 1965| ------------------ | ------------------ | 1966| [Search](#search12) | Search类型的FrameNode节点。 | 1967 1968**示例：** 1969 1970<!--code_no_check--> 1971 1972```ts 1973typeNode.createNode(uiContext, 'Search'); 1974``` 1975### Blank<sup>12+</sup> 1976type Blank = TypedFrameNode<BlankInterface, BlankAttribute> 1977 1978Blank类型的FrameNode节点类型。不允许添加子组件。 1979 1980**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1981 1982**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1983 1984| 类型 | 说明 | 1985| ---------------------------------------------------- | ------------------------------------------------------------ | 1986| TypedFrameNode<BlankInterface, BlankAttribute> | 提供Blank类型FrameNode节点。<br/>**说明：**<br/> BlankInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Blank组件的构造函数类型。 <br/> BlankAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Blank组件的属性设置对象。 | 1987 1988### createNode('Blank')<sup>12+</sup> 1989createNode(context: UIContext, nodeType: 'Blank'): Blank; 1990 1991创建Blank类型的FrameNode节点。 1992 1993**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1994 1995**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1996 1997**参数：** 1998 1999| 参数名 | 类型 | 必填 | 说明 | 2000| ------------------ | ------------------ | ------------------- | ------------------- | 2001| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2002| nodeType | 'Blank' | 是 | 创建Blank类型的FrameNode节点。 | 2003 2004**返回值：** 2005 2006| 类型 | 说明 | 2007| ------------------ | ------------------ | 2008| [Blank](#blank12) | Blank类型的FrameNode节点。 | 2009 2010**示例：** 2011 2012<!--code_no_check--> 2013 2014```ts 2015typeNode.createNode(uiContext, 'Blank'); 2016``` 2017### Image<sup>12+</sup> 2018type Image = TypedFrameNode<ImageInterface, ImageAttribute> 2019 2020Image类型的FrameNode节点类型。不允许添加子组件。 2021 2022**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2023 2024**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2025 2026| 类型 | 说明 | 2027| ---------------------------------------------------- | ------------------------------------------------------------ | 2028| TypedFrameNode<ImageInterface, ImageAttribute> | 提供Image类型FrameNode节点。<br/>**说明：**<br/> ImageInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Image组件的构造函数类型。 <br/> ImageAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Image组件的属性设置对象。 | 2029 2030### createNode('Image')<sup>12+</sup> 2031createNode(context: UIContext, nodeType: 'Image'): Image 2032 2033创建Image类型的FrameNode节点。 2034 2035**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2036 2037**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2038 2039**参数：** 2040 2041| 参数名 | 类型 | 必填 | 说明 | 2042| ------------------ | ------------------ | ------------------- | ------------------- | 2043| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2044| nodeType | 'Image' | 是 | 创建Image类型的节点。 | 2045 2046**返回值：** 2047 2048| 类型 | 说明 | 2049| ------------------ | ------------------ | 2050| [Image](#image12) | Image类型的FrameNode节点。 | 2051 2052**示例：** 2053 2054<!--code_no_check--> 2055 2056```ts 2057typeNode.createNode(uiContext, 'Image'); 2058``` 2059### List<sup>12+</sup> 2060type List = TypedFrameNode<ListInterface, ListAttribute> 2061 2062List类型的FrameNode节点类型。只允许添加ListItem、ListItemGroup类型子组件。 2063 2064**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2065 2066**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2067 2068| 类型 | 说明 | 2069| -------------------------------------------------- | ------------------------------------------------------------ | 2070| TypedFrameNode<ListInterface, ListAttribute> | 提供List类型FrameNode节点。<br/>**说明：**<br/> ListInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为List组件的构造函数类型。 <br/> ListAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回List组件的属性设置对象。 | 2071 2072### createNode('List')<sup>12+</sup> 2073createNode(context: UIContext, nodeType: 'List'): List 2074 2075创建List类型的FrameNode节点。 2076 2077**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2078 2079**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2080 2081**参数：** 2082 2083| 参数名 | 类型 | 必填 | 说明 | 2084| ------------------ | ------------------ | ------------------- | ------------------- | 2085| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2086| nodeType | 'List' | 是 | 创建List类型的节点。 | 2087 2088**返回值：** 2089 2090| 类型 | 说明 | 2091| ------------------ | ------------------ | 2092| [List](#list12) | List类型的FrameNode节点。 | 2093 2094**示例：** 2095 2096<!--code_no_check--> 2097 2098```ts 2099typeNode.createNode(uiContext, 'List'); 2100``` 2101### ListItem<sup>12+</sup> 2102type ListItem = TypedFrameNode<ListItemInterface, ListItemAttribute> 2103 2104ListItem类型的FrameNode节点类型。 2105 2106**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2107 2108**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2109 2110| 类型 | 说明 | 2111| ---------------------------------------------------------- | ------------------------------------------------------------ | 2112| TypedFrameNode<ListItemInterface, ListItemAttribute> | 提供ListItem类型FrameNode节点。<br/>**说明：**<br/> ListItemInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为ListItem组件的构造函数类型。 <br/> ListItemAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回ListItem组件的属性设置对象。 | 2113 2114### createNode('ListItem')<sup>12+</sup> 2115createNode(context: UIContext, nodeType: 'ListItem'): ListItem 2116 2117创建ListItem类型的FrameNode节点。 2118 2119**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2120 2121**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2122 2123**参数：** 2124 2125| 参数名 | 类型 | 必填 | 说明 | 2126| ------------------ | ------------------ | ------------------- | ------------------- | 2127| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2128| nodeType | 'ListItem' | 是 | 创建ListItem类型的节点。 | 2129 2130**返回值：** 2131 2132| 类型 | 说明 | 2133| ------------------ | ------------------ | 2134| [ListItem](#listitem12) | ListItem类型的FrameNode节点。 | 2135 2136**示例：** 2137 2138<!--code_no_check--> 2139 2140```ts 2141typeNode.createNode(uiContext, 'ListItem'); 2142``` 2143 2144### TextInput<sup>12+</sup> 2145type TextInput = TypedFrameNode<TextInputInterface, TextInputAttribute> 2146 2147TextInput类型的FrameNode节点类型。 2148 2149**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2150 2151**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2152 2153| 类型 | 说明 | 2154| ------------------------------------------------------------ | ------------------------------------------------------------ | 2155| TypedFrameNode<TextInputInterface, TextInputAttribute> | 提供TextInput类型FrameNode节点。<br/>**说明：**<br/> TextInputInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为TextInput组件的构造函数类型。 <br/> TextInputAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回TextInput组件的属性设置对象。 | 2156 2157### createNode('TextInput')<sup>12+</sup> 2158createNode(context: UIContext, nodeType: 'TextInput'): TextInput 2159 2160创建TextInput类型的FrameNode节点。 2161 2162**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2163 2164**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2165 2166**参数：** 2167 2168| 参数名 | 类型 | 必填 | 说明 | 2169| ------------------ | ------------------ | ------------------- | ------------------- | 2170| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2171| nodeType | 'TextInput' | 是 | 创建TextInput类型的节点。 | 2172 2173**返回值：** 2174 2175| 类型 | 说明 | 2176| ------------------ | ------------------ | 2177| [TextInput](#textinput12) | TextInput类型的FrameNode节点。 | 2178 2179**示例：** 2180 2181<!--code_no_check--> 2182 2183```ts 2184typeNode.createNode(uiContext, 'TextInput'); 2185``` 2186 2187### Button<sup>12+</sup> 2188type Button = TypedFrameNode<ButtonInterface, ButtonAttribute> 2189 2190Button类型的FrameNode节点类型。以子组件模式创建允许添加一个子组件。以label模式创建不可以添加子组件。 2191 2192**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2193 2194**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2195 2196| 类型 | 说明 | 2197| ------------------------------------------------------ | ------------------------------------------------------------ | 2198| TypedFrameNode<ButtonInterface, ButtonAttribute> | 提供Button类型FrameNode节点。<br/>**说明：**<br/> ButtonInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Button组件的构造函数类型。 <br/> ButtonAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Button组件的属性设置对象。<br/> 接口入参label不为空时，以label模式创建Button组件，以此模式创建无法包含子组件,并且不允许再设置子组件，否则会抛出异常。且label模式和子组件模式在第一次initialize创建之后无法在后续的initialize进行动态修改，如需要包含子组件，第一次initialize时不要设置label参数。<br/> 以子组件模式创建时，只能包含一个子组件，不能设置多个子组件，否则会抛出异常。 | 2199 2200### createNode('Button')<sup>12+</sup> 2201createNode(context: UIContext, nodeType: 'Button'): Button 2202 2203创建Button类型的FrameNode节点。 2204 2205**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2206 2207**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2208 2209**参数：** 2210 2211| 参数名 | 类型 | 必填 | 说明 | 2212| ------------------ | ------------------ | ------------------- | ------------------- | 2213| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2214| nodeType | 'Button' | 是 | 创建Button类型的节点。 | 2215 2216**返回值：** 2217 2218| 类型 | 说明 | 2219| ------------------ | ------------------ | 2220| [Button](#button12) | Button类型的FrameNode节点。 | 2221 2222**示例：** 2223 2224<!--code_no_check--> 2225 2226```ts 2227typeNode.createNode(uiContext, 'Button'); 2228``` 2229 2230### ListItemGroup<sup>12+</sup> 2231type ListItemGroup = TypedFrameNode<ListItemGroupInterface, ListItemGroupAttribute> 2232 2233ListItemGroup类型的FrameNode节点类型。只允许添加ListItem类型子组件。 2234 2235**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2236 2237**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2238 2239| 类型 | 说明 | 2240| ------------------------------------------------------------ | ------------------------------------------------------------ | 2241| TypedFrameNode<ListItemGroupInterface, ListItemGroupAttribute> | 提供ListItemGroup类型FrameNode节点。<br/>**说明：**<br/> ListItemGroupInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为ListItemGroup组件的构造函数类型。 <br/> ListItemGroupAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回ListItemGroup组件的属性设置对象。 | 2242 2243### createNode('ListItemGroup')<sup>12+</sup> 2244createNode(context: UIContext, nodeType: 'ListItemGroup'): ListItemGroup 2245 2246创建ListItemGroup类型的FrameNode节点。 2247 2248**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2249 2250**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2251 2252**参数：** 2253 2254| 参数名 | 类型 | 必填 | 说明 | 2255| ------------------ | ------------------ | ------------------- | ------------------- | 2256| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2257| nodeType | 'ListItemGroup' | 是 | 创建ListItemGroup类型的节点。 | 2258 2259**返回值：** 2260 2261| 类型 | 说明 | 2262| ------------------ | ------------------ | 2263| [ListItemGroup](#listitemgroup12) | ListItemGroup类型的FrameNode节点。 | 2264 2265**示例：** 2266 2267<!--code_no_check--> 2268 2269```ts 2270typeNode.createNode(uiContext, 'ListItemGroup'); 2271``` 2272 2273### WaterFlow<sup>12+</sup> 2274type WaterFlow = TypedFrameNode<WaterFlowInterface, WaterFlowAttribute> 2275 2276WaterFlow类型的FrameNode节点类型。只允许添加FlowItem类型子组件。 2277 2278**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2279 2280**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2281 2282| 类型 | 说明 | 2283| ------------------------------------------------------------ | ------------------------------------------------------------ | 2284| TypedFrameNode<WaterFlowInterface, WaterFlowAttribute> | 提供WaterFlow类型FrameNode节点。<br/>**说明：**<br/> WaterFlowInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为WaterFlow组件的构造函数类型。 <br/> WaterFlowAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回WaterFlow组件的属性设置对象。 | 2285 2286### createNode('WaterFlow')<sup>12+</sup> 2287createNode(context: UIContext, nodeType: 'WaterFlow'): WaterFlow 2288 2289创建WaterFlow类型的FrameNode节点。 2290 2291**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2292 2293**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2294 2295**参数：** 2296 2297| 参数名 | 类型 | 必填 | 说明 | 2298| ------------------ | ------------------ | ------------------- | ------------------- | 2299| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2300| nodeType | 'WaterFlow' | 是 | 创建WaterFlow类型的节点。 | 2301 2302**返回值：** 2303 2304| 类型 | 说明 | 2305| ------------------ | ------------------ | 2306| [WaterFlow](#waterflow12) | WaterFlow类型的FrameNode节点。 | 2307 2308**示例：** 2309 2310<!--code_no_check--> 2311 2312```ts 2313typeNode.createNode(uiContext, 'WaterFlow'); 2314``` 2315 2316### FlowItem<sup>12+</sup> 2317type FlowItem = TypedFrameNode<FlowItemInterface, FlowItemAttribute> 2318 2319FlowItem类型的FrameNode节点类型。允许添加一个子组件。 2320 2321**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2322 2323**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2324 2325| 类型 | 说明 | 2326| ---------------------------------------------------------- | ------------------------------------------------------------ | 2327| TypedFrameNode<FlowItemInterface, FlowItemAttribute> | 提供FlowItem类型FrameNode节点。<br/>**说明：**<br/> FlowItemInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为FlowItem组件的构造函数类型。 <br/> FlowItemAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回FlowItem组件的属性设置对象。 | 2328 2329### createNode('FlowItem')<sup>12+</sup> 2330createNode(context: UIContext, nodeType: 'FlowItem'): FlowItem 2331 2332创建FlowItem类型的FrameNode节点。 2333 2334**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2335 2336**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2337 2338**参数：** 2339 2340| 参数名 | 类型 | 必填 | 说明 | 2341| ------------------ | ------------------ | ------------------- | ------------------- | 2342| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2343| nodeType | 'FlowItem' | 是 | 创建FlowItem类型的节点。 | 2344 2345**返回值：** 2346 2347| 类型 | 说明 | 2348| ------------------ | ------------------ | 2349| [FlowItem](#flowitem12) | FlowItem类型的FrameNode节点。 | 2350 2351**示例：** 2352 2353<!--code_no_check--> 2354 2355```ts 2356typeNode.createNode(uiContext, 'FlowItem'); 2357``` 2358 2359### XComponent<sup>12+</sup> 2360type XComponent = TypedFrameNode<XComponentInterface, XComponentAttribute> 2361 2362XComponent类型的FrameNode节点类型。 2363 2364**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2365 2366**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2367 2368| 类型 | 说明 | 2369| ------------------------------------------------------------ | ------------------------------------------------------------ | 2370| TypedFrameNode<XComponentInterface, XComponentAttribute> | 提供XComponent类型FrameNode节点。<br/>**说明：**<br/> XComponentInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为XComponent组件的构造函数类型。 <br/> XComponentAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回XComponent组件的属性设置对象。 | 2371 2372### createNode('XComponent')<sup>12+</sup> 2373createNode(context: UIContext, nodeType: 'XComponent'): XComponent 2374 2375创建XComponent类型的FrameNode节点。 2376 2377**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2378 2379**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2380 2381**参数：** 2382 2383| 参数名 | 类型 | 必填 | 说明 | 2384| ------------------ | ------------------ | ------------------- | ------------------- | 2385| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2386| nodeType | 'XComponent' | 是 | 创建XComponent类型的节点。 | 2387 2388**返回值：** 2389 2390| 类型 | 说明 | 2391| ------------------ | ------------------ | 2392| [XComponent](#xcomponent12) | XComponent类型的FrameNode节点。 | 2393 2394**示例：** 2395 2396<!--code_no_check--> 2397 2398```ts 2399typeNode.createNode(uiContext, 'XComponent'); 2400``` 2401 2402### createNode('XComponent')<sup>12+</sup> 2403createNode(context: UIContext, nodeType: 'XComponent', options: XComponentOptions): XComponent 2404 2405按照options中的配置参数创建XComponent类型的FrameNode节点。 2406 2407**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2408 2409**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2410 2411**参数：** 2412 2413| 参数名 | 类型 | 必填 | 说明 | 2414| ------------------ | ------------------ | ------------------- | ------------------- | 2415| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2416| nodeType | 'XComponent' | 是 | 创建XComponent类型的节点。 | 2417| options | [XComponentOptions](./arkui-ts/ts-basic-components-xcomponent.md#xcomponentoptions12) | 是 | 定义XComponent的具体配置参数。 | 2418 2419**返回值：** 2420 2421| 类型 | 说明 | 2422| ------------------ | ------------------ | 2423| [XComponent](#xcomponent12) | XComponent类型的FrameNode节点。 | 2424 2425**示例：** 2426 2427<!--code_no_check--> 2428 2429```ts 2430let controller: XComponentController = new XComponentController(); 2431let options: XComponentOptions = { 2432 type: XComponentType.TEXTURE, 2433 controller: controller 2434}; 2435typeNode.createNode(uiContext, 'XComponent', options); 2436``` 2437 2438### QRCode<sup>14+</sup> 2439type QRCode = TypedFrameNode<QRCodeInterface, QRCodeAttribute> 2440 2441QRCode类型的FrameNode节点类型。 2442 2443**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2444 2445**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2446 2447| 类型 | 说明 | 2448| ----------------------------- | -------------------- | 2449| TypedFrameNode<QRCodeInterface, QRCodeAttribute> | 提供QRCode类型FrameNode节点。<br/>**说明：**<br/> QRCodeInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为QRCode组件的构造函数类型。 <br/> QRCodeAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回QRCode组件的属性设置对象。 | 2450 2451### createNode('QRCode')<sup>14+</sup> 2452createNode(context: UIContext, nodeType: 'QRCode'): QRCode 2453 2454创建QRCode类型的FrameNode节点。 2455 2456**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2457 2458**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2459 2460**参数：** 2461 2462| 参数名 | 类型 | 必填 | 说明 | 2463| ------------------ | ------------------ | ------------------- | ------------------- | 2464| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2465| nodeType | 'QRCode' | 是 | 创建QRCode类型的节点。 | 2466 2467**返回值：** 2468 2469| 类型 | 说明 | 2470| ------------------ | ------------------ | 2471| [QRCode](#qrcode14) | QRCode类型的FrameNode节点。 | 2472 2473**示例：** 2474 2475```ts 2476typeNode.createNode(uiContext, 'QRCode'); 2477``` 2478 2479### Badge<sup>14+</sup> 2480type Badge = TypedFrameNode<BadgeInterface, BadgeAttribute> 2481 2482Badge类型的FrameNode节点类型。 2483 2484**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2485 2486**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2487 2488| 类型 | 说明 | 2489| ----------------------------- | -------------------- | 2490| TypedFrameNode<BadgeInterface, BadgeAttribute> | 提供Badge类型FrameNode节点。<br/>**说明：**<br/> BadgeInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Badge组件的构造函数类型。 <br/> BadgeAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Badge组件的属性设置对象。 | 2491 2492### createNode('Badge')<sup>14+</sup> 2493createNode(context: UIContext, nodeType: 'Badge'): Badge 2494 2495创建Badge类型的FrameNode节点。 2496 2497**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2498 2499**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2500 2501**参数：** 2502 2503| 参数名 | 类型 | 必填 | 说明 | 2504| ------------------ | ------------------ | ------------------- | ------------------- | 2505| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2506| nodeType | 'Badge' | 是 | 创建Badge类型的节点。 | 2507 2508**返回值：** 2509 2510| 类型 | 说明 | 2511| ------------------ | ------------------ | 2512| [Badge](#badge14) | Badge类型的FrameNode节点。 | 2513 2514**示例：** 2515 2516<!--code_no_check--> 2517 2518```ts 2519typeNode.createNode(uiContext, 'Badge'); 2520``` 2521 2522### Grid<sup>14+</sup> 2523type Grid = TypedFrameNode<GridInterface, GridAttribute> 2524 2525Grid类型的FrameNode节点类型。 2526 2527**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2528 2529**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2530 2531| 类型 | 说明 | 2532| ----------------------------- | -------------------- | 2533| TypedFrameNode<GridInterface, GridAttribute> | 提供Grid类型FrameNode节点。<br/>**说明：**<br/> GridInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Grid组件的构造函数类型。 <br/> GridAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Grid组件的属性设置对象。 | 2534 2535### createNode('Grid')<sup>14+</sup> 2536createNode(context: UIContext, nodeType: 'Grid'): Grid 2537 2538创建Grid类型的FrameNode节点。 2539 2540**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2541 2542**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2543 2544**参数：** 2545 2546| 参数名 | 类型 | 必填 | 说明 | 2547| ------------------ | ------------------ | ------------------- | ------------------- | 2548| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2549| nodeType | 'Grid' | 是 | 创建Grid类型的节点。 | 2550 2551**返回值：** 2552 2553| 类型 | 说明 | 2554| ------------------ | ------------------ | 2555| [Grid](#grid14) | Grid类型的FrameNode节点。 | 2556 2557**示例： ** 2558 2559<!--code_no_check--> 2560 2561```ts 2562typeNode.createNode(uiContext, 'Grid'); 2563``` 2564 2565### GridItem<sup>14+</sup> 2566type GridItem = TypedFrameNode<GridItemInterface, GridItemAttribute> 2567 2568GridItem类型的FrameNode节点类型。 2569 2570**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2571 2572**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2573 2574| 类型 | 说明 | 2575| ----------------------------- | -------------------- | 2576| TypedFrameNode<GridItemInterface, GridItemAttribute> | 提供GridItem类型FrameNode节点。<br/>**说明：**<br/> GridItemInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为GridItem组件的构造函数类型。 <br/> GridItemAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回GridItem组件的属性设置对象。 | 2577 2578### createNode('GridItem')<sup>14+</sup> 2579createNode(context: UIContext, nodeType: 'GridItem'): GridItem 2580 2581创建GridItem类型的FrameNode节点。 2582 2583**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2584 2585**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2586 2587**参数：** 2588 2589| 参数名 | 类型 | 必填 | 说明 | 2590| ------------------ | ------------------ | ------------------- | ------------------- | 2591| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2592| nodeType | 'GridItem' | 是 | 创建GridItem类型的节点。 | 2593 2594**返回值：** 2595 2596| 类型 | 说明 | 2597| ------------------ | ------------------ | 2598| [GridItem](#griditem14) | GridItem类型的FrameNode节点。 | 2599 2600**示例：** 2601 2602<!--code_no_check--> 2603 2604```ts 2605typeNode.createNode(uiContext, 'GridItem'); 2606``` 2607 2608### TextClock<sup>14+</sup> 2609type TextClock = TypedFrameNode<TextClockInterface, TextClockAttribute> 2610 2611TextClock类型的FrameNode节点类型。 2612 2613**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2614 2615**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2616 2617| 类型 | 说明 | 2618| ----------------------------- | -------------------- | 2619| TypedFrameNode<TextClockInterface, TextClockAttribute> | 提供TextClock类型FrameNode节点。<br/>**说明：**<br/> TextClockInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为TextClock组件的构造函数类型。 <br/> TextClockAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回TextClock组件的属性设置对象。 | 2620 2621### createNode('TextClock')<sup>14+</sup> 2622createNode(context: UIContext, nodeType: 'TextClock'): TextClock 2623 2624创建TextClock类型的FrameNode节点。 2625 2626**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2627 2628**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2629 2630**参数：** 2631 2632| 参数名 | 类型 | 必填 | 说明 | 2633| ------------------ | ------------------ | ------------------- | ------------------- | 2634| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2635| nodeType | 'TextClock' | 是 | 创建TextClock类型的节点。 | 2636 2637**返回值：** 2638 2639| 类型 | 说明 | 2640| ------------------ | ------------------ | 2641| [TextClock](#textclock14) | TextClock类型的FrameNode节点。 | 2642 2643**示例： ** 2644 2645<!--code_no_check--> 2646 2647```ts 2648typeNode.createNode(uiContext, 'TextClock'); 2649``` 2650 2651### TextTimer<sup>14+</sup> 2652type TextTimer = TypedFrameNode<TextTimerInterface, TextTimerAttribute> 2653 2654TextTimer类型的FrameNode节点类型。 2655 2656**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2657 2658**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2659 2660| 类型 | 说明 | 2661| ----------------------------- | -------------------- | 2662| TypedFrameNode<TextTimerInterface, TextTimerAttribute> | 提供TextTimer类型FrameNode节点。<br/>**说明：**<br/> TextTimerInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为TextTimer组件的构造函数类型。 <br/> TextTimerAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回TextTimer组件的属性设置对象。 | 2663 2664### createNode('TextTimer')<sup>14+</sup> 2665createNode(context: UIContext, nodeType: 'TextTimer'): TextTimer 2666 2667创建TextTimer类型的FrameNode节点。 2668 2669**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2670 2671**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2672 2673**参数：** 2674 2675| 参数名 | 类型 | 必填 | 说明 | 2676| ------------------ | ------------------ | ------------------- | ------------------- | 2677| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2678| nodeType | 'TextTimer' | 是 | 创建TextTimer类型的节点。 | 2679 2680**返回值：** 2681 2682| 类型 | 说明 | 2683| ------------------ | ------------------ | 2684| [TextTimer](#texttimer14) | TextTimer类型的FrameNode节点。 | 2685 2686**示例：** 2687 2688<!--code_no_check--> 2689 2690```ts 2691typeNode.createNode(uiContext, 'TextTimer'); 2692``` 2693 2694### Marquee<sup>14+</sup> 2695type Marquee = TypedFrameNode<MarqueeInterface, MarqueeAttribute> 2696 2697Marquee类型的FrameNode节点类型。 2698 2699**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2700 2701**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2702 2703| 类型 | 说明 | 2704| ----------------------------- | -------------------- | 2705| TypedFrameNode<MarqueeInterface, MarqueeAttribute> | 提供Marquee类型FrameNode节点。<br/>**说明：**<br/> MarqueeInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Marquee组件的构造函数类型。 <br/> MarqueeAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Marquee组件的属性设置对象。 | 2706 2707### createNode('Marquee')<sup>14+</sup> 2708createNode(context: UIContext, nodeType: 'Marquee'): Marquee 2709 2710创建Marquee类型的FrameNode节点。 2711 2712**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2713 2714**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2715 2716**参数：** 2717 2718| 参数名 | 类型 | 必填 | 说明 | 2719| ------------------ | ------------------ | ------------------- | ------------------- | 2720| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2721| nodeType | 'Marquee' | 是 | 创建Marquee类型的节点。 | 2722 2723**返回值：** 2724 2725| 类型 | 说明 | 2726| ------------------ | ------------------ | 2727| [Marquee](#marquee14) | Marquee类型的FrameNode节点。 | 2728 2729**示例：** 2730 2731<!--code_no_check--> 2732 2733```ts 2734typeNode.createNode(uiContext, 'Marquee'); 2735``` 2736 2737### TextArea<sup>14+</sup> 2738type TextArea = TypedFrameNode<TextAreaInterface, TextAreaAttribute> 2739 2740TextArea类型的FrameNode节点类型。 2741 2742**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2743 2744**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2745 2746| 类型 | 说明 | 2747| ----------------------------- | -------------------- | 2748| TypedFrameNode<TextAreaInterface, TextAreaAttribute> | 提供TextArea类型FrameNode节点。<br/>**说明：**<br/> TextAreaInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为TextArea组件的构造函数类型。 <br/> TextAreaAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回TextArea组件的属性设置对象。 | 2749 2750### createNode('TextArea')<sup>14+</sup> 2751createNode(context: UIContext, nodeType: 'TextArea'): TextArea 2752 2753创建TextArea类型的FrameNode节点。 2754 2755**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2756 2757**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2758 2759**参数：** 2760 2761| 参数名 | 类型 | 必填 | 说明 | 2762| ------------------ | ------------------ | ------------------- | ------------------- | 2763| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2764| nodeType | 'TextArea' | 是 | 创建TextArea类型的节点。 | 2765 2766**返回值：** 2767 2768| 类型 | 说明 | 2769| ------------------ | ------------------ | 2770| [TextArea](#textarea14) | TextArea类型的FrameNode节点。 | 2771 2772**示例：** 2773 2774<!--code_no_check--> 2775 2776```ts 2777typeNode.createNode(uiContext, 'TextArea'); 2778``` 2779 2780### SymbolGlyph<sup>14+</sup> 2781type SymbolGlyph = TypedFrameNode<SymbolGlyphInterface, SymbolGlyphAttribute> 2782 2783SymbolGlyph类型的FrameNode节点类型。 2784 2785**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2786 2787**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2788 2789| 类型 | 说明 | 2790| ----------------------------- | -------------------- | 2791| TypedFrameNode<SymbolGlyphInterface, SymbolGlyphAttribute> | 提供SymbolGlyph类型FrameNode节点。<br/>**说明：**<br/> SymbolGlyphInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为SymbolGlyph组件的构造函数类型。 <br/> SymbolGlyphAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回SymbolGlyph组件的属性设置对象。 | 2792 2793### createNode('SymbolGlyph')<sup>14+</sup> 2794createNode(context: UIContext, nodeType: 'SymbolGlyph'): SymbolGlyph 2795 2796创建SymbolGlyph类型的FrameNode节点。 2797 2798**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 2799 2800**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2801 2802**参数：** 2803 2804| 参数名 | 类型 | 必填 | 说明 | 2805| ------------------ | ------------------ | ------------------- | ------------------- | 2806| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2807| nodeType | 'SymbolGlyph' | 是 | 创建SymbolGlyph类型的节点。 | 2808 2809**返回值：** 2810 2811| 类型 | 说明 | 2812| ------------------ | ------------------ | 2813| [SymbolGlyph](#symbolglyph14) | SymbolGlyph类型的FrameNode节点。 | 2814 2815**示例：** 2816 2817<!--code_no_check--> 2818 2819```ts 2820typeNode.createNode(uiContext, 'SymbolGlyph'); 2821``` 2822 2823## NodeAdapter<sup>12+</sup> 2824 2825NodeAdapter提供FrameNode的数据懒加载能力。 2826 2827> **说明：** 2828> 2829> 入参不能为负数，入参为负数时不做处理。 2830 2831**示例：** 2832 2833请参考[NodeAdapter使用示例](#nodeadapter使用示例)。 2834 2835### constructor<sup>12+</sup> 2836 2837constructor() 2838 2839NodeAdapter的构造函数。 2840 2841**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2842 2843**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2844 2845### dispose<sup>12+</sup> 2846 2847dispose(): void 2848 2849立即释放当前的NodeAdapter。如果是已绑定的状态，会先进行解绑操作，再释放当前的NodeAdapter。 2850 2851**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2852 2853**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2854 2855### totalNodeCount<sup>12+</sup> 2856 2857set totalNodeCount(count: number) 2858 2859设置数据节点总数。 2860 2861**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2862 2863**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2864 2865**参数：** 2866 2867| 参数名 | 类型 | 必填 | 说明 | 2868| ------- | ------------------------------------------------------ | ---- | ---------------- | 2869| count | number | 是 | 数据节点总数。 | 2870 2871get totalNodeCount(): number 2872 2873获取数据节点总数。 2874 2875**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2876 2877**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2878 2879**返回值：** 2880 2881| 类型 | 说明 | 2882| ----------------- | ------------ | 2883| number | 数据节点总数。 | 2884 2885### reloadAllItems<sup>12+</sup> 2886 2887reloadAllItems(): void 2888 2889重新加载全部数据操作。 2890 2891**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2892 2893**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2894 2895### reloadItem<sup>12+</sup> 2896 2897reloadItem(start: number, count: number): void 2898 2899从索引值开始重新加载指定数量的节点数据。 2900 2901**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2902 2903**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2904 2905**参数：** 2906 2907| 参数名 | 类型 | 必填 | 说明 | 2908| ------- | ------------------------------------------------------ | ---- | ---------------- | 2909| start | number | 是 | 重新加载的节点开始索引值。 | 2910| count | number | 是 | 重新加载数据节点的数量。 | 2911 2912### removeItem<sup>12+</sup> 2913 2914removeItem(start: number, count: number): void 2915 2916从索引值开始删除指定数量的节点数据。 2917 2918**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2919 2920**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2921 2922**参数：** 2923 2924| 参数名 | 类型 | 必填 | 说明 | 2925| ------- | ------------------------------------------------------ | ---- | ---------------- | 2926| start | number | 是 | 删除的节点开始索引值。 | 2927| count | number | 是 | 删除数据节点的数量。 | 2928 2929### insertItem<sup>12+</sup> 2930 2931insertItem(start: number, count: number): void 2932 2933从索引值开始新增指定数量的节点数据。 2934 2935**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2936 2937**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2938 2939**参数：** 2940 2941| 参数名 | 类型 | 必填 | 说明 | 2942| ------- | ------------------------------------------------------ | ---- | ---------------- | 2943| start | number | 是 | 新增的节点开始索引值。 | 2944| count | number | 是 | 新增数据节点的数量。 | 2945 2946### moveItem<sup>12+</sup> 2947 2948moveItem(from: number, to: number): void 2949 2950将数据从原始索引移动到目的索引。 2951 2952**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2953 2954**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2955 2956**参数：** 2957 2958| 参数名 | 类型 | 必填 | 说明 | 2959| ------- | ------------------------------------------------------ | ---- | ---------------- | 2960| from | number | 是 | 数据移动的原始索引值。 | 2961| to | number | 是 | 数据移动的目的索引值。 | 2962 2963### getAllAvailableItems<sup>12+</sup> 2964 2965getAllAvailableItems(): Array<FrameNode> 2966 2967获取所有有效数据。 2968 2969**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2970 2971**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2972 2973**返回值：** 2974 2975| 类型 | 说明 | 2976| ----------------- | ------------ | 2977| Array<FrameNode> | FrameNode数据节点集合。 | 2978 2979### onAttachToNode<sup>12+</sup> 2980 2981onAttachToNode?(target: FrameNode): void 2982 2983FrameNode绑定NodeAdapter时回调。 2984 2985**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2986 2987**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2988 2989**参数：** 2990 2991| 参数名 | 类型 | 必填 | 说明 | 2992| ------- | ------------------------------------------------------ | ---- | ---------------- | 2993| target | FrameNode | 是 | 绑定NodeAdapter的FrameNode节点。 | 2994 2995### onDetachFromNode<sup>12+</sup> 2996 2997onDetachFromNode?(): void 2998 2999解除绑定时回调。 3000 3001**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3002 3003**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3004 3005### onGetChildId<sup>12+</sup> 3006 3007onGetChildId?(index: number): number 3008 3009节点首次加载或新节点滑入时回调。用于生成自定义的Id，需要开发者自行保证Id的唯一性。 3010 3011**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3012 3013**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3014 3015**参数：** 3016 3017| 参数名 | 类型 | 必填 | 说明 | 3018| ------- | ------------------------------------------------------ | ---- | ---------------- | 3019| index | number | 是 | 加载节点索引值。 | 3020 3021**返回值：** 3022 3023| 类型 | 说明 | 3024| ----------------- | ------------ | 3025| number | 返回开发者自定义生成的Id，需要开发者自行保证Id的唯一性。 | 3026 3027### onCreateChild<sup>12+</sup> 3028 3029onCreateChild?(index: number): FrameNode 3030 3031节点首次加载或新节点滑入时回调。 3032 3033**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3034 3035**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3036 3037**参数：** 3038 3039| 参数名 | 类型 | 必填 | 说明 | 3040| ------- | ------------------------------------------------------ | ---- | ---------------- | 3041| index | number | 是 | 加载节点索引值。 | 3042 3043**返回值：** 3044 3045| 类型 | 说明 | 3046| ----------------- | ------------ | 3047| FrameNode | 返回开发者创建的FrameNode节点。 | 3048 3049### onDisposeChild<sup>12+</sup> 3050 3051onDisposeChild?(id: number, node: FrameNode): void 3052 3053子节点即将销毁时回调。 3054 3055**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3056 3057**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3058 3059**参数：** 3060 3061| 参数名 | 类型 | 必填 | 说明 | 3062| ------- | ------------------------------------------------------ | ---- | ---------------- | 3063| id | number | 是 | 即将销毁的子节点id。 | 3064| node | FrameNode | 是 | 即将销毁的FrameNode节点。 | 3065 3066### onUpdateChild<sup>12+</sup> 3067 3068onUpdateChild?(id: number, node: FrameNode): void 3069 3070重新加载的数据节点被复用时回调。 3071 3072**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3073 3074**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3075 3076**参数：** 3077 3078| 参数名 | 类型 | 必填 | 说明 | 3079| ------- | ------------------------------------------------------ | ---- | ---------------- | 3080| id | number | 是 | 复用节点索引值。 | 3081| node | FrameNode | 是 | 被复用的FrameNode节点。 | 3082 3083### attachNodeAdapter<sup>12+</sup> 3084 3085static attachNodeAdapter(adapter: NodeAdapter, node: FrameNode): boolean 3086 3087给FrameNode绑定一个NodeAdapter。一个节点只能绑定一个NodeAdapter。已经绑定NodeAdapter的再次绑定会失败并返回false。 3088 3089**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3090 3091**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3092 3093**参数：** 3094 3095| 参数名 | 类型 | 必填 | 说明 | 3096| ------- | ------------------------------------------------------ | ---- | ---------------- | 3097| adapter | [NodeAdapter](#nodeadapter12) | 是 | 定义懒加载的NodeAdapter类。 | 3098| node | FrameNode | 是 | 绑定的FrameNode节点。 | 3099 3100**返回值：** 3101 3102| 类型 | 说明 | 3103| ----------------- | ------------ | 3104| boolean | 绑定结果，返回true绑定成功，false绑定失败。 | 3105 3106### detachNodeAdapter<sup>12+</sup> 3107 3108static detachNodeAdapter(node: FrameNode): void 3109 3110解除绑定操作，解除FrameNode节点绑定的NodeAdapter。 3111 3112**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3113 3114**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3115 3116**参数：** 3117 3118| 参数名 | 类型 | 必填 | 说明 | 3119| ------- | ------------------------------------------------------ | ---- | ---------------- | 3120| node | FrameNode | 是 | 要解除绑定的FrameNode节点。 | 3121 3122## 自定义具体类型节点示例 3123 3124以Text节点为例，创建Text类型节点。 3125 3126```ts 3127import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 3128 3129class MyNodeController extends NodeController { 3130 makeNode(uiContext: UIContext): FrameNode | null { 3131 let node = new FrameNode(uiContext); 3132 node.commonAttribute.width(100) 3133 .height(50) 3134 .borderColor(Color.Gray) 3135 .borderWidth(1) 3136 .margin({ left: 10 }); 3137 let col = typeNode.createNode(uiContext, 'Column'); 3138 col.initialize({ space: 5 }) 3139 .width('100%').height('100%').margin({ top: 5 }); 3140 node.appendChild(col); 3141 let text = typeNode.createNode(uiContext, 'Text'); 3142 text.initialize("Hello").fontColor(Color.Blue).fontSize(14); 3143 col.appendChild(text); 3144 return node; 3145 } 3146} 3147 3148@Entry 3149@Component 3150struct FrameNodeTypeTest { 3151 private myNodeController: MyNodeController = new MyNodeController(); 3152 3153 build() { 3154 Row() { 3155 NodeContainer(this.myNodeController); 3156 } 3157 } 3158} 3159``` 3160 3161 3162 3163## 节点操作示例 3164```ts 3165import { NodeController, FrameNode, UIContext } from '@kit.ArkUI'; 3166import { BusinessError } from '@kit.BasicServicesKit'; 3167 3168const TEST_TAG : string = "FrameNode" 3169class MyNodeController extends NodeController { 3170 public frameNode: FrameNode | null = null; 3171 public childList:Array<FrameNode> = new Array<FrameNode>(); 3172 private rootNode: FrameNode | null = null; 3173 private uiContext: UIContext | null = null; 3174 private childrenCount: number = 0; 3175 makeNode(uiContext: UIContext): FrameNode | null { 3176 this.rootNode = new FrameNode(uiContext); 3177 this.childrenCount = this.childrenCount + 1; 3178 this.uiContext = uiContext; 3179 this.frameNode = new FrameNode(uiContext); 3180 this.rootNode.appendChild(this.frameNode); 3181 for (let i = 0; i < 10; i++) { 3182 let childNode = new FrameNode(uiContext); 3183 this.childList.push(childNode); 3184 this.frameNode.appendChild(childNode); 3185 } 3186 return this.rootNode; 3187 } 3188 appendChild() 3189 { 3190 let childNode = new FrameNode(this.uiContext!); 3191 this.rootNode!.appendChild(childNode); 3192 this.childrenCount = this.childrenCount + 1; 3193 } 3194 insertChildAfter(index : number) 3195 { 3196 let insertNode = new FrameNode(this.uiContext!); 3197 let childNode = this.rootNode!.getChild(index); 3198 this.rootNode!.insertChildAfter(insertNode,childNode); 3199 this.childrenCount = this.childrenCount + 1; 3200 } 3201 removeChild(index : number) 3202 { 3203 let childNode = this.rootNode!.getChild(index); 3204 if(childNode == null) 3205 { 3206 console.log(`${TEST_TAG} getchild at index {${index}} : fail`); 3207 return; 3208 } 3209 this.rootNode!.removeChild(childNode); 3210 this.childrenCount = this.childrenCount - 1; 3211 } 3212 getChildNumber() 3213 { 3214 console.log(TEST_TAG + " getChildNumber " + this.rootNode!.getChildrenCount()) 3215 console.log(TEST_TAG + " children count is " + this.childrenCount); 3216 3217 } 3218 clearChildren() 3219 { 3220 this.rootNode!.clearChildren(); 3221 } 3222 searchFrameNode() 3223 { 3224 if(this.rootNode!.getFirstChild() === null) 3225 { 3226 console.log(TEST_TAG + " the rootNode does not have child node.") 3227 } 3228 if(this.rootNode!.getFirstChild() === this.frameNode) { 3229 console.log(TEST_TAG + " getFirstChild result: success. The first child of the rootNode is equals to frameNode."); 3230 } else { 3231 console.log(TEST_TAG + " getFirstChild result: fail. The first child of the rootNode is not equals to frameNode."); 3232 } 3233 if(this.frameNode!.getChild(5) === this.frameNode!.getChild(4)!.getNextSibling()) { 3234 console.log(TEST_TAG + " getNextSibling result: success."); 3235 } else { 3236 console.log(TEST_TAG + " getNextSibling result: fail."); 3237 } 3238 if(this.frameNode!.getChild(3) === this.frameNode!.getChild(4)!.getPreviousSibling()) { 3239 console.log(TEST_TAG + " getPreviousSibling result: success."); 3240 } else { 3241 console.log(TEST_TAG + " getPreviousSibling result: fail."); 3242 } 3243 if(this.rootNode!.getFirstChild() !== null && this.rootNode!.getFirstChild()!.getParent() === this.rootNode) { 3244 console.log(TEST_TAG + " getParent result: success."); 3245 } else { 3246 console.log(TEST_TAG + " getParent result: fail."); 3247 } 3248 if(this.rootNode!.getParent() !== undefined || this.rootNode!.getParent() !== null) 3249 { 3250 console.log(TEST_TAG + " get ArkTsNode success.") 3251 console.log(TEST_TAG + " check rootNode whether is modifiable " + this.rootNode!.isModifiable()) 3252 console.log(TEST_TAG + " check getParent whether is modifiable " + this.rootNode!.getParent()!.isModifiable()) 3253 } else { 3254 console.log(TEST_TAG + " get ArkTsNode fail."); 3255 } 3256 } 3257 getPositionToWindow() 3258 { 3259 let positionToWindow = this.rootNode?.getPositionToWindow(); 3260 console.log(TEST_TAG + JSON.stringify(positionToWindow)); 3261 } 3262 getPositionToParent() 3263 { 3264 let positionToParent = this.rootNode?.getPositionToParent(); 3265 console.log(TEST_TAG + JSON.stringify(positionToParent)); 3266 } 3267 getPositionToScreen() 3268 { 3269 let positionToScreen = this.rootNode?.getPositionToScreen(); 3270 console.log(TEST_TAG + JSON.stringify(positionToScreen)); 3271 } 3272 getPositionToWindowWithTransform() 3273 { 3274 let positionToWindowWithTransform = this.rootNode?.getPositionToWindowWithTransform(); 3275 console.log(TEST_TAG + JSON.stringify(positionToWindowWithTransform)); 3276 } 3277 getPositionToParentWithTransform() 3278 { 3279 let positionToParentWithTransform = this.rootNode?.getPositionToParentWithTransform(); 3280 console.log(TEST_TAG + JSON.stringify(positionToParentWithTransform)); 3281 } 3282 getPositionToScreenWithTransform() 3283 { 3284 let positionToScreenWithTransform = this.rootNode?.getPositionToScreenWithTransform(); 3285 console.log(TEST_TAG + JSON.stringify(positionToScreenWithTransform)); 3286 } 3287 getMeasuredSize() 3288 { 3289 let measuredSize = this.frameNode?.getMeasuredSize(); 3290 console.log(TEST_TAG + JSON.stringify(measuredSize)); 3291 } 3292 getLayoutPosition() 3293 { 3294 let layoutPosition = this.frameNode?.getLayoutPosition(); 3295 console.log(TEST_TAG + JSON.stringify(layoutPosition)); 3296 } 3297 getUserConfigBorderWidth() 3298 { 3299 let userConfigBorderWidth = this.frameNode?.getUserConfigBorderWidth(); 3300 console.log(TEST_TAG + JSON.stringify(userConfigBorderWidth)); 3301 } 3302 getUserConfigPadding() 3303 { 3304 let userConfigPadding = this.frameNode?.getUserConfigPadding(); 3305 console.log(TEST_TAG + JSON.stringify(userConfigPadding)); 3306 } 3307 getUserConfigMargin() 3308 { 3309 let userConfigMargin = this.frameNode?.getUserConfigMargin(); 3310 console.log(TEST_TAG + JSON.stringify(userConfigMargin)); 3311 } 3312 getUserConfigSize() 3313 { 3314 let userConfigSize = this.frameNode?.getUserConfigSize(); 3315 console.log(TEST_TAG + JSON.stringify(userConfigSize)); 3316 } 3317 getId() 3318 { 3319 let id = this.frameNode?.getId(); 3320 console.log(TEST_TAG + id); 3321 } 3322 getUniqueId() 3323 { 3324 let uniqueId = this.frameNode?.getUniqueId(); 3325 console.log(TEST_TAG + uniqueId); 3326 } 3327 getNodeType() 3328 { 3329 let nodeType = this.frameNode?.getNodeType(); 3330 console.log(TEST_TAG + nodeType); 3331 } 3332 getOpacity() 3333 { 3334 let opacity = this.frameNode?.getOpacity(); 3335 console.log(TEST_TAG + JSON.stringify(opacity)); 3336 } 3337 isVisible() 3338 { 3339 let visible = this.frameNode?.isVisible(); 3340 console.log(TEST_TAG + JSON.stringify(visible)); 3341 } 3342 isClipToFrame() 3343 { 3344 let clipToFrame = this.frameNode?.isClipToFrame(); 3345 console.log(TEST_TAG + JSON.stringify(clipToFrame)); 3346 } 3347 isAttached() 3348 { 3349 let attached = this.frameNode?.isAttached(); 3350 console.log(TEST_TAG + JSON.stringify(attached)); 3351 } 3352 getInspectorInfo() 3353 { 3354 let inspectorInfo = this.frameNode?.getInspectorInfo(); 3355 console.log(TEST_TAG + JSON.stringify(inspectorInfo)); 3356 } 3357 3358 throwError() 3359 { 3360 try{ 3361 this.rootNode!.getParent()!.clearChildren(); 3362 } catch (err) { 3363 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " +(err as BusinessError).message); 3364 } 3365 try{ 3366 this.rootNode!.getParent()!.appendChild(new FrameNode(this.uiContext)); 3367 } catch (err) { 3368 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " +(err as BusinessError).message); 3369 } 3370 try{ 3371 this.rootNode!.getParent()!.removeChild(this.rootNode!.getParent()!.getChild(0)); 3372 } catch (err) { 3373 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " +(err as BusinessError).message); 3374 } 3375 } 3376} 3377 3378@Entry 3379@Component 3380struct Index { 3381 private myNodeController: MyNodeController = new MyNodeController(); 3382 @State index : number = 0; 3383 build() { 3384 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 3385 Column(){ 3386 Row() 3387 { 3388 Button("ADD") 3389 .onClick(()=>{this.index++;}) 3390 Button("DEC") 3391 .onClick(()=>{this.index--;}) 3392 } 3393 Text("Current index is " + this.index) 3394 .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) 3395 .width('100%').fontSize(16) 3396 } 3397 Button("appendChild") 3398 .width(300) 3399 .onClick(()=>{ 3400 this.myNodeController.appendChild(); 3401 }) 3402 Button("insertChildAfter") 3403 .width(300) 3404 .onClick(()=>{ 3405 this.myNodeController.insertChildAfter(this.index); 3406 }) 3407 Button("removeChild") 3408 .width(300) 3409 .onClick(()=>{ 3410 this.myNodeController.removeChild(this.index); 3411 }) 3412 Button("clearChildren") 3413 .width(300) 3414 .onClick(()=>{ 3415 this.myNodeController.clearChildren(); 3416 }) 3417 Button("getChildNumber") 3418 .width(300) 3419 .onClick(()=>{ 3420 this.myNodeController.getChildNumber(); 3421 }) 3422 Button("searchFrameNode") 3423 .width(300) 3424 .onClick(()=>{ 3425 this.myNodeController.searchFrameNode(); 3426 }) 3427 Button("getPositionToWindow") 3428 .width(300) 3429 .onClick(()=>{ 3430 this.myNodeController.getPositionToWindow(); 3431 }) 3432 Button("getPositionToParent") 3433 .width(300) 3434 .onClick(()=>{ 3435 this.myNodeController.getPositionToParent(); 3436 }) 3437 Button("getPositionToScreen") 3438 .width(300) 3439 .onClick(()=>{ 3440 this.myNodeController.getPositionToScreen(); 3441 }) 3442 Button("getPositionToParentWithTransform") 3443 .width(300) 3444 .onClick(()=>{ 3445 this.myNodeController.getPositionToParentWithTransform(); 3446 }) 3447 Button("getPositionToWindowWithTransform") 3448 .width(300) 3449 .onClick(()=>{ 3450 this.myNodeController.getPositionToWindowWithTransform(); 3451 }) 3452 Button("getPositionToScreenWithTransform") 3453 .width(300) 3454 .onClick(()=>{ 3455 this.myNodeController.getPositionToScreenWithTransform(); 3456 }) 3457 Button("getMeasuredSize") 3458 .width(300) 3459 .onClick(()=>{ 3460 this.myNodeController.getMeasuredSize(); 3461 }) 3462 Button("getLayoutPosition") 3463 .width(300) 3464 .onClick(()=>{ 3465 this.myNodeController.getLayoutPosition(); 3466 }) 3467 Button("getUserConfigBorderWidth") 3468 .width(300) 3469 .onClick(()=>{ 3470 this.myNodeController.getUserConfigBorderWidth(); 3471 }) 3472 Button("getUserConfigPadding") 3473 .width(300) 3474 .onClick(()=>{ 3475 this.myNodeController.getUserConfigPadding(); 3476 }) 3477 Button("getUserConfigMargin") 3478 .width(300) 3479 .onClick(()=>{ 3480 this.myNodeController.getUserConfigMargin(); 3481 }) 3482 Button("getUserConfigSize") 3483 .width(300) 3484 .onClick(()=>{ 3485 this.myNodeController.getUserConfigSize(); 3486 }) 3487 Button("getId") 3488 .width(300) 3489 .onClick(()=>{ 3490 this.myNodeController.getId(); 3491 }) 3492 Button("getUniqueId") 3493 .width(300) 3494 .onClick(()=>{ 3495 this.myNodeController.getUniqueId(); 3496 }) 3497 Button("getNodeType") 3498 .width(300) 3499 .onClick(()=>{ 3500 this.myNodeController.getNodeType(); 3501 }) 3502 Button("getOpacity") 3503 .width(300) 3504 .onClick(()=>{ 3505 this.myNodeController.getOpacity(); 3506 }) 3507 Button("isVisible") 3508 .width(300) 3509 .onClick(()=>{ 3510 this.myNodeController.isVisible(); 3511 }) 3512 Button("isClipToFrame") 3513 .width(300) 3514 .onClick(()=>{ 3515 this.myNodeController.isClipToFrame(); 3516 }) 3517 Button("isAttached") 3518 .width(300) 3519 .onClick(()=>{ 3520 this.myNodeController.isAttached(); 3521 }) 3522 Button("getInspectorInfo") 3523 .width(300) 3524 .onClick(()=>{ 3525 this.myNodeController.getInspectorInfo(); 3526 }) 3527 Button("getCustomProperty") 3528 .width(300) 3529 .onClick(()=>{ 3530 const uiContext: UIContext = this.getUIContext(); 3531 if (uiContext) { 3532 const node: FrameNode | null = uiContext.getFrameNodeById("Test_Button") || null; 3533 if (node) { 3534 for (let i = 1; i < 4; i++) { 3535 const key = 'customProperty' + i; 3536 const property = node.getCustomProperty(key); 3537 console.log(TEST_TAG + key, JSON.stringify(property)); 3538 } 3539 } 3540 } 3541 }) 3542 .id('Test_Button') 3543 .customProperty('customProperty1', { 3544 'number': 10, 3545 'string': 'this is a string', 3546 'bool': true, 3547 'object': { 3548 'name': 'name', 3549 'value': 100 3550 } 3551 }) 3552 .customProperty('customProperty2', {}) 3553 .customProperty('customProperty2', undefined) 3554 Button("throwError") 3555 .width(300) 3556 .onClick(()=>{ 3557 this.myNodeController.throwError(); 3558 }) 3559 Column(){ 3560 Text("This is a NodeContainer.") 3561 .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) 3562 .width('100%').fontSize(16) 3563 NodeContainer(this.myNodeController) 3564 .borderWidth(1) 3565 .width(300) 3566 .height(100) 3567 } 3568 } 3569 .padding({ left: 35, right: 35, top: 35, bottom: 35 }) 3570 .width("100%") 3571 .height("100%") 3572 } 3573} 3574``` 3575## 基础事件示例 3576```ts 3577import { NodeController, FrameNode } from '@kit.ArkUI'; 3578 3579class MyNodeController extends NodeController { 3580 public rootNode: FrameNode | null = null; 3581 3582 makeNode(uiContext: UIContext): FrameNode | null { 3583 this.rootNode = new FrameNode(uiContext); 3584 this.rootNode.commonAttribute.width(100) 3585 .height(100) 3586 .backgroundColor(Color.Pink); 3587 this.addCommonEvent(this.rootNode); 3588 return this.rootNode; 3589 } 3590 3591 addCommonEvent(frameNode: FrameNode) { 3592 frameNode.commonEvent.setOnHover(((isHover: boolean, event: HoverEvent): void => { 3593 console.log(`isHover FrameNode: ${isHover}`); 3594 console.log(`isHover FrameNode: ${JSON.stringify(event)}`); 3595 event.stopPropagation(); 3596 })) 3597 frameNode.commonEvent.setOnClick((event: ClickEvent) => { 3598 console.log(`Click FrameNode: ${JSON.stringify(event)}`) 3599 }) 3600 frameNode.commonEvent.setOnTouch((event: TouchEvent) => { 3601 console.log(`touch FrameNode: ${JSON.stringify(event)}`) 3602 }) 3603 frameNode.commonEvent.setOnAppear(() => { 3604 console.log(`on Appear FrameNode`) 3605 }) 3606 frameNode.commonEvent.setOnDisappear(() => { 3607 console.log(`onDisAppear FrameNode`) 3608 }) 3609 frameNode.commonEvent.setOnFocus(() => { 3610 console.log(`onFocus FrameNode`) 3611 }) 3612 frameNode.commonEvent.setOnBlur(() => { 3613 console.log(`onBlur FrameNode`) 3614 }) 3615 frameNode.commonEvent.setOnKeyEvent((event: KeyEvent) => { 3616 console.log(`Key FrameNode: ${JSON.stringify(event)}`) 3617 }) 3618 frameNode.commonEvent.setOnMouse((event: MouseEvent) => { 3619 console.log(`Mouse FrameNode: ${JSON.stringify(event)}`) 3620 }) 3621 frameNode.commonEvent.setOnSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 3622 console.info(`onSizeChange FrameNode: oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 3623 }) 3624 } 3625} 3626 3627@Entry 3628@Component 3629struct Index { 3630 @State index: number = 0; 3631 private myNodeController: MyNodeController = new MyNodeController(); 3632 3633 build() { 3634 Column() { 3635 Button("add CommonEvent to Text") 3636 .onClick(() => { 3637 this.myNodeController!.addCommonEvent(this.myNodeController!.rootNode!.getParent()!.getPreviousSibling() !) 3638 }) 3639 Text("this is a Text") 3640 .fontSize(16) 3641 .borderWidth(1) 3642 .onHover(((isHover: boolean, event: HoverEvent): void => { 3643 console.log(`isHover Text: ${isHover}`); 3644 console.log(`isHover Text: ${JSON.stringify(event)}`); 3645 event.stopPropagation(); 3646 })) 3647 .onClick((event: ClickEvent) => { 3648 console.log(`Click Text : ${JSON.stringify(event)}`) 3649 }) 3650 .onTouch((event: TouchEvent) => { 3651 console.log(`touch Text : ${JSON.stringify(event)}`) 3652 }) 3653 .onAppear(() => { 3654 console.log(`on Appear Text`) 3655 }) 3656 .onDisAppear(() => { 3657 console.log(`onDisAppear Text`) 3658 }) 3659 .onFocus(() => { 3660 console.log(`onFocus Text`) 3661 }) 3662 .onBlur(() => { 3663 console.log(`onBlur Text`) 3664 }) 3665 .onKeyEvent((event: KeyEvent) => { 3666 console.log(`Key Text : ${JSON.stringify(event)}`) 3667 }) 3668 .onMouse((event: MouseEvent) => { 3669 console.log(`Mouse Text : ${JSON.stringify(event)}`) 3670 }) 3671 .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 3672 console.info(`onSizeChange Text: oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 3673 }) 3674 NodeContainer(this.myNodeController) 3675 .borderWidth(1) 3676 .width(300) 3677 .height(100) 3678 }.width("100%") 3679 } 3680} 3681``` 3682 3683## LazyForEach场景基础事件使用示例 3684 3685<!--code_no_check--> 3686 3687```ts 3688// index.ets 3689import {Track, TrackManager, TrackNode} from "./track" 3690 3691@Builder 3692function page1() { 3693 Column() { 3694 Text("Page1") 3695 PageList().height("90%") 3696 Button("DumpMessage") 3697 .onClick(() => { 3698 TrackManager.get().dump() 3699 }) 3700 3701 }.width("100%").height("100%") 3702} 3703 3704class BasicDataSource implements IDataSource { 3705 private listeners: DataChangeListener[] = []; 3706 private originDataArray: string[] = []; 3707 3708 public totalCount(): number { 3709 return 0; 3710 } 3711 3712 public getData(index: number): string { 3713 return this.originDataArray[index]; 3714 } 3715 3716 // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听 3717 registerDataChangeListener(listener: DataChangeListener): void { 3718 if (this.listeners.indexOf(listener) < 0) { 3719 console.info('add listener'); 3720 this.listeners.push(listener); 3721 } 3722 } 3723 3724 // 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听 3725 unregisterDataChangeListener(listener: DataChangeListener): void { 3726 const pos = this.listeners.indexOf(listener); 3727 if (pos >= 0) { 3728 console.info('remove listener'); 3729 this.listeners.splice(pos, 1); 3730 } 3731 } 3732 3733 // 通知LazyForEach组件需要重载所有子组件 3734 notifyDataReload(): void { 3735 this.listeners.forEach(listener => { 3736 listener.onDataReloaded(); 3737 }) 3738 } 3739 3740 // 通知LazyForEach组件需要在index对应索引处添加子组件 3741 notifyDataAdd(index: number): void { 3742 this.listeners.forEach(listener => { 3743 listener.onDataAdd(index); 3744 }) 3745 } 3746 3747 // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件 3748 notifyDataChange(index: number): void { 3749 this.listeners.forEach(listener => { 3750 listener.onDataChange(index); 3751 }) 3752 } 3753 3754 // 通知LazyForEach组件需要在index对应索引处删除该子组件 3755 notifyDataDelete(index: number): void { 3756 this.listeners.forEach(listener => { 3757 listener.onDataDelete(index); 3758 }) 3759 } 3760 3761 // 通知LazyForEach组件将from索引和to索引处的子组件进行交换 3762 notifyDataMove(from: number, to: number): void { 3763 this.listeners.forEach(listener => { 3764 listener.onDataMove(from, to); 3765 }) 3766 } 3767} 3768 3769class MyDataSource extends BasicDataSource { 3770 private dataArray: string[] = []; 3771 3772 public totalCount(): number { 3773 return this.dataArray.length; 3774 } 3775 3776 public getData(index: number): string { 3777 return this.dataArray[index]; 3778 } 3779 3780 public addData(index: number, data: string): void { 3781 this.dataArray.splice(index, 0, data); 3782 this.notifyDataAdd(index); 3783 } 3784 3785 public pushData(data: string): void { 3786 this.dataArray.push(data); 3787 this.notifyDataAdd(this.dataArray.length - 1); 3788 } 3789} 3790 3791@Component 3792struct PageList { 3793 private data: MyDataSource = new MyDataSource(); 3794 3795 aboutToAppear() { 3796 for (let i = 0; i <= 100; i++) { 3797 this.data.pushData(`Hello ${i}`) 3798 } 3799 } 3800 3801 build() { 3802 List({ space: 3 }) { 3803 LazyForEach(this.data, (item: string, index: number) => { 3804 ListItem() { 3805 // 通过TrackNode对组件进行封装埋点 3806 TrackNode({track: new Track().tag("xxx"+ item).id(index + 30000)}) { 3807 Row() { 3808 Text(item).fontSize(30) 3809 .onClick(() => { 3810 }) 3811 }.margin({ left: 10, right: 10 }) 3812 } 3813 } 3814 }, (item: string) => item) 3815 }.cachedCount(5) 3816 } 3817} 3818 3819 3820@Entry 3821@Component 3822struct TrackTest { 3823 pageInfos: NavPathStack = new NavPathStack() 3824 build() { 3825 Row() { 3826 TrackNode({ track: new Track().tag("root").id(10000)}) { 3827 page1() 3828 } 3829 } 3830 } 3831 3832 aboutToAppear(): void { 3833 TrackManager.get().startListenClick(this.getUIContext()) 3834 } 3835} 3836``` 3837 3838<!--code_no_check--> 3839 3840```ts 3841// ./track.ets 3842import { FrameNode, Rect } from '@kit.ArkUI'; 3843 3844@Component 3845export struct TrackNode { 3846 @BuilderParam closer: VoidCallback = this.defaultBuilder 3847 track: Track | null = null 3848 trackShadow: TrackShadow = new TrackShadow() 3849 3850 @Builder defaultBuilder() { 3851 } 3852 3853 build() { 3854 this.closer() 3855 } 3856 3857 aboutToAppear(): void { 3858 // use onDidBuild later 3859 } 3860 3861 aboutToDisappear(): void { 3862 TrackManager.get().removeTrack(this.trackShadow.id) 3863 console.log("Track disappear:" + this.trackShadow.id) 3864 } 3865 3866 onDidBuild(): void { 3867 // 构建埋点的虚拟树，获取的node为当前页面的根节点（用例中为Row）。 3868 let uid = this.getUniqueId() 3869 let node: FrameNode | null = this.getUIContext().getFrameNodeByUniqueId(uid); 3870 console.log("Track onDidBuild node:" + node?.getNodeType()) 3871 if (node === null) { 3872 return 3873 } 3874 this.trackShadow.node = node 3875 this.trackShadow.id = node?.getUniqueId() 3876 this.trackShadow.track = this.track; 3877 TrackManager.get().addTrack(this.trackShadow.id, this.trackShadow) 3878 // 通过setOnVisibleAreaApproximateChange监听记录埋点组件的可视区域。 3879 node?.commonEvent.setOnVisibleAreaApproximateChange( 3880 { ratios: [0, 0.1, 0.2, 0.5, 0.8, 1], expectedUpdateInterval: 500 }, 3881 (ratioInc: boolean, ratio: number) => { 3882 console.log(`Node ${node?.getUniqueId()}:${node?.getNodeType()} is visibleRatio is ${ratio}`); 3883 this.trackShadow.visibleRatio = ratio 3884 }) 3885 3886 let parent: FrameNode | null = node?.getParent() 3887 3888 let attachTrackToParent: (parent: FrameNode | null) => boolean = 3889 (parent: FrameNode | null) => { 3890 while (parent !== null) { 3891 let parentTrack = TrackManager.get().getTrackById(parent.getUniqueId()) 3892 if (parentTrack !== undefined) { 3893 parentTrack.childIds.add(this.trackShadow.id) 3894 this.trackShadow.parentId = parentTrack.id 3895 return true; 3896 } 3897 parent = parent.getParent() 3898 } 3899 return false; 3900 } 3901 let attached = attachTrackToParent(parent); 3902 3903 if (!attached) { 3904 node?.commonEvent.setOnAppear(() => { 3905 let attached = attachTrackToParent(parent); 3906 if (attached) { 3907 console.log("Track lazy attached:" + this.trackShadow.id) 3908 } 3909 }) 3910 } 3911 } 3912} 3913 3914export class Track { 3915 public areaPercent: number = 0 3916 private trackTag: string = "" 3917 private trackId: number = 0 3918 3919 constructor() { 3920 } 3921 3922 tag(newTag: string): Track { 3923 this.trackTag = newTag; 3924 return this; 3925 } 3926 3927 id(newId: number): Track { 3928 this.trackId = newId; 3929 return this; 3930 } 3931} 3932 3933export class TrackShadow { 3934 public node: FrameNode | null = null 3935 public id: number = -1 3936 public track: Track | null = null 3937 public childIds: Set<number> = new Set() 3938 public parentId: number = -1 3939 public visibleRect: Rect = { left: 0, top: 0, right: 0, bottom: 0 } 3940 public area: number = 0 3941 public visibleRatio: number = 0 3942 3943 // 通过全局dump输出埋点树的信息 3944 dump(depth: number = 0): void { 3945 console.log("Track Dp:" + depth + " id:" + this.id + " areaPer:" + this.track?.areaPercent + " visibleRatio:" + this.visibleRatio) 3946 this.childIds.forEach((value: number) => { 3947 TrackManager.get().getTrackById(value)?.dump(depth + 1) 3948 }) 3949 } 3950} 3951 3952export class TrackManager { 3953 static instance: TrackManager 3954 private trackMap: Map<number, TrackShadow> = new Map() 3955 private rootTrack: TrackShadow | null = null 3956 3957 static get(): TrackManager { 3958 if (TrackManager.instance !== undefined) { 3959 return TrackManager.instance 3960 } 3961 TrackManager.instance = new TrackManager() 3962 return TrackManager.instance 3963 } 3964 3965 addTrack(id: number, track: TrackShadow) { 3966 if (this.trackMap.size == 0) { 3967 this.rootTrack = track 3968 } 3969 console.log("Track add id:" + id) 3970 this.trackMap.set(id, track) 3971 } 3972 3973 removeTrack(id: number) { 3974 let current = this.getTrackById(id) 3975 if (current !== undefined) { 3976 this.trackMap.delete(id) 3977 let parent = this.getTrackById(current?.parentId) 3978 parent?.childIds.delete(id) 3979 } 3980 } 3981 3982 getTrackById(id: number): TrackShadow | undefined { 3983 return this.trackMap.get(id) 3984 } 3985 3986 startListenClick(context: UIContext) { 3987 // 通过无感监听获取FrameNode查找埋点信息。 3988 context.getUIObserver().on("willClick", (event: ClickEvent, node?: FrameNode) => { 3989 console.log("Track clicked:" + node) 3990 if (node == undefined) { 3991 return 3992 } 3993 let track = this.getTrackById(node.getUniqueId()) 3994 track?.dump(0); 3995 }) 3996 } 3997 3998 updateVisibleInfo(track: TrackShadow): void { 3999 // do something 4000 } 4001 4002 dump(): void { 4003 this.rootTrack?.dump(0) 4004 } 4005} 4006``` 4007## 手势事件示例 4008```ts 4009import { NodeController, FrameNode } from '@kit.ArkUI'; 4010 4011class MyNodeController extends NodeController { 4012 public rootNode: FrameNode | null = null; 4013 4014 makeNode(uiContext: UIContext): FrameNode | null { 4015 this.rootNode = new FrameNode(uiContext); 4016 this.rootNode.commonAttribute.width(100) 4017 .overlay('This is a FrameNode') 4018 .backgroundColor(Color.Pink) 4019 .width('100%') 4020 .height('100%'); 4021 this.addGestureEvent(this.rootNode); 4022 return this.rootNode; 4023 } 4024 4025 addGestureEvent(frameNode: FrameNode) { 4026 frameNode.gestureEvent.addGesture(new PanGestureHandler() 4027 .onActionStart((event: GestureEvent) => { 4028 console.log(`Pan start: ${JSON.stringify(event)}`); 4029 }) 4030 .onActionUpdate((event: GestureEvent) => { 4031 console.log(`Pan update: ${JSON.stringify(event)}`); 4032 }) 4033 .onActionEnd((event: GestureEvent) => { 4034 console.log(`Pan end: ${JSON.stringify(event)}`); 4035 }) 4036 .onActionCancel(() => { 4037 console.log('Pan cancel'); 4038 }) 4039 ) 4040 frameNode.gestureEvent.addGesture(new LongPressGestureHandler() 4041 .onAction((event: GestureEvent) => { 4042 console.log(`Long press action: ${JSON.stringify(event)}`); 4043 }) 4044 .onActionEnd((event: GestureEvent) => { 4045 console.log(`Long press action end: ${JSON.stringify(event)}`); 4046 }) 4047 .onActionCancel(() => { 4048 console.log('Long press cancel'); 4049 }) 4050 ) 4051 frameNode.gestureEvent.addGesture(new TapGestureHandler() 4052 .onAction((event: GestureEvent) => { 4053 console.log(`Tap action: ${JSON.stringify(event)}`); 4054 }) 4055 ) 4056 } 4057} 4058 4059@Entry 4060@Component 4061struct Index { 4062 private myNodeController: MyNodeController = new MyNodeController(); 4063 4064 build() { 4065 Column() { 4066 NodeContainer(this.myNodeController) 4067 .borderWidth(1) 4068 .width(300) 4069 .height(300) 4070 }.width("100%") 4071 } 4072} 4073``` 4074## 节点自定义示例 4075 4076```ts 4077import { UIContext, DrawContext, FrameNode, NodeController, LayoutConstraint, Size, Position } from '@kit.ArkUI'; 4078import { drawing } from '@kit.ArkGraphics2D'; 4079 4080function GetChildLayoutConstraint(constraint: LayoutConstraint, child: FrameNode): LayoutConstraint { 4081 const size = child.getUserConfigSize(); 4082 const width = Math.max( 4083 Math.min(constraint.maxSize.width, size.width.value), 4084 constraint.minSize.width 4085 ); 4086 const height = Math.max( 4087 Math.min(constraint.maxSize.height, size.height.value), 4088 constraint.minSize.height 4089 ); 4090 const finalSize: Size = { width, height }; 4091 const res: LayoutConstraint = { 4092 maxSize: finalSize, 4093 minSize: finalSize, 4094 percentReference: finalSize 4095 }; 4096 4097 return res; 4098} 4099 4100class MyFrameNode extends FrameNode { 4101 public width: number = 10; 4102 private space: number = 1; 4103 4104 onMeasure(constraint: LayoutConstraint): void { 4105 let sizeRes: Size = { width: 100, height: 100 }; 4106 for (let i = 0;i < this.getChildrenCount();i++) { 4107 let child = this.getChild(i); 4108 if (child) { 4109 let childConstraint = GetChildLayoutConstraint(constraint, child); 4110 child.measure(childConstraint); 4111 let size = child.getMeasuredSize(); 4112 sizeRes.height += size.height + this.space; 4113 sizeRes.width = Math.max(sizeRes.width, size.width); 4114 } 4115 } 4116 this.setMeasuredSize(sizeRes); 4117 } 4118 4119 onLayout(position: Position): void { 4120 let y = 0; 4121 for (let i = 0;i < this.getChildrenCount();i++) { 4122 let child = this.getChild(i); 4123 if (child) { 4124 child.layout({ 4125 x: 20, 4126 y: y 4127 }); 4128 y += child.getMeasuredSize().height + this.space; 4129 } 4130 } 4131 this.setLayoutPosition(position); 4132 } 4133 4134 onDraw(context: DrawContext) { 4135 const canvas = context.canvas; 4136 const pen = new drawing.Pen(); 4137 pen.setStrokeWidth(5); 4138 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 4139 canvas.attachPen(pen); 4140 canvas.drawRect({ left: 0, right: this.width, top: 0, bottom: this.width }); 4141 canvas.detachPen(); 4142 } 4143 4144 addWidth() { 4145 this.width += 10; 4146 } 4147} 4148 4149class MyNodeController extends NodeController { 4150 public rootNode: MyFrameNode | null = null; 4151 4152 makeNode(context: UIContext): FrameNode | null { 4153 this.rootNode = new MyFrameNode(context); 4154 this.rootNode?.commonAttribute?.size({ width: 100, height: 100 }).backgroundColor(Color.Green); 4155 return this.rootNode; 4156 } 4157} 4158 4159@Entry 4160@Component 4161struct Index { 4162 private nodeController: MyNodeController = new MyNodeController(); 4163 4164 build() { 4165 Row() { 4166 Column() { 4167 NodeContainer(this.nodeController) 4168 .width('100%') 4169 .height(100) 4170 .backgroundColor('#FFF0F0F0') 4171 Button('Invalidate') 4172 .onClick(() => { 4173 this.nodeController?.rootNode?.addWidth(); 4174 this.nodeController?.rootNode?.invalidate(); 4175 }) 4176 Button('UpdateLayout') 4177 .onClick(() => { 4178 this.nodeController?.rootNode?.setNeedsLayout(); 4179 }) 4180 } 4181 .width('100%') 4182 .height('100%') 4183 } 4184 .height('100%') 4185 } 4186} 4187``` 4188## NodeAdapter使用示例 4189 4190```ts 4191import { FrameNode, NodeController, NodeAdapter, typeNode } from '@kit.ArkUI'; 4192 4193class MyNodeAdapter extends NodeAdapter { 4194 uiContext: UIContext 4195 cachePool: Array<FrameNode> = new Array(); 4196 changed: boolean = false 4197 reloadTimes: number = 0; 4198 data: Array<string> = new Array(); 4199 hostNode?: FrameNode 4200 4201 constructor(uiContext: UIContext, count: number) { 4202 super(); 4203 this.uiContext = uiContext; 4204 this.totalNodeCount = count; 4205 this.loadData(); 4206 } 4207 4208 reloadData(count: number): void { 4209 this.reloadTimes++; 4210 NodeAdapter.attachNodeAdapter(this, this.hostNode); 4211 this.totalNodeCount = count; 4212 this.loadData(); 4213 this.reloadAllItems(); 4214 } 4215 4216 refreshData(): void { 4217 let items = this.getAllAvailableItems() 4218 console.log("UINodeAdapter get All items:" + items.length); 4219 this.reloadAllItems(); 4220 } 4221 4222 detachData(): void { 4223 NodeAdapter.detachNodeAdapter(this.hostNode); 4224 this.reloadTimes = 0; 4225 } 4226 4227 loadData(): void { 4228 for (let i = 0; i < this.totalNodeCount; i++) { 4229 this.data[i] = "Adapter ListItem " + i + " r:" + this.reloadTimes; 4230 } 4231 } 4232 4233 changeData(from: number, count: number): void { 4234 this.changed = !this.changed; 4235 for (let i = 0; i < count; i++) { 4236 let index = i + from; 4237 this.data[index] = "Adapter ListItem " + (this.changed ? "changed:" : "") + index + " r:" + this.reloadTimes; 4238 } 4239 this.reloadItem(from, count); 4240 } 4241 4242 insertData(from: number, count: number): void { 4243 for (let i = 0; i < count; i++) { 4244 let index = i + from; 4245 this.data.splice(index, 0, "Adapter ListItem " + from + "-" + i); 4246 } 4247 this.insertItem(from, count); 4248 this.totalNodeCount += count; 4249 console.log("UINodeAdapter after insert count:" + this.totalNodeCount); 4250 } 4251 4252 removeData(from: number, count: number): void { 4253 let arr = this.data.splice(from, count); 4254 this.removeItem(from, count); 4255 this.totalNodeCount -= arr.length; 4256 console.log("UINodeAdapter after remove count:" + this.totalNodeCount); 4257 } 4258 4259 moveData(from: number, to: number): void { 4260 let tmp = this.data.splice(from, 1); 4261 this.data.splice(to, 0, tmp[0]); 4262 this.moveItem(from, to); 4263 } 4264 4265 onAttachToNode(target: FrameNode): void { 4266 console.log("UINodeAdapter onAttachToNode id:" + target.getUniqueId()); 4267 this.hostNode = target; 4268 } 4269 4270 onDetachFromNode(): void { 4271 console.log("UINodeAdapter onDetachFromNode"); 4272 } 4273 4274 onGetChildId(index: number): number { 4275 console.log("UINodeAdapter onGetChildId:" + index); 4276 return index; 4277 } 4278 4279 onCreateChild(index: number): FrameNode { 4280 console.log("UINodeAdapter onCreateChild:" + index); 4281 if (this.cachePool.length > 0) { 4282 let cacheNode = this.cachePool.pop(); 4283 if (cacheNode !== undefined) { 4284 console.log("UINodeAdapter onCreateChild reused id:" + cacheNode.getUniqueId()); 4285 let text = cacheNode?.getFirstChild(); 4286 let textNode = text as typeNode.Text; 4287 textNode?.initialize(this.data[index]).fontSize(20); 4288 return cacheNode; 4289 } 4290 } 4291 console.log("UINodeAdapter onCreateChild createNew"); 4292 let itemNode = typeNode.createNode(this.uiContext, "ListItem"); 4293 let textNode = typeNode.createNode(this.uiContext, "Text"); 4294 textNode.initialize(this.data[index]).fontSize(20); 4295 itemNode.appendChild(textNode); 4296 return itemNode; 4297 } 4298 4299 onDisposeChild(id: number, node: FrameNode): void { 4300 console.log("UINodeAdapter onDisposeChild:" + id); 4301 if (this.cachePool.length < 10) { 4302 if (!this.cachePool.includes(node)) { 4303 console.log("UINodeAdapter caching node id:" + node.getUniqueId()); 4304 this.cachePool.push(node); 4305 } 4306 } else { 4307 node.dispose(); 4308 } 4309 } 4310 4311 onUpdateChild(id: number, node: FrameNode): void { 4312 let index = id; 4313 let text = node.getFirstChild(); 4314 let textNode = text as typeNode.Text; 4315 textNode?.initialize(this.data[index]).fontSize(20); 4316 } 4317} 4318 4319class MyNodeAdapterController extends NodeController { 4320 rootNode: FrameNode | null = null; 4321 nodeAdapter: MyNodeAdapter | null = null; 4322 4323 makeNode(uiContext: UIContext): FrameNode | null { 4324 this.rootNode = new FrameNode(uiContext); 4325 let listNode = typeNode.createNode(uiContext, "List"); 4326 listNode.initialize({ space: 3 }).borderWidth(2).borderColor(Color.Black); 4327 this.rootNode.appendChild(listNode); 4328 this.nodeAdapter = new MyNodeAdapter(uiContext, 100); 4329 NodeAdapter.attachNodeAdapter(this.nodeAdapter, listNode); 4330 return this.rootNode; 4331 } 4332} 4333 4334@Entry 4335@Component 4336struct ListNodeTest { 4337 adapterController: MyNodeAdapterController = new MyNodeAdapterController(); 4338 4339 build() { 4340 Column() { 4341 Text("ListNode Adapter"); 4342 NodeContainer(this.adapterController) 4343 .width(300).height(300) 4344 .borderWidth(1).borderColor(Color.Black); 4345 Row() { 4346 Button("Reload") 4347 .onClick(() => { 4348 this.adapterController.nodeAdapter?.reloadData(50); 4349 }) 4350 Button("Change") 4351 .onClick(() => { 4352 this.adapterController.nodeAdapter?.changeData(5, 10) 4353 }) 4354 Button("Insert") 4355 .onClick(() => { 4356 this.adapterController.nodeAdapter?.insertData(10, 10); 4357 }) 4358 } 4359 4360 Row() { 4361 Button("Remove") 4362 .onClick(() => { 4363 this.adapterController.nodeAdapter?.removeData(10, 10); 4364 }) 4365 Button("Move") 4366 .onClick(() => { 4367 this.adapterController.nodeAdapter?.moveData(2, 5); 4368 }) 4369 Button("Refresh") 4370 .onClick(() => { 4371 this.adapterController.nodeAdapter?.refreshData(); 4372 }) 4373 Button("Detach") 4374 .onClick(() => { 4375 this.adapterController.nodeAdapter?.detachData(); 4376 }) 4377 } 4378 }.borderWidth(1) 4379 .width("100%") 4380 } 4381} 4382 4383``` 4384
