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内置ArkUI Inspector工具里面的一致。 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节点。当UniquedId大于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### onDraw<sup>12+</sup> 913 914onDraw?(context: DrawContext): void 915 916FrameNode的自绘制方法，该方法会在FrameNode进行内容绘制时被调用。 917 918**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 919 920**系统能力：** SystemCapability.ArkUI.ArkUI.Full 921 922**参数：** 923 924| 参数名 | 类型 | 必填 | 说明 | 925| ------- | ------------------------------------------------------ | ---- | ---------------- | 926| context | [DrawContext](./js-apis-arkui-graphics.md#drawcontext) | 是 | 图形绘制上下文。自绘制区域无法超出组件自身大小。 | 927 928**示例：** 929 930请参考[节点自定义示例](#节点自定义示例)。 931 932### onMeasure<sup>12+</sup> 933 934onMeasure(constraint: LayoutConstraint): void 935 936FrameNode的自定义测量方法，该方法会重写默认测量方法，在FrameNode进行测量时被调用，测量FrameNode及其内容的大小。 937 938**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 939 940**系统能力：** SystemCapability.ArkUI.ArkUI.Full 941 942**参数：** 943 944| 参数名 | 类型 | 必填 | 说明 | 945| ------- | ------------------------------------------------------ | ---- | ---------------- | 946| constraint | [LayoutConstraint](#layoutconstraint12) | 是 | 组件进行测量时使用的布局约束。 | 947 948**示例：** 949 950请参考[节点自定义示例](#节点自定义示例)。 951 952### LayoutConstraint<sup>12+</sup> 953 954描述组件的布局约束。 955 956**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 957 958**系统能力：** SystemCapability.ArkUI.ArkUI.Full 959 960| 名称 | 类型 | 必填 | 说明 | 961| -------------- | ------ | ----- | ------------------------------------------ | 962| maxSize | [Size](./js-apis-arkui-graphics.md#size) | 是 | 最大尺寸。 | 963| minSize | [Size](./js-apis-arkui-graphics.md#size) | 是 | 最小尺寸。 | 964| percentReference | [Size](./js-apis-arkui-graphics.md#size) | 是 | 子节点计算百分比时的尺寸基准。 965 966### onLayout<sup>12+</sup> 967 968onLayout(position: Position): void 969 970FrameNode的自定义布局方法，该方法会重写默认布局方法，在FrameNode进行布局时被调用，为FrameNode及其子节点指定位置。 971 972**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 973 974**系统能力：** SystemCapability.ArkUI.ArkUI.Full 975 976**参数：** 977 978| 参数名 | 类型 | 必填 | 说明 | 979| ------- | ------------------------------------------------------ | ---- | ---------------- | 980| position | [Position](./js-apis-arkui-graphics.md#position) | 是 | 组件进行布局时使用的位置信息。 | 981 982**示例：** 983 984请参考[节点自定义示例](#节点自定义示例)。 985 986### setMeasuredSize<sup>12+</sup> 987 988setMeasuredSize(size: Size): void 989 990设置FrameNode的测量后的尺寸，默认单位PX。若设置的宽高为负数，自动取零。 991 992**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 993 994**系统能力：** SystemCapability.ArkUI.ArkUI.Full 995 996**参数：** 997 998| 参数名 | 类型 | 必填 | 说明 | 999| ------- | ------------------------------------------------------ | ---- | ---------------- | 1000| size | [Size](./js-apis-arkui-graphics.md#size) | 是 | FrameNode的测量后的尺寸。 | 1001 1002**示例：** 1003 1004请参考[节点自定义示例](#节点自定义示例)。 1005 1006### setLayoutPosition<sup>12+</sup> 1007 1008setLayoutPosition(position: Position): void 1009 1010设置FrameNode的布局后的位置，默认单位PX。 1011 1012**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1013 1014**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1015 1016**参数：** 1017 1018| 参数名 | 类型 | 必填 | 说明 | 1019| ------- | ------------------------------------------------------ | ---- | ---------------- | 1020| position | [Position](./js-apis-arkui-graphics.md#position) | 是 | FrameNode的布局后的位置。 | 1021 1022**示例：** 1023 1024请参考[节点自定义示例](#节点自定义示例)。 1025 1026### measure<sup>12+</sup> 1027 1028measure(constraint: LayoutConstraint): void 1029 1030调用FrameNode的测量方法，根据父容器的布局约束，对FrameNode进行测量，计算出尺寸，如果测量方法被重写，则调用重写的方法。建议在[onMeasure](#onmeasure12)方法中调用。 1031 1032**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1033 1034**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1035 1036**参数：** 1037 1038| 参数名 | 类型 | 必填 | 说明 | 1039| ------- | ------------------------------------------------------ | ---- | ---------------- | 1040| constraint | [LayoutConstraint](#layoutconstraint12) | 是 | 组件进行测量时使用的父容器布局约束。 | 1041 1042**示例：** 1043 1044请参考[节点自定义示例](#节点自定义示例)。 1045 1046### layout<sup>12+</sup> 1047 1048layout(position: Position): void 1049 1050调用FrameNode的布局方法，为FrameNode及其子节点指定布局位置，如果布局方法被重写，则调用重写的方法。建议在[onLayout](#onlayout12)方法中调用。 1051 1052**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1053 1054**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1055 1056**参数：** 1057 1058| 参数名 | 类型 | 必填 | 说明 | 1059| ------- | ------------------------------------------------------ | ---- | ---------------- | 1060| position | [Position](./js-apis-arkui-graphics.md#position) | 是 | 组件进行布局时使用的位置信息。 | 1061 1062**示例：** 1063 1064请参考[节点自定义示例](#节点自定义示例)。 1065 1066### setNeedsLayout<sup>12+</sup> 1067 1068setNeedsLayout(): void 1069 1070该方法会将FrameNode标记为需要布局的状态，下一帧将会进行重新布局。 1071 1072**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1073 1074**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1075 1076**示例：** 1077 1078请参考[节点自定义示例](#节点自定义示例)。 1079 1080### invalidate<sup>12+</sup> 1081 1082invalidate(): void 1083 1084该方法会触发FrameNode自绘制内容的重新渲染。 1085 1086**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1087 1088**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1089 1090### addComponentContent<sup>12+</sup> 1091 1092addComponentContent\<T>(content: ComponentContent\<T>): void 1093 1094支持添加ComponentContent类型的组件内容。要求当前节点是一个可修改的节点，即[isModifiable](#ismodifiable12)的返回值为true，否则抛出异常信息。 1095 1096**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1097 1098**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1099 1100**参数：** 1101 1102| 参数名 | 类型 | 必填 | 说明 | 1103| ------- | ------------------------------------------------------ | ---- | ---------------- | 1104| content | [ComponentContent](./js-apis-arkui-ComponentContent.md#componentcontent)\<T> | 是 | FrameNode节点中显示的组件内容。 | 1105 1106**错误码：** 1107 1108| 错误码ID | 错误信息 | 1109| -------- | -------------------------------- | 1110| 100021 | The FrameNode is not modifiable. | 1111 1112```ts 1113import { NodeController, FrameNode, ComponentContent, typeNode } from '@kit.ArkUI'; 1114 1115@Builder 1116function buildText() { 1117 Column() { 1118 Text('hello') 1119 .width(50) 1120 .height(50) 1121 .backgroundColor(Color.Yellow) 1122 } 1123} 1124 1125class MyNodeController extends NodeController { 1126 makeNode(uiContext: UIContext): FrameNode | null { 1127 let node = new FrameNode(uiContext) 1128 node.commonAttribute.width(300).height(300).backgroundColor(Color.Red) 1129 let col = typeNode.createNode(uiContext, "Column") 1130 col.initialize({ space: 10 }) 1131 node.appendChild(col) 1132 let row4 = typeNode.createNode(uiContext, "Row") 1133 row4.attribute.width(200) 1134 .height(200) 1135 .borderWidth(1) 1136 .borderColor(Color.Black) 1137 .backgroundColor(Color.Green) 1138 let component = new ComponentContent<Object>(uiContext, wrapBuilder(buildText)) 1139 if (row4.isModifiable()) { 1140 row4.addComponentContent(component) 1141 col.appendChild(row4) 1142 } 1143 return node 1144 } 1145} 1146 1147@Entry 1148@Component 1149struct FrameNodeTypeTest { 1150 private myNodeController: MyNodeController = new MyNodeController(); 1151 1152 build() { 1153 Row() { 1154 NodeContainer(this.myNodeController); 1155 } 1156 } 1157} 1158``` 1159 1160### disposeTree<sup>12+</sup> 1161 1162disposeTree(): void 1163 1164下树并递归释放当前节点为根的子树。 1165 1166**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1167 1168**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1169 1170```ts 1171import { FrameNode, NodeController, BuilderNode } from '@kit.ArkUI'; 1172 1173@Component 1174struct TestComponent { 1175 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent2)); 1176 1177 build() { 1178 Column() { 1179 Text('This is a BuilderNode.') 1180 .fontSize(16) 1181 .fontWeight(FontWeight.Bold) 1182 NodeContainer(this.myNodeController) 1183 } 1184 .width('100%') 1185 .backgroundColor(Color.Gray) 1186 } 1187 1188 aboutToAppear() { 1189 console.error('BuilderNode aboutToAppear'); 1190 } 1191 1192 aboutToDisappear() { 1193 console.error('BuilderNode aboutToDisappear'); 1194 } 1195} 1196 1197@Component 1198struct TestComponent2 { 1199 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent3)); 1200 private myNodeController2: MyNodeController = new MyNodeController(wrapBuilder(buildComponent4)); 1201 1202 build() { 1203 Column() { 1204 Text('This is a BuilderNode 2.') 1205 .fontSize(16) 1206 .fontWeight(FontWeight.Bold) 1207 NodeContainer(this.myNodeController) 1208 NodeContainer(this.myNodeController2) 1209 } 1210 .width('100%') 1211 .backgroundColor(Color.Gray) 1212 } 1213 1214 aboutToAppear() { 1215 console.error('BuilderNode 2 aboutToAppear'); 1216 } 1217 1218 aboutToDisappear() { 1219 console.error('BuilderNode 2 aboutToDisappear'); 1220 } 1221} 1222 1223@Component 1224struct TestComponent3 { 1225 build() { 1226 Column() { 1227 Text('This is a BuilderNode 3.') 1228 .fontSize(16) 1229 .fontWeight(FontWeight.Bold) 1230 1231 } 1232 .width('100%') 1233 .backgroundColor(Color.Gray) 1234 } 1235 1236 aboutToAppear() { 1237 console.error('BuilderNode 3 aboutToAppear'); 1238 } 1239 1240 aboutToDisappear() { 1241 console.error('BuilderNode 3 aboutToDisappear'); 1242 } 1243} 1244 1245@Component 1246struct TestComponent4 { 1247 build() { 1248 Column() { 1249 Text('This is a BuilderNode 4.') 1250 .fontSize(16) 1251 .fontWeight(FontWeight.Bold) 1252 1253 } 1254 .width('100%') 1255 .backgroundColor(Color.Gray) 1256 } 1257 1258 aboutToAppear() { 1259 console.error('BuilderNode 4 aboutToAppear'); 1260 } 1261 1262 aboutToDisappear() { 1263 console.error('BuilderNode 4 aboutToDisappear'); 1264 } 1265} 1266 1267@Builder 1268function buildComponent() { 1269 TestComponent() 1270} 1271 1272@Builder 1273function buildComponent2() { 1274 TestComponent2() 1275} 1276 1277@Builder 1278function buildComponent3() { 1279 TestComponent3() 1280} 1281 1282@Builder 1283function buildComponent4() { 1284 TestComponent4() 1285} 1286 1287class MyNodeController extends NodeController { 1288 private rootNode: FrameNode | null = null; 1289 private builderNode: BuilderNode<[]> | null = null; 1290 private wrappedBuilder: WrappedBuilder<[]>; 1291 1292 constructor(builder: WrappedBuilder<[]>) { 1293 super(); 1294 this.wrappedBuilder = builder; 1295 } 1296 1297 makeNode(uiContext: UIContext): FrameNode | null { 1298 this.builderNode = new BuilderNode(uiContext, { selfIdealSize: { width: 200, height: 100 } }); 1299 this.builderNode.build(this.wrappedBuilder); 1300 1301 return this.builderNode.getFrameNode(); 1302 } 1303 1304 dispose() { 1305 if (this.builderNode !== null) { 1306 this.builderNode.getFrameNode()?.disposeTree() 1307 } 1308 } 1309 1310 removeBuilderNode() { 1311 const rootRenderNode = this.rootNode!.getRenderNode(); 1312 if (rootRenderNode !== null && this.builderNode !== null && this.builderNode.getFrameNode() !== null) { 1313 rootRenderNode.removeChild(this.builderNode!.getFrameNode()!.getRenderNode()); 1314 } 1315 } 1316} 1317 1318@Entry 1319@Component 1320struct Index { 1321 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent)); 1322 1323 build() { 1324 Column({ space: 4 }) { 1325 NodeContainer(this.myNodeController) 1326 Button('BuilderNode dispose') 1327 .onClick(() => { 1328 this.myNodeController.dispose(); 1329 }) 1330 .width('100%') 1331 Button('BuilderNode rebuild') 1332 .onClick(() => { 1333 this.myNodeController.rebuild(); 1334 }) 1335 .width('100%') 1336 } 1337 } 1338} 1339``` 1340 1341**示例：** 1342 1343请参考[节点自定义示例](#节点自定义示例)。 1344 1345## TypedFrameNode<sup>12+</sup> 1346 1347TypedFrameNode继承自[FrameNode](#framenode)，用于声明具体类型的FrameNode。 1348 1349### 属性 1350 1351**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1352 1353**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1354 1355| 名称 | 类型 | 只读 | 可选 | 说明 | 1356| ---------- | ---- | ---- | ---- | ------------------------------------------------------------ | 1357| initialize | C | 否 | 否 | 该接口用于创建对应组件的构造参数，用于设置/更新组件的初始值。 | 1358| attribute | T | 否 | 否 | 该接口用于获取对应组件的属性设置对象，用于设置/更新组件的通用、私有属性。 | 1359 1360## typeNode<sup>12+</sup> 1361 1362typeNode提供创建具体类型的FrameNode能力，可通过FrameNode的基础接口进行自定义的挂载，使用占位容器进行显示。 1363 1364使用typeNode创建Text、Image、Select、Toggle节点时，当传入的[UIContext](./js-apis-arkui-UIContext.md)对应的UI实例销毁后，调用该接口会返回一个无效的FrameNode节点，无法正常挂载和显示。 1365 1366**示例：** 1367 1368请参考[自定义具体类型节点示例](#自定义具体类型节点示例)。 1369 1370### Text<sup>12+</sup> 1371type Text = TypedFrameNode<TextInterface, TextAttribute> 1372 1373Text类型的FrameNode节点类型。不允许添加子组件。 1374 1375**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1376 1377**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1378 1379| 类型 | 说明 | 1380| -------------------------------------------------- | ------------------------------------------------------------ | 1381| TypedFrameNode<TextInterface, TextAttribute> | 提供Text类型FrameNode节点。<br/>**说明：**<br/> TextInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Text组件的构造函数类型。 <br/> TextAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Text组件的属性设置对象。 | 1382 1383### createNode('Text')<sup>12+</sup> 1384createNode(context: UIContext, nodeType: 'Text'): Text 1385 1386创建Text类型的FrameNode节点。 1387 1388**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1389 1390**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1391 1392**参数：** 1393 1394| 参数名 | 类型 | 必填 | 说明 | 1395| ------------------ | ------------------ | ------------------- | ------------------- | 1396| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1397| nodeType | 'Text' | 是 | 创建Text类型的FrameNode节点。 | 1398 1399**返回值：** 1400 1401| 类型 | 说明 | 1402| ------------------ | ------------------ | 1403| [Text](#text12) | Text类型的FrameNode节点。 | 1404 1405**示例：** 1406 1407```ts 1408typeNode.createNode(uiContext, 'Text'); 1409``` 1410 1411### Column<sup>12+</sup> 1412type Column = TypedFrameNode<ColumnInterface, ColumnAttribute> 1413 1414Column类型的FrameNode节点类型。 1415 1416**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1417 1418**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1419 1420| 类型 | 说明 | 1421| ------------------------------------------------------ | ------------------------------------------------------------ | 1422| TypedFrameNode<ColumnInterface, ColumnAttribute> | 提供Column类型FrameNode节点。<br/>**说明：**<br/> ColumnInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Column组件的构造函数类型。 <br/> ColumnAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Column组件的属性设置对象。 | 1423 1424### createNode('Column')<sup>12+</sup> 1425createNode(context: UIContext, nodeType: 'Column'): Column 1426 1427创建Column类型的FrameNode节点。 1428 1429**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1430 1431**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1432 1433**参数：** 1434 1435| 参数名 | 类型 | 必填 | 说明 | 1436| ------------------ | ------------------ | ------------------- | ------------------- | 1437| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1438| nodeType | 'Column' | 是 | 创建Column类型的FrameNode节点。 | 1439 1440**返回值：** 1441 1442| 类型 | 说明 | 1443| ------------------ | ------------------ | 1444| [Column](#column12) | Column类型的FrameNode节点。 | 1445 1446**示例：** 1447 1448```ts 1449typeNode.createNode(uiContext, 'Column'); 1450``` 1451### Row<sup>12+</sup> 1452type Row = TypedFrameNode<RowInterface, RowAttribute> 1453 1454Row类型的FrameNode节点类型。 1455 1456**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1457 1458**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1459 1460| 类型 | 说明 | 1461| ------------------------------------------------ | ------------------------------------------------------------ | 1462| TypedFrameNode<RowInterface, RowAttribute> | 提供Row类型FrameNode节点。<br/>**说明：**<br/> RowInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Row组件的构造函数类型。 <br/> RowAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Row组件的属性设置对象。 | 1463 1464### createNode('Row')<sup>12+</sup> 1465createNode(context: UIContext, nodeType: 'Row'): Row 1466 1467创建Row类型的FrameNode节点。 1468 1469**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1470 1471**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1472 1473**参数：** 1474 1475| 参数名 | 类型 | 必填 | 说明 | 1476| ------------------ | ------------------ | ------------------- | ------------------- | 1477| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1478| nodeType | 'Row' | 是 | 创建Row类型的FrameNode节点。 | 1479 1480**返回值：** 1481 1482| 类型 | 说明 | 1483| ------------------ | ------------------ | 1484| [Row](#row12) | Row类型的FrameNode节点。 | 1485 1486**示例：** 1487 1488```ts 1489typeNode.createNode(uiContext, 'Row'); 1490``` 1491### Stack<sup>12+</sup> 1492type Stack = TypedFrameNode<StackInterface, StackAttribute> 1493 1494Stack类型的FrameNode节点类型。 1495 1496**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1497 1498**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1499 1500| 类型 | 说明 | 1501| ---------------------------------------------------- | ------------------------------------------------------------ | 1502| TypedFrameNode<StackInterface, StackAttribute> | 提供Stack类型FrameNode节点。<br/>**说明：**<br/> StackInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Stack组件的构造函数类型。 <br/> StackAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Stack组件的属性设置对象。 | 1503 1504### createNode('Stack')<sup>12+</sup> 1505createNode(context: UIContext, nodeType: 'Stack'): Stack 1506 1507创建Stack类型的FrameNode节点。 1508 1509**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1510 1511**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1512 1513**参数：** 1514 1515| 参数名 | 类型 | 必填 | 说明 | 1516| ------------------ | ------------------ | ------------------- | ------------------- | 1517| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1518| nodeType | 'Stack' | 是 | 创建Stack类型的FrameNode节点。 | 1519 1520**返回值：** 1521 1522| 类型 | 说明 | 1523| ------------------ | ------------------ | 1524| [Stack](#stack12) | Stack类型的FrameNode节点。 | 1525 1526**示例：** 1527 1528```ts 1529typeNode.createNode(uiContext, 'Stack'); 1530``` 1531### GridRow<sup>12+</sup> 1532type GridRow = TypedFrameNode<GridRowInterface, GridRowAttribute> 1533 1534GridRow类型的FrameNode节点类型。只允许添加GridCol类型子组件。 1535 1536**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1537 1538**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1539 1540| 类型 | 说明 | 1541| -------------------------------------------------------- | ------------------------------------------------------------ | 1542| TypedFrameNode<GridRowInterface, GridRowAttribute> | 提供GridRow类型FrameNode节点。<br/>**说明：**<br/> GridRowInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为GridRow组件的构造函数类型。 <br/> GridRowAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回GridRow组件的属性设置对象。 | 1543 1544### createNode('GridRow')<sup>12+</sup> 1545createNode(context: UIContext, nodeType: 'GridRow'): GridRow 1546 1547创建GridRow类型的FrameNode节点。 1548 1549**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1550 1551**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1552 1553**参数：** 1554 1555| 参数名 | 类型 | 必填 | 说明 | 1556| ------------------ | ------------------ | ------------------- | ------------------- | 1557| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1558| nodeType | 'GridRow' | 是 | 创建GridRow类型的FrameNode节点。 | 1559 1560**返回值：** 1561 1562| 类型 | 说明 | 1563| ------------------ | ------------------ | 1564| [GridRow](#gridrow12) | GridRow类型的FrameNode节点。 | 1565 1566**示例：** 1567 1568```ts 1569typeNode.createNode(uiContext, 'GridRow'); 1570``` 1571### GridCol<sup>12+</sup> 1572type GridCol = TypedFrameNode<GridColInterface, GridColAttribute> 1573 1574GridCol类型的FrameNode节点类型。不允许添加子组件。 1575 1576**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1577 1578**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1579 1580| 类型 | 说明 | 1581| -------------------------------------------------------- | ------------------------------------------------------------ | 1582| TypedFrameNode<GridColInterface, GridColAttribute> | 提供GridCol类型FrameNode节点。<br/>**说明：**<br/> GridColInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为GridCol组件的构造函数类型。 <br/> GridColAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回GridCol组件的属性设置对象。 | 1583 1584### createNode('GridCol')<sup>12+</sup> 1585createNode(context: UIContext, nodeType: 'GridCol'): GridCol 1586 1587创建GridCol类型的FrameNode节点。 1588 1589**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1590 1591**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1592 1593**参数：** 1594 1595| 参数名 | 类型 | 必填 | 说明 | 1596| ------------------ | ------------------ | ------------------- | ------------------- | 1597| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1598| nodeType | 'GridCol' | 是 | 创建GridCol类型的FrameNode节点。 | 1599 1600**返回值：** 1601 1602| 类型 | 说明 | 1603| ------------------ | ------------------ | 1604| [GridCol](#gridcol12) | GridCol类型的FrameNode节点。 | 1605 1606**示例：** 1607 1608```ts 1609typeNode.createNode(uiContext, 'GridCol'); 1610``` 1611### Flex<sup>12+</sup> 1612type Flex = TypedFrameNode<FlexInterface, FlexAttribute> 1613 1614Flex类型的FrameNode节点类型。 1615 1616**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1617 1618**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1619 1620| 类型 | 说明 | 1621| -------------------------------------------------- | ------------------------------------------------------------ | 1622| TypedFrameNode<FlexInterface, FlexAttribute> | 提供Flex类型FrameNode节点。<br/>**说明：**<br/> FlexInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Flex组件的构造函数类型。 <br/> FlexAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Flex组件的属性设置对象。 | 1623 1624### createNode('Flex')<sup>12+</sup> 1625createNode(context: UIContext, nodeType: 'Flex'): Flex 1626 1627创建Flex类型的FrameNode节点。 1628 1629**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1630 1631**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1632 1633**参数：** 1634 1635| 参数名 | 类型 | 必填 | 说明 | 1636| ------------------ | ------------------ | ------------------- | ------------------- | 1637| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1638| nodeType | 'Flex' | 是 | 创建Flex类型的FrameNode节点。 | 1639 1640**返回值：** 1641 1642| 类型 | 说明 | 1643| ------------------ | ------------------ | 1644| [Flex](#flex12) | Flex类型的FrameNode节点。 | 1645 1646**示例：** 1647 1648```ts 1649typeNode.createNode(uiContext, 'Flex'); 1650``` 1651### Swiper<sup>12+</sup> 1652type Swiper = TypedFrameNode<SwiperInterface, SwiperAttribute> 1653 1654Swiper类型的FrameNode节点类型。 1655 1656**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1657 1658**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1659 1660| 类型 | 说明 | 1661| ------------------------------------------------------ | ------------------------------------------------------------ | 1662| TypedFrameNode<SwiperInterface, SwiperAttribute> | 提供Swiper类型FrameNode节点。<br/>**说明：**<br/> SwiperInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Swiper组件的构造函数类型。 <br/> SwiperAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Swiper组件的属性设置对象。 | 1663 1664### createNode('Swiper')<sup>12+</sup> 1665createNode(context: UIContext, nodeType: 'Swiper'): Swiper 1666 1667创建Swiper类型的FrameNode节点。 1668 1669**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1670 1671**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1672 1673**参数：** 1674 1675| 参数名 | 类型 | 必填 | 说明 | 1676| ------------------ | ------------------ | ------------------- | ------------------- | 1677| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1678| nodeType | 'Swiper' | 是 | 创建Swiper类型的FrameNode节点。 | 1679 1680**返回值：** 1681 1682| 类型 | 说明 | 1683| ------------------ | ------------------ | 1684| [Swiper](#swiper12) | Swiper类型的FrameNode节点。 | 1685 1686**示例：** 1687 1688```ts 1689typeNode.createNode(uiContext, 'Swiper'); 1690``` 1691### Progress<sup>12+</sup> 1692type Progress = TypedFrameNode<ProgressInterface, ProgressAttribute> 1693 1694Progress类型的FrameNode节点类型。不允许添加子组件。 1695 1696**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1697 1698**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1699 1700| 类型 | 说明 | 1701| ---------------------------------------------------------- | ------------------------------------------------------------ | 1702| TypedFrameNode<ProgressInterface, ProgressAttribute> | 提供Progress类型FrameNode节点。<br/>**说明：**<br/> ProgressInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Progress组件的构造函数类型。 <br/> ProgressAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Progress组件的属性设置对象。 | 1703 1704### createNode('Progress')<sup>12+</sup> 1705createNode(context: UIContext, nodeType: 'Progress'): Progress 1706 1707创建Progress类型的FrameNode节点。 1708 1709**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1710 1711**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1712 1713**参数：** 1714 1715| 参数名 | 类型 | 必填 | 说明 | 1716| ------------------ | ------------------ | ------------------- | ------------------- | 1717| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1718| nodeType | 'Progress' | 是 | 创建Progress类型的FrameNode节点。 | 1719 1720**返回值：** 1721 1722| 类型 | 说明 | 1723| ------------------ | ------------------ | 1724| [Progress](#progress12) | Progress类型的FrameNode节点。 | 1725 1726**示例：** 1727 1728```ts 1729typeNode.createNode(uiContext, 'Progress'); 1730``` 1731### Scroll<sup>12+</sup> 1732type Scroll = TypedFrameNode<ScrollInterface, ScrollAttribute> 1733 1734Scroll类型的FrameNode节点类型。允许添加一个子组件。 1735 1736**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1737 1738**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1739 1740| 类型 | 说明 | 1741| ------------------------------------------------------ | ------------------------------------------------------------ | 1742| TypedFrameNode<ScrollInterface, ScrollAttribute> | 提供Scroll类型FrameNode节点。<br/>**说明：**<br/> ScrollInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Scroll组件的构造函数类型。 <br/> ScrollAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Scroll组件的属性设置对象。 | 1743 1744### createNode('Scroll')<sup>12+</sup> 1745createNode(context: UIContext, nodeType: 'Scroll'): Scroll 1746 1747创建Scroll类型的FrameNode节点。 1748 1749**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1750 1751**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1752 1753**参数：** 1754 1755| 参数名 | 类型 | 必填 | 说明 | 1756| ------------------ | ------------------ | ------------------- | ------------------- | 1757| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1758| nodeType | 'Scroll' | 是 | 创建Scroll类型的FrameNode节点。 | 1759 1760**返回值：** 1761 1762| 类型 | 说明 | 1763| ------------------ | ------------------ | 1764| [Scroll](#scroll12) | Scroll类型的FrameNode节点。 | 1765 1766**示例：** 1767 1768```ts 1769typeNode.createNode(uiContext, 'Scroll'); 1770``` 1771### RelativeContainer<sup>12+</sup> 1772type RelativeContainer = TypedFrameNode<RelativeContainerInterface, RelativeContainerAttribute> 1773 1774RelativeContainer类型的FrameNode节点类型。 1775 1776**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1777 1778**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1779 1780| 类型 | 说明 | 1781| ------------------------------------------------------------ | ------------------------------------------------------------ | 1782| TypedFrameNode<RelativeContainerInterface, RelativeContainerAttribute> | 提供RelativeContainer类型FrameNode节点。<br/>**说明：**<br/> RelativeContainerInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为RelativeContainer组件的构造函数类型。 <br/> RelativeContainerAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回RelativeContainer组件的属性设置对象。 | 1783 1784### createNode('RelativeContainer')<sup>12+</sup> 1785createNode(context: UIContext, nodeType: 'RelativeContainer'): RelativeContainer 1786 1787创建RelativeContainer类型的FrameNode节点。 1788 1789**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1790 1791**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1792 1793**参数：** 1794 1795| 参数名 | 类型 | 必填 | 说明 | 1796| ------------------ | ------------------ | ------------------- | ------------------- | 1797| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1798| nodeType | 'RelativeContainer' | 是 | 创建RelativeContainer类型的FrameNode节点。 | 1799 1800**返回值：** 1801 1802| 类型 | 说明 | 1803| ------------------ | ------------------ | 1804| [RelativeContainer](#relativecontainer12) | RelativeContainer类型的FrameNode节点。 | 1805 1806**示例：** 1807 1808```ts 1809typeNode.createNode(uiContext, 'RelativeContainer'); 1810``` 1811### Divider<sup>12+</sup> 1812type Divider = TypedFrameNode<DividerInterface, DividerAttribute> 1813 1814Divider类型的FrameNode节点类型。不允许添加子组件。 1815 1816**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1817 1818**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1819 1820| 类型 | 说明 | 1821| -------------------------------------------------------- | ------------------------------------------------------------ | 1822| TypedFrameNode<DividerInterface, DividerAttribute> | 提供Divider类型FrameNode节点。<br/>**说明：**<br/> DividerInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为RelativeContainer组件的构造函数类型。 <br/> DividerAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Divider组件的属性设置对象。 | 1823 1824### createNode('Divider')<sup>12+</sup> 1825createNode(context: UIContext, nodeType: 'Divider'): Divider 1826 1827创建Divider类型的FrameNode节点。 1828 1829**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1830 1831**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1832 1833**参数：** 1834 1835| 参数名 | 类型 | 必填 | 说明 | 1836| ------------------ | ------------------ | ------------------- | ------------------- | 1837| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1838| nodeType | 'Divider' | 是 | 创建Divider类型的FrameNode节点。 | 1839 1840**返回值：** 1841 1842| 类型 | 说明 | 1843| ------------------ | ------------------ | 1844| [Divider](#divider12) | Divider类型的FrameNode节点。 | 1845 1846**示例：** 1847 1848```ts 1849typeNode.createNode(uiContext, 'Divider'); 1850``` 1851### LoadingProgress<sup>12+</sup> 1852type LoadingProgress = TypedFrameNode<LoadingProgressInterface, LoadingProgressAttribute> 1853 1854LoadingProgress类型的FrameNode节点类型。不允许添加子组件。 1855 1856**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1857 1858**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1859 1860| 类型 | 说明 | 1861| ------------------------------------------------------------ | ------------------------------------------------------------ | 1862| TypedFrameNode<LoadingProgressInterface, LoadingProgressAttribute> | 提供LoadingProgress类型FrameNode节点。<br/>**说明：**<br/> LoadingProgressInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为LoadingProgress组件的构造函数类型。 <br/> LoadingProgressAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回LoadingProgress组件的属性设置对象。 | 1863 1864### createNode('LoadingProgress')<sup>12+</sup> 1865createNode(context: UIContext, nodeType: 'LoadingProgress'): LoadingProgress 1866 1867创建LoadingProgress类型的FrameNode节点。 1868 1869**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1870 1871**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1872 1873**参数：** 1874 1875| 参数名 | 类型 | 必填 | 说明 | 1876| ------------------ | ------------------ | ------------------- | ------------------- | 1877| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1878| nodeType | 'LoadingProgress' | 是 | 创建LoadingProgress类型的FrameNode节点。 | 1879 1880**返回值：** 1881 1882| 类型 | 说明 | 1883| ------------------ | ------------------ | 1884| [LoadingProgress](#loadingprogress12) | LoadingProgress类型的FrameNode节点。 | 1885 1886**示例：** 1887 1888```ts 1889typeNode.createNode(uiContext, 'LoadingProgress'); 1890``` 1891### Search<sup>12+</sup> 1892type Search = TypedFrameNode<SearchInterface, SearchAttribute> 1893 1894Search类型的FrameNode节点类型。 1895 1896**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1897 1898**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1899 1900| 类型 | 说明 | 1901| ------------------------------------------------------ | ------------------------------------------------------------ | 1902| TypedFrameNode<SearchInterface, SearchAttribute> | 提供Search类型FrameNode节点。<br/>**说明：**<br/> SearchInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Search组件的构造函数类型。 <br/> SearchAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Search组件的属性设置对象。 | 1903 1904### createNode('Search')<sup>12+</sup> 1905createNode(context: UIContext, nodeType: 'Search'): Search 1906 1907创建Search类型的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 | 'Search' | 是 | 创建Search类型的FrameNode节点。 | 1919 1920**返回值：** 1921 1922| 类型 | 说明 | 1923| ------------------ | ------------------ | 1924| [Search](#search12) | Search类型的FrameNode节点。 | 1925 1926**示例：** 1927 1928```ts 1929typeNode.createNode(uiContext, 'Search'); 1930``` 1931### Blank<sup>12+</sup> 1932type Blank = TypedFrameNode<BlankInterface, BlankAttribute> 1933 1934Blank类型的FrameNode节点类型。不允许添加子组件。 1935 1936**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1937 1938**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1939 1940| 类型 | 说明 | 1941| ---------------------------------------------------- | ------------------------------------------------------------ | 1942| TypedFrameNode<BlankInterface, BlankAttribute> | 提供Blank类型FrameNode节点。<br/>**说明：**<br/> BlankInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Blank组件的构造函数类型。 <br/> BlankAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Blank组件的属性设置对象。 | 1943 1944### createNode('Blank')<sup>12+</sup> 1945createNode(context: UIContext, nodeType: 'Blank'): Blank; 1946 1947创建Blank类型的FrameNode节点。 1948 1949**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1950 1951**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1952 1953**参数：** 1954 1955| 参数名 | 类型 | 必填 | 说明 | 1956| ------------------ | ------------------ | ------------------- | ------------------- | 1957| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1958| nodeType | 'Blank' | 是 | 创建Blank类型的FrameNode节点。 | 1959 1960**返回值：** 1961 1962| 类型 | 说明 | 1963| ------------------ | ------------------ | 1964| [Blank](#blank12) | Blank类型的FrameNode节点。 | 1965 1966**示例：** 1967 1968```ts 1969typeNode.createNode(uiContext, 'Blank'); 1970``` 1971### Image<sup>12+</sup> 1972type Image = TypedFrameNode<ImageInterface, ImageAttribute> 1973 1974Image类型的FrameNode节点类型。不允许添加子组件。 1975 1976**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1977 1978**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1979 1980| 类型 | 说明 | 1981| ---------------------------------------------------- | ------------------------------------------------------------ | 1982| TypedFrameNode<ImageInterface, ImageAttribute> | 提供Image类型FrameNode节点。<br/>**说明：**<br/> ImageInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Image组件的构造函数类型。 <br/> ImageAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Image组件的属性设置对象。 | 1983 1984### createNode('Image')<sup>12+</sup> 1985createNode(context: UIContext, nodeType: 'Image'): Image 1986 1987创建Image类型的FrameNode节点。 1988 1989**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1990 1991**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1992 1993**参数：** 1994 1995| 参数名 | 类型 | 必填 | 说明 | 1996| ------------------ | ------------------ | ------------------- | ------------------- | 1997| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 1998| nodeType | 'Image' | 是 | 创建Image类型的节点。 | 1999 2000**返回值：** 2001 2002| 类型 | 说明 | 2003| ------------------ | ------------------ | 2004| [Image](#image12) | Image类型的FrameNode节点。 | 2005 2006**示例：** 2007 2008```ts 2009typeNode.createNode(uiContext, 'Image'); 2010``` 2011### List<sup>12+</sup> 2012type List = TypedFrameNode<ListInterface, ListAttribute> 2013 2014List类型的FrameNode节点类型。只允许添加ListItem、ListItemGroup类型子组件。 2015 2016**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2017 2018**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2019 2020| 类型 | 说明 | 2021| -------------------------------------------------- | ------------------------------------------------------------ | 2022| TypedFrameNode<ListInterface, ListAttribute> | 提供List类型FrameNode节点。<br/>**说明：**<br/> ListInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为List组件的构造函数类型。 <br/> ListAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回List组件的属性设置对象。 | 2023 2024### createNode('List')<sup>12+</sup> 2025createNode(context: UIContext, nodeType: 'List'): List 2026 2027创建List类型的FrameNode节点。 2028 2029**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2030 2031**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2032 2033**参数：** 2034 2035| 参数名 | 类型 | 必填 | 说明 | 2036| ------------------ | ------------------ | ------------------- | ------------------- | 2037| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2038| nodeType | 'List' | 是 | 创建List类型的节点。 | 2039 2040**返回值：** 2041 2042| 类型 | 说明 | 2043| ------------------ | ------------------ | 2044| [List](#list12) | List类型的FrameNode节点。 | 2045 2046**示例：** 2047 2048```ts 2049typeNode.createNode(uiContext, 'List'); 2050``` 2051### ListItem<sup>12+</sup> 2052type ListItem = TypedFrameNode<ListItemInterface, ListItemAttribute> 2053 2054ListItem类型的FrameNode节点类型。 2055 2056**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2057 2058**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2059 2060| 类型 | 说明 | 2061| ---------------------------------------------------------- | ------------------------------------------------------------ | 2062| TypedFrameNode<ListItemInterface, ListItemAttribute> | 提供ListItem类型FrameNode节点。<br/>**说明：**<br/> ListItemInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为ListItem组件的构造函数类型。 <br/> ListItemAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回ListItem组件的属性设置对象。 | 2063 2064### createNode('ListItem')<sup>12+</sup> 2065createNode(context: UIContext, nodeType: 'ListItem'): ListItem 2066 2067创建ListItem类型的FrameNode节点。 2068 2069**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2070 2071**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2072 2073**参数：** 2074 2075| 参数名 | 类型 | 必填 | 说明 | 2076| ------------------ | ------------------ | ------------------- | ------------------- | 2077| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2078| nodeType | 'ListItem' | 是 | 创建ListItem类型的节点。 | 2079 2080**返回值：** 2081 2082| 类型 | 说明 | 2083| ------------------ | ------------------ | 2084| [ListItem](#listitem12) | ListItem类型的FrameNode节点。 | 2085 2086**示例：** 2087 2088```ts 2089typeNode.createNode(uiContext, 'ListItem'); 2090``` 2091 2092### TextInput<sup>12+</sup> 2093type TextInput = TypedFrameNode<TextInputInterface, TextInputAttribute> 2094 2095TextInput类型的FrameNode节点类型。 2096 2097**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2098 2099**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2100 2101| 类型 | 说明 | 2102| ------------------------------------------------------------ | ------------------------------------------------------------ | 2103| TypedFrameNode<TextInputInterface, TextInputAttribute> | 提供TextInput类型FrameNode节点。<br/>**说明：**<br/> TextInputInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为TextInput组件的构造函数类型。 <br/> TextInputAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回TextInput组件的属性设置对象。 | 2104 2105### createNode('TextInput')<sup>12+</sup> 2106createNode(context: UIContext, nodeType: 'TextInput'): TextInput 2107 2108创建TextInput类型的FrameNode节点。 2109 2110**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2111 2112**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2113 2114**参数：** 2115 2116| 参数名 | 类型 | 必填 | 说明 | 2117| ------------------ | ------------------ | ------------------- | ------------------- | 2118| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2119| nodeType | 'TextInput' | 是 | 创建TextInput类型的节点。 | 2120 2121**返回值：** 2122 2123| 类型 | 说明 | 2124| ------------------ | ------------------ | 2125| [TextInput](#textinput12) | TextInput类型的FrameNode节点。 | 2126 2127**示例：** 2128 2129```ts 2130typeNode.createNode(uiContext, 'TextInput'); 2131``` 2132 2133### Button<sup>12+</sup> 2134type Button = TypedFrameNode<ButtonInterface, ButtonAttribute> 2135 2136Button类型的FrameNode节点类型。以子组件模式创建允许添加一个子组件。以label模式创建不可以添加子组件。 2137 2138**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2139 2140**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2141 2142| 类型 | 说明 | 2143| ------------------------------------------------------ | ------------------------------------------------------------ | 2144| 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/> 以子组件模式创建时，只能包含一个子组件，不能设置多个子组件，否则会抛出异常。 | 2145 2146### createNode('Button')<sup>12+</sup> 2147createNode(context: UIContext, nodeType: 'Button'): Button 2148 2149创建Button类型的FrameNode节点。 2150 2151**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2152 2153**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2154 2155**参数：** 2156 2157| 参数名 | 类型 | 必填 | 说明 | 2158| ------------------ | ------------------ | ------------------- | ------------------- | 2159| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2160| nodeType | 'Button' | 是 | 创建Button类型的节点。 | 2161 2162**返回值：** 2163 2164| 类型 | 说明 | 2165| ------------------ | ------------------ | 2166| [Button](#button12) | Button类型的FrameNode节点。 | 2167 2168**示例：** 2169 2170```ts 2171typeNode.createNode(uiContext, 'Button'); 2172``` 2173 2174### ListItemGroup<sup>12+</sup> 2175type ListItemGroup = TypedFrameNode<ListItemGroupInterface, ListItemGroupAttribute> 2176 2177ListItemGroup类型的FrameNode节点类型。只允许添加ListItem类型子组件。 2178 2179**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2180 2181**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2182 2183| 类型 | 说明 | 2184| ------------------------------------------------------------ | ------------------------------------------------------------ | 2185| TypedFrameNode<ListItemGroupInterface, ListItemGroupAttribute> | 提供ListItemGroup类型FrameNode节点。<br/>**说明：**<br/> ListItemGroupInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为ListItemGroup组件的构造函数类型。 <br/> ListItemGroupAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回ListItemGroup组件的属性设置对象。 | 2186 2187### createNode('ListItemGroup')<sup>12+</sup> 2188createNode(context: UIContext, nodeType: 'ListItemGroup'): ListItemGroup 2189 2190创建ListItemGroup类型的FrameNode节点。 2191 2192**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2193 2194**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2195 2196**参数：** 2197 2198| 参数名 | 类型 | 必填 | 说明 | 2199| ------------------ | ------------------ | ------------------- | ------------------- | 2200| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2201| nodeType | 'ListItemGroup' | 是 | 创建ListItemGroup类型的节点。 | 2202 2203**返回值：** 2204 2205| 类型 | 说明 | 2206| ------------------ | ------------------ | 2207| [ListItemGroup](#listitemgroup12) | ListItemGroup类型的FrameNode节点。 | 2208 2209**示例：** 2210 2211```ts 2212typeNode.createNode(uiContext, 'ListItemGroup'); 2213``` 2214 2215### WaterFlow<sup>12+</sup> 2216type WaterFlow = TypedFrameNode<WaterFlowInterface, WaterFlowAttribute> 2217 2218WaterFlow类型的FrameNode节点类型。只允许添加FlowItem类型子组件。 2219 2220**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2221 2222**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2223 2224| 类型 | 说明 | 2225| ------------------------------------------------------------ | ------------------------------------------------------------ | 2226| TypedFrameNode<WaterFlowInterface, WaterFlowAttribute> | 提供WaterFlow类型FrameNode节点。<br/>**说明：**<br/> WaterFlowInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为WaterFlow组件的构造函数类型。 <br/> WaterFlowAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回WaterFlow组件的属性设置对象。 | 2227 2228### createNode('WaterFlow')<sup>12+</sup> 2229createNode(context: UIContext, nodeType: 'WaterFlow'): WaterFlow 2230 2231创建WaterFlow类型的FrameNode节点。 2232 2233**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2234 2235**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2236 2237**参数：** 2238 2239| 参数名 | 类型 | 必填 | 说明 | 2240| ------------------ | ------------------ | ------------------- | ------------------- | 2241| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2242| nodeType | 'WaterFlow' | 是 | 创建WaterFlow类型的节点。 | 2243 2244**返回值：** 2245 2246| 类型 | 说明 | 2247| ------------------ | ------------------ | 2248| [WaterFlow](#waterflow12) | WaterFlow类型的FrameNode节点。 | 2249 2250**示例：** 2251 2252```ts 2253typeNode.createNode(uiContext, 'WaterFlow'); 2254``` 2255 2256### FlowItem<sup>12+</sup> 2257type FlowItem = TypedFrameNode<FlowItemInterface, FlowItemAttribute> 2258 2259FlowItem类型的FrameNode节点类型。允许添加一个子组件。 2260 2261**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2262 2263**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2264 2265| 类型 | 说明 | 2266| ---------------------------------------------------------- | ------------------------------------------------------------ | 2267| TypedFrameNode<FlowItemInterface, FlowItemAttribute> | 提供FlowItem类型FrameNode节点。<br/>**说明：**<br/> FlowItemInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为FlowItem组件的构造函数类型。 <br/> FlowItemAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回FlowItem组件的属性设置对象。 | 2268 2269### createNode('FlowItem')<sup>12+</sup> 2270createNode(context: UIContext, nodeType: 'FlowItem'): FlowItem 2271 2272创建FlowItem类型的FrameNode节点。 2273 2274**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2275 2276**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2277 2278**参数：** 2279 2280| 参数名 | 类型 | 必填 | 说明 | 2281| ------------------ | ------------------ | ------------------- | ------------------- | 2282| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2283| nodeType | 'FlowItem' | 是 | 创建FlowItem类型的节点。 | 2284 2285**返回值：** 2286 2287| 类型 | 说明 | 2288| ------------------ | ------------------ | 2289| [FlowItem](#flowitem12) | FlowItem类型的FrameNode节点。 | 2290 2291**示例：** 2292 2293```ts 2294typeNode.createNode(uiContext, 'FlowItem'); 2295``` 2296 2297### XComponent<sup>12+</sup> 2298type XComponent = TypedFrameNode<XComponentInterface, XComponentAttribute> 2299 2300XComponent类型的FrameNode节点类型。 2301 2302**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2303 2304**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2305 2306| 类型 | 说明 | 2307| ------------------------------------------------------------ | ------------------------------------------------------------ | 2308| TypedFrameNode<XComponentInterface, XComponentAttribute> | 提供XComponent类型FrameNode节点。<br/>**说明：**<br/> XComponentInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为XComponent组件的构造函数类型。 <br/> XComponentAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回XComponent组件的属性设置对象。 | 2309 2310### createNode('XComponent')<sup>12+</sup> 2311createNode(context: UIContext, nodeType: 'XComponent'): XComponent 2312 2313创建XComponent类型的FrameNode节点。 2314 2315**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2316 2317**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2318 2319**参数：** 2320 2321| 参数名 | 类型 | 必填 | 说明 | 2322| ------------------ | ------------------ | ------------------- | ------------------- | 2323| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2324| nodeType | 'XComponent' | 是 | 创建XComponent类型的节点。 | 2325 2326**返回值：** 2327 2328| 类型 | 说明 | 2329| ------------------ | ------------------ | 2330| [XComponent](#xcomponent12) | XComponent类型的FrameNode节点。 | 2331 2332**示例：** 2333 2334```ts 2335typeNode.createNode(uiContext, 'XComponent'); 2336``` 2337 2338### createNode('XComponent')<sup>12+</sup> 2339createNode(context: UIContext, nodeType: 'XComponent', options: XComponentOptions): XComponent 2340 2341按照options中的配置参数创建XComponent类型的FrameNode节点。 2342 2343**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2344 2345**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2346 2347**参数：** 2348 2349| 参数名 | 类型 | 必填 | 说明 | 2350| ------------------ | ------------------ | ------------------- | ------------------- | 2351| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2352| nodeType | 'XComponent' | 是 | 创建XComponent类型的节点。 | 2353| options | [XComponentOptions](./arkui-ts/ts-basic-components-xcomponent.md#xcomponentoptions12) | 是 | 定义XComponent的具体配置参数。 | 2354 2355**返回值：** 2356 2357| 类型 | 说明 | 2358| ------------------ | ------------------ | 2359| [XComponent](#xcomponent12) | XComponent类型的FrameNode节点。 | 2360 2361**示例：** 2362 2363```ts 2364let controller: XComponentController = new XComponentController(); 2365let options: XComponentOptions = { 2366 type: XComponentType.TEXTURE, 2367 controller: controller 2368}; 2369typeNode.createNode(uiContext, 'XComponent', options); 2370``` 2371 2372### QRCode<sup>13+</sup> 2373type QRCode = TypedFrameNode<QRCodeInterface, QRCodeAttribute> 2374 2375QRCode类型的FrameNode节点类型。 2376 2377**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2378 2379**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2380 2381| 类型 | 说明 | 2382| ----------------------------- | -------------------- | 2383| TypedFrameNode<QRCodeInterface, QRCodeAttribute> | 提供QRCode类型FrameNode节点。<br/>**说明：**<br/> QRCodeInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为QRCode组件的构造函数类型。 <br/> QRCodeAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回QRCode组件的属性设置对象。 | 2384 2385### createNode('QRCode')<sup>13+</sup> 2386createNode(context: UIContext, nodeType: 'QRCode'): QRCode 2387 2388创建QRCode类型的FrameNode节点。 2389 2390**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2391 2392**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2393 2394**参数：** 2395 2396| 参数名 | 类型 | 必填 | 说明 | 2397| ------------------ | ------------------ | ------------------- | ------------------- | 2398| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2399| nodeType | 'QRCode' | 是 | 创建QRCode类型的节点。 | 2400 2401**返回值：** 2402 2403| 类型 | 说明 | 2404| ------------------ | ------------------ | 2405| [QRCode](#qrcode13) | QRCode类型的FrameNode节点。 | 2406 2407**示例：** 2408 2409```ts 2410typeNode.createNode(uiContext, 'QRCode'); 2411``` 2412 2413### Badge<sup>13+</sup> 2414type Badge = TypedFrameNode<BadgeInterface, BadgeAttribute> 2415 2416Badge类型的FrameNode节点类型。 2417 2418**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2419 2420**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2421 2422| 类型 | 说明 | 2423| ----------------------------- | -------------------- | 2424| TypedFrameNode<BadgeInterface, BadgeAttribute> | 提供Badge类型FrameNode节点。<br/>**说明：**<br/> BadgeInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Badge组件的构造函数类型。 <br/> BadgeAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Badge组件的属性设置对象。 | 2425 2426### createNode('Badge')<sup>13+</sup> 2427createNode(context: UIContext, nodeType: 'Badge'): Badge 2428 2429创建Badge类型的FrameNode节点。 2430 2431**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2432 2433**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2434 2435**参数：** 2436 2437| 参数名 | 类型 | 必填 | 说明 | 2438| ------------------ | ------------------ | ------------------- | ------------------- | 2439| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2440| nodeType | 'Badge' | 是 | 创建Badge类型的节点。 | 2441 2442**返回值：** 2443 2444| 类型 | 说明 | 2445| ------------------ | ------------------ | 2446| [Badge](#badge13) | Badge类型的FrameNode节点。 | 2447 2448**示例：** 2449 2450```ts 2451typeNode.createNode(uiContext, 'Badge'); 2452``` 2453 2454### Grid<sup>13+</sup> 2455type Grid = TypedFrameNode<GridInterface, GridAttribute> 2456 2457Grid类型的FrameNode节点类型。 2458 2459**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2460 2461**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2462 2463| 类型 | 说明 | 2464| ----------------------------- | -------------------- | 2465| TypedFrameNode<GridInterface, GridAttribute> | 提供Grid类型FrameNode节点。<br/>**说明：**<br/> GridInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Grid组件的构造函数类型。 <br/> GridAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Grid组件的属性设置对象。 | 2466 2467### createNode('Grid')<sup>13+</sup> 2468createNode(context: UIContext, nodeType: 'Grid'): Grid 2469 2470创建Grid类型的FrameNode节点。 2471 2472**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2473 2474**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2475 2476**参数：** 2477 2478| 参数名 | 类型 | 必填 | 说明 | 2479| ------------------ | ------------------ | ------------------- | ------------------- | 2480| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2481| nodeType | 'Grid' | 是 | 创建Grid类型的节点。 | 2482 2483**返回值：** 2484 2485| 类型 | 说明 | 2486| ------------------ | ------------------ | 2487| [Grid](#grid13) | Grid类型的FrameNode节点。 | 2488 2489**示例：** 2490 2491```ts 2492typeNode.createNode(uiContext, 'Grid'); 2493``` 2494 2495### GridItem<sup>13+</sup> 2496type GridItem = TypedFrameNode<GridItemInterface, GridItemAttribute> 2497 2498GridItem类型的FrameNode节点类型。 2499 2500**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2501 2502**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2503 2504| 类型 | 说明 | 2505| ----------------------------- | -------------------- | 2506| TypedFrameNode<GridItemInterface, GridItemAttribute> | 提供GridItem类型FrameNode节点。<br/>**说明：**<br/> GridItemInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为GridItem组件的构造函数类型。 <br/> GridItemAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回GridItem组件的属性设置对象。 | 2507 2508### createNode('GridItem')<sup>13+</sup> 2509createNode(context: UIContext, nodeType: 'GridItem'): GridItem 2510 2511创建GridItem类型的FrameNode节点。 2512 2513**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2514 2515**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2516 2517**参数：** 2518 2519| 参数名 | 类型 | 必填 | 说明 | 2520| ------------------ | ------------------ | ------------------- | ------------------- | 2521| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2522| nodeType | 'GridItem' | 是 | 创建GridItem类型的节点。 | 2523 2524**返回值：** 2525 2526| 类型 | 说明 | 2527| ------------------ | ------------------ | 2528| [GridItem](#griditem13) | GridItem类型的FrameNode节点。 | 2529 2530**示例：** 2531 2532```ts 2533typeNode.createNode(uiContext, 'GridItem'); 2534``` 2535 2536### TextClock<sup>13+</sup> 2537type TextClock = TypedFrameNode<TextClockInterface, TextClockAttribute> 2538 2539TextClock类型的FrameNode节点类型。 2540 2541**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2542 2543**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2544 2545| 类型 | 说明 | 2546| ----------------------------- | -------------------- | 2547| TypedFrameNode<TextClockInterface, TextClockAttribute> | 提供TextClock类型FrameNode节点。<br/>**说明：**<br/> TextClockInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为TextClock组件的构造函数类型。 <br/> TextClockAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回TextClock组件的属性设置对象。 | 2548 2549### createNode('TextClock')<sup>13+</sup> 2550createNode(context: UIContext, nodeType: 'TextClock'): TextClock 2551 2552创建TextClock类型的FrameNode节点。 2553 2554**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2555 2556**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2557 2558**参数：** 2559 2560| 参数名 | 类型 | 必填 | 说明 | 2561| ------------------ | ------------------ | ------------------- | ------------------- | 2562| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2563| nodeType | 'TextClock' | 是 | 创建TextClock类型的节点。 | 2564 2565**返回值：** 2566 2567| 类型 | 说明 | 2568| ------------------ | ------------------ | 2569| [TextClock](#textclock13) | TextClock类型的FrameNode节点。 | 2570 2571**示例：** 2572 2573```ts 2574typeNode.createNode(uiContext, 'TextClock'); 2575``` 2576 2577### TextTimer<sup>13+</sup> 2578type TextTimer = TypedFrameNode<TextTimerInterface, TextTimerAttribute> 2579 2580TextTimer类型的FrameNode节点类型。 2581 2582**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2583 2584**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2585 2586| 类型 | 说明 | 2587| ----------------------------- | -------------------- | 2588| TypedFrameNode<TextTimerInterface, TextTimerAttribute> | 提供TextTimer类型FrameNode节点。<br/>**说明：**<br/> TextTimerInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为TextTimer组件的构造函数类型。 <br/> TextTimerAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回TextTimer组件的属性设置对象。 | 2589 2590### createNode('TextTimer')<sup>13+</sup> 2591createNode(context: UIContext, nodeType: 'TextTimer'): TextTimer 2592 2593创建TextTimer类型的FrameNode节点。 2594 2595**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2596 2597**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2598 2599**参数：** 2600 2601| 参数名 | 类型 | 必填 | 说明 | 2602| ------------------ | ------------------ | ------------------- | ------------------- | 2603| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2604| nodeType | 'TextTimer' | 是 | 创建TextTimer类型的节点。 | 2605 2606**返回值：** 2607 2608| 类型 | 说明 | 2609| ------------------ | ------------------ | 2610| [TextTimer](#texttimer13) | TextTimer类型的FrameNode节点。 | 2611 2612**示例：** 2613 2614```ts 2615typeNode.createNode(uiContext, 'TextTimer'); 2616``` 2617 2618### Marquee<sup>13+</sup> 2619type Marquee = TypedFrameNode<MarqueeInterface, MarqueeAttribute> 2620 2621Marquee类型的FrameNode节点类型。 2622 2623**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2624 2625**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2626 2627| 类型 | 说明 | 2628| ----------------------------- | -------------------- | 2629| TypedFrameNode<MarqueeInterface, MarqueeAttribute> | 提供Marquee类型FrameNode节点。<br/>**说明：**<br/> MarqueeInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Marquee组件的构造函数类型。 <br/> MarqueeAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Marquee组件的属性设置对象。 | 2630 2631### createNode('Marquee')<sup>13+</sup> 2632createNode(context: UIContext, nodeType: 'Marquee'): Marquee 2633 2634创建Marquee类型的FrameNode节点。 2635 2636**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2637 2638**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2639 2640**参数：** 2641 2642| 参数名 | 类型 | 必填 | 说明 | 2643| ------------------ | ------------------ | ------------------- | ------------------- | 2644| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2645| nodeType | 'Marquee' | 是 | 创建Marquee类型的节点。 | 2646 2647**返回值：** 2648 2649| 类型 | 说明 | 2650| ------------------ | ------------------ | 2651| [Marquee](#marquee13) | Marquee类型的FrameNode节点。 | 2652 2653**示例：** 2654 2655```ts 2656typeNode.createNode(uiContext, 'Marquee'); 2657``` 2658 2659### TextArea<sup>13+</sup> 2660type TextArea = TypedFrameNode<TextAreaInterface, TextAreaAttribute> 2661 2662TextArea类型的FrameNode节点类型。 2663 2664**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2665 2666**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2667 2668| 类型 | 说明 | 2669| ----------------------------- | -------------------- | 2670| TypedFrameNode<TextAreaInterface, TextAreaAttribute> | 提供TextArea类型FrameNode节点。<br/>**说明：**<br/> TextAreaInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为TextArea组件的构造函数类型。 <br/> TextAreaAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回TextArea组件的属性设置对象。 | 2671 2672### createNode('TextArea')<sup>13+</sup> 2673createNode(context: UIContext, nodeType: 'TextArea'): TextArea 2674 2675创建TextArea类型的FrameNode节点。 2676 2677**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2678 2679**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2680 2681**参数：** 2682 2683| 参数名 | 类型 | 必填 | 说明 | 2684| ------------------ | ------------------ | ------------------- | ------------------- | 2685| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2686| nodeType | 'TextArea' | 是 | 创建TextArea类型的节点。 | 2687 2688**返回值：** 2689 2690| 类型 | 说明 | 2691| ------------------ | ------------------ | 2692| [TextArea](#textarea13) | TextArea类型的FrameNode节点。 | 2693 2694**示例：** 2695 2696```ts 2697typeNode.createNode(uiContext, 'TextArea'); 2698``` 2699 2700### SymbolGlyph<sup>13+</sup> 2701type SymbolGlyph = TypedFrameNode<SymbolGlyphInterface, SymbolGlyphAttribute> 2702 2703SymbolGlyph类型的FrameNode节点类型。 2704 2705**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2706 2707**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2708 2709| 类型 | 说明 | 2710| ----------------------------- | -------------------- | 2711| TypedFrameNode<SymbolGlyphInterface, SymbolGlyphAttribute> | 提供SymbolGlyph类型FrameNode节点。<br/>**说明：**<br/> SymbolGlyphInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为SymbolGlyph组件的构造函数类型。 <br/> SymbolGlyphAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回SymbolGlyph组件的属性设置对象。 | 2712 2713### createNode('SymbolGlyph')<sup>13+</sup> 2714createNode(context: UIContext, nodeType: 'SymbolGlyph'): SymbolGlyph 2715 2716创建SymbolGlyph类型的FrameNode节点。 2717 2718**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2719 2720**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2721 2722**参数：** 2723 2724| 参数名 | 类型 | 必填 | 说明 | 2725| ------------------ | ------------------ | ------------------- | ------------------- | 2726| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2727| nodeType | 'SymbolGlyph' | 是 | 创建SymbolGlyph类型的节点。 | 2728 2729**返回值：** 2730 2731| 类型 | 说明 | 2732| ------------------ | ------------------ | 2733| [SymbolGlyph](#symbolglyph13) | SymbolGlyph类型的FrameNode节点。 | 2734 2735**示例：** 2736 2737```ts 2738typeNode.createNode(uiContext, 'SymbolGlyph'); 2739``` 2740 2741### Checkbox<sup>13+</sup> 2742type Checkbox = TypedFrameNode<CheckboxInterface, CheckboxAttribute> 2743 2744Checkbox类型的FrameNode节点类型。 2745 2746**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2747 2748**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2749 2750| 类型 | 说明 | 2751| ----------------------------- | -------------------- | 2752| TypedFrameNode<CheckboxInterface, CheckboxAttribute> | 提供Checkbox类型FrameNode节点。<br/>**说明：**<br/> CheckboxInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Checkbox组件的构造函数类型。 <br/> CheckboxAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Checkbox组件的属性设置对象。 | 2753 2754### createNode('Checkbox')<sup>13+</sup> 2755createNode(context: UIContext, nodeType: 'Checkbox'): Checkbox 2756 2757创建Checkbox类型的FrameNode节点。 2758 2759**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2760 2761**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2762 2763**参数：** 2764 2765| 参数名 | 类型 | 必填 | 说明 | 2766| ------------------ | ------------------ | ------------------- | ------------------- | 2767| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2768| nodeType | 'Checkbox' | 是 | 创建Checkbox类型的节点。 | 2769 2770**返回值：** 2771 2772| 类型 | 说明 | 2773| ------------------ | ------------------ | 2774| [Checkbox](#checkbox13) | Checkbox类型的FrameNode节点。 | 2775 2776**示例：** 2777 2778```ts 2779typeNode.createNode(uiContext, 'Checkbox'); 2780``` 2781 2782### CheckboxGroup<sup>13+</sup> 2783type CheckboxGroup = TypedFrameNode<CheckboxGroupInterface, CheckboxGroupAttribute> 2784 2785CheckboxGroup类型的FrameNode节点类型。 2786 2787**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2788 2789**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2790 2791| 类型 | 说明 | 2792| ----------------------------- | -------------------- | 2793| TypedFrameNode<CheckboxGroupInterface, CheckboxGroupAttribute> | 提供CheckboxGroup类型FrameNode节点。<br/>**说明：**<br/> CheckboxGroupInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为CheckboxGroup组件的构造函数类型。 <br/> CheckboxGroupAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回CheckboxGroup组件的属性设置对象。 | 2794 2795### createNode('CheckboxGroup')<sup>13+</sup> 2796createNode(context: UIContext, nodeType: 'CheckboxGroup'): CheckboxGroup 2797 2798创建CheckboxGroup类型的FrameNode节点。 2799 2800**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2801 2802**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2803 2804**参数：** 2805 2806| 参数名 | 类型 | 必填 | 说明 | 2807| ------------------ | ------------------ | ------------------- | ------------------- | 2808| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2809| nodeType | 'CheckboxGroup' | 是 | 创建CheckboxGroup类型的节点。 | 2810 2811**返回值：** 2812 2813| 类型 | 说明 | 2814| ------------------ | ------------------ | 2815| [CheckboxGroup](#checkboxgroup13) | CheckboxGroup类型的FrameNode节点。 | 2816 2817**示例：** 2818 2819```ts 2820typeNode.createNode(uiContext, 'CheckboxGroup'); 2821``` 2822 2823### Rating<sup>13+</sup> 2824type Rating = TypedFrameNode<RatingInterface, RatingAttribute> 2825 2826Rating类型的FrameNode节点类型。 2827 2828**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2829 2830**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2831 2832| 类型 | 说明 | 2833| ----------------------------- | -------------------- | 2834| TypedFrameNode<RatingInterface, RatingAttribute> | 提供Rating类型FrameNode节点。<br/>**说明：**<br/> RatingInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Rating组件的构造函数类型。 <br/> RatingAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Rating组件的属性设置对象。 | 2835 2836### createNode('Rating')<sup>13+</sup> 2837createNode(context: UIContext, nodeType: 'Rating'): Rating 2838 2839创建Rating类型的FrameNode节点。 2840 2841**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2842 2843**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2844 2845**参数：** 2846 2847| 参数名 | 类型 | 必填 | 说明 | 2848| ------------------ | ------------------ | ------------------- | ------------------- | 2849| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2850| nodeType | 'Rating' | 是 | 创建Rating类型的节点。 | 2851 2852**返回值：** 2853 2854| 类型 | 说明 | 2855| ------------------ | ------------------ | 2856| [Rating](#rating13) | Rating类型的FrameNode节点。 | 2857 2858**示例：** 2859 2860```ts 2861typeNode.createNode(uiContext, 'Rating'); 2862``` 2863 2864### Radio<sup>13+</sup> 2865type Radio = TypedFrameNode<RadioInterface, RadioAttribute> 2866 2867Radio类型的FrameNode节点类型。 2868 2869**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2870 2871**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2872 2873| 类型 | 说明 | 2874| ----------------------------- | -------------------- | 2875| TypedFrameNode<RadioInterface, RadioAttribute> | 提供Radio类型FrameNode节点。<br/>**说明：**<br/> RadioInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Radio组件的构造函数类型。 <br/> RadioAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Radio组件的属性设置对象。 | 2876 2877### createNode('Radio')<sup>13+</sup> 2878createNode(context: UIContext, nodeType: 'Radio'): Radio 2879 2880创建Radio类型的FrameNode节点。 2881 2882**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2883 2884**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2885 2886**参数：** 2887 2888| 参数名 | 类型 | 必填 | 说明 | 2889| ------------------ | ------------------ | ------------------- | ------------------- | 2890| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2891| nodeType | 'Radio' | 是 | 创建Radio类型的节点。 | 2892 2893**返回值：** 2894 2895| 类型 | 说明 | 2896| ------------------ | ------------------ | 2897| [Radio](#radio13) | Radio类型的FrameNode节点。 | 2898 2899**示例：** 2900 2901```ts 2902typeNode.createNode(uiContext, 'Radio'); 2903``` 2904 2905### Slider<sup>13+</sup> 2906type Slider = TypedFrameNode<SliderInterface, SliderAttribute> 2907 2908Slider类型的FrameNode节点类型。 2909 2910**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2911 2912**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2913 2914| 类型 | 说明 | 2915| ----------------------------- | -------------------- | 2916| TypedFrameNode<SliderInterface, SliderAttribute> | 提供Slider类型FrameNode节点。<br/>**说明：**<br/> SliderInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Slider组件的构造函数类型。 <br/> SliderAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Slider组件的属性设置对象。 | 2917 2918### createNode('Slider')<sup>13+</sup> 2919createNode(context: UIContext, nodeType: 'Slider'): Slider 2920 2921创建Slider类型的FrameNode节点。 2922 2923**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2924 2925**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2926 2927**参数：** 2928 2929| 参数名 | 类型 | 必填 | 说明 | 2930| ------------------ | ------------------ | ------------------- | ------------------- | 2931| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2932| nodeType | 'Slider' | 是 | 创建Slider类型的节点。 | 2933 2934**返回值：** 2935 2936| 类型 | 说明 | 2937| ------------------ | ------------------ | 2938| [Slider](#slider13) | Slider类型的FrameNode节点。 | 2939 2940**示例：** 2941 2942```ts 2943typeNode.createNode(uiContext, 'Slider'); 2944``` 2945 2946### Select<sup>13+</sup> 2947type Select = TypedFrameNode<SelectInterface, SelectAttribute> 2948 2949Select类型的FrameNode节点类型。 2950 2951**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2952 2953**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2954 2955| 类型 | 说明 | 2956| ----------------------------- | -------------------- | 2957| TypedFrameNode<SelectInterface, SelectAttribute> | 提供Select类型FrameNode节点。<br/>**说明：**<br/> SelectInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Select组件的构造函数类型。 <br/> SelectAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Select组件的属性设置对象。 | 2958 2959### createNode('Select')<sup>13+</sup> 2960createNode(context: UIContext, nodeType: 'Select'): Select 2961 2962创建Select类型的FrameNode节点。 2963 2964**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2965 2966**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2967 2968**参数：** 2969 2970| 参数名 | 类型 | 必填 | 说明 | 2971| ------------------ | ------------------ | ------------------- | ------------------- | 2972| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2973| nodeType | 'Select' | 是 | 创建Select类型的节点。 | 2974 2975**返回值：** 2976 2977| 类型 | 说明 | 2978| ------------------ | ------------------ | 2979| [Select](#select13) | Select类型的FrameNode节点。 | 2980 2981**示例：** 2982 2983```ts 2984typeNode.createNode(uiContext, 'Select'); 2985``` 2986 2987### Toggle<sup>13+</sup> 2988type Toggle = TypedFrameNode<ToggleInterface, ToggleAttribute> 2989 2990Toggle类型的FrameNode节点类型。 2991 2992**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 2993 2994**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2995 2996| 类型 | 说明 | 2997| ----------------------------- | -------------------- | 2998| TypedFrameNode<ToggleInterface, ToggleAttribute> | 提供Toggle类型FrameNode节点。<br/>**说明：**<br/> ToggleInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Toggle组件的构造函数类型。 <br/> ToggleAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Toggle组件的属性设置对象。 | 2999 3000### createNode('Toggle')<sup>13+</sup> 3001createNode(context: UIContext, nodeType: 'Toggle', options?: ToggleOptions): Toggle 3002 3003创建Toggle类型的FrameNode节点。 3004 3005**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 3006 3007**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3008 3009**参数：** 3010 3011| 参数名 | 类型 | 必填 | 说明 | 3012| ------------------ | ------------------ | ------------------- | ------------------- | 3013| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 创建对应节点时所需的UI上下文。 | 3014| nodeType | 'Toggle' | 是 | 创建Toggle类型的节点。 | 3015| options | ToggleOptions | 否 | 创建Toggle节点的接口参数。 | 3016 3017**返回值：** 3018 3019| 类型 | 说明 | 3020| ------------------ | ------------------ | 3021| [Toggle](#toggle13) | Toggle类型的FrameNode节点。 | 3022 3023**示例：** 3024 3025```ts 3026let toggleOptions: ToggleOptions = {type: ToggleType.Button, isOn: false}; 3027typeNode.createNode(uiContext, 'Toggle', toggleOptions); 3028``` 3029 3030## NodeAdapter<sup>12+</sup> 3031 3032NodeAdapter提供FrameNode的数据懒加载能力。 3033 3034> **说明：** 3035> 3036> 入参不能为负数，入参为负数时不做处理。 3037 3038**示例：** 3039 3040请参考[NodeAdapter使用示例](#nodeadapter使用示例)。 3041 3042### constructor<sup>12+</sup> 3043 3044constructor() 3045 3046NodeAdapter的构造函数。 3047 3048**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3049 3050**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3051 3052### dispose<sup>12+</sup> 3053 3054dispose(): void 3055 3056立即释放当前的NodeAdapter。如果是已绑定的状态，会先进行解绑操作，再释放当前的NodeAdapter。 3057 3058**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3059 3060**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3061 3062### totalNodeCount<sup>12+</sup> 3063 3064set totalNodeCount(count: number) 3065 3066设置数据节点总数。 3067 3068**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3069 3070**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3071 3072**参数：** 3073 3074| 参数名 | 类型 | 必填 | 说明 | 3075| ------- | ------------------------------------------------------ | ---- | ---------------- | 3076| count | number | 是 | 数据节点总数。 | 3077 3078get totalNodeCount(): number 3079 3080获取数据节点总数。 3081 3082**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3083 3084**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3085 3086**返回值：** 3087 3088| 类型 | 说明 | 3089| ----------------- | ------------ | 3090| number | 数据节点总数。 | 3091 3092### reloadAllItems<sup>12+</sup> 3093 3094reloadAllItems(): void 3095 3096重新加载全部数据操作。 3097 3098**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3099 3100**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3101 3102### reloadItem<sup>12+</sup> 3103 3104reloadItem(start: number, count: number): void 3105 3106从索引值开始重新加载指定数量的节点数据。 3107 3108**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3109 3110**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3111 3112**参数：** 3113 3114| 参数名 | 类型 | 必填 | 说明 | 3115| ------- | ------------------------------------------------------ | ---- | ---------------- | 3116| start | number | 是 | 重新加载的节点开始索引值。 | 3117| count | number | 是 | 重新加载数据节点的数量。 | 3118 3119### removeItem<sup>12+</sup> 3120 3121removeItem(start: number, count: number): void 3122 3123从索引值开始删除指定数量的节点数据。 3124 3125**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3126 3127**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3128 3129**参数：** 3130 3131| 参数名 | 类型 | 必填 | 说明 | 3132| ------- | ------------------------------------------------------ | ---- | ---------------- | 3133| start | number | 是 | 删除的节点开始索引值。 | 3134| count | number | 是 | 删除数据节点的数量。 | 3135 3136### insertItem<sup>12+</sup> 3137 3138insertItem(start: number, count: number): void 3139 3140从索引值开始新增指定数量的节点数据。 3141 3142**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3143 3144**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3145 3146**参数：** 3147 3148| 参数名 | 类型 | 必填 | 说明 | 3149| ------- | ------------------------------------------------------ | ---- | ---------------- | 3150| start | number | 是 | 新增的节点开始索引值。 | 3151| count | number | 是 | 新增数据节点的数量。 | 3152 3153### moveItem<sup>12+</sup> 3154 3155moveItem(from: number, to: number): void 3156 3157将数据从原始索引移动到目的索引。 3158 3159**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3160 3161**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3162 3163**参数：** 3164 3165| 参数名 | 类型 | 必填 | 说明 | 3166| ------- | ------------------------------------------------------ | ---- | ---------------- | 3167| from | number | 是 | 数据移动的原始索引值。 | 3168| to | number | 是 | 数据移动的目的索引值。 | 3169 3170### getAllAvailableItems<sup>12+</sup> 3171 3172getAllAvailableItems(): Array<FrameNode> 3173 3174获取所有有效数据。 3175 3176**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3177 3178**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3179 3180**返回值：** 3181 3182| 类型 | 说明 | 3183| ----------------- | ------------ | 3184| Array<FrameNode> | FrameNode数据节点集合。 | 3185 3186### onAttachToNode<sup>12+</sup> 3187 3188onAttachToNode?(target: FrameNode): void 3189 3190FrameNode绑定NodeAdapter时回调。 3191 3192**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3193 3194**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3195 3196**参数：** 3197 3198| 参数名 | 类型 | 必填 | 说明 | 3199| ------- | ------------------------------------------------------ | ---- | ---------------- | 3200| target | FrameNode | 是 | 绑定NodeAdapter的FrameNode节点。 | 3201 3202### onDetachFromNode<sup>12+</sup> 3203 3204onDetachFromNode?(): void 3205 3206解除绑定时回调。 3207 3208**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3209 3210**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3211 3212### onGetChildId<sup>12+</sup> 3213 3214onGetChildId?(index: number): number 3215 3216节点首次加载或新节点滑入时回调。用于生成自定义的Id，需要开发者自行保证Id的唯一性。 3217 3218**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3219 3220**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3221 3222**参数：** 3223 3224| 参数名 | 类型 | 必填 | 说明 | 3225| ------- | ------------------------------------------------------ | ---- | ---------------- | 3226| index | number | 是 | 加载节点索引值。 | 3227 3228**返回值：** 3229 3230| 类型 | 说明 | 3231| ----------------- | ------------ | 3232| number | 返回开发者自定义生成的Id，需要开发者自行保证Id的唯一性。 | 3233 3234### onCreateChild<sup>12+</sup> 3235 3236onCreateChild?(index: number): FrameNode 3237 3238节点首次加载或新节点滑入时回调。 3239 3240**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3241 3242**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3243 3244**参数：** 3245 3246| 参数名 | 类型 | 必填 | 说明 | 3247| ------- | ------------------------------------------------------ | ---- | ---------------- | 3248| index | number | 是 | 加载节点索引值。 | 3249 3250**返回值：** 3251 3252| 类型 | 说明 | 3253| ----------------- | ------------ | 3254| FrameNode | 返回开发者创建的FrameNode节点。 | 3255 3256### onDisposeChild<sup>12+</sup> 3257 3258onDisposeChild?(id: number, node: FrameNode): void 3259 3260子节点即将销毁时回调。 3261 3262**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3263 3264**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3265 3266**参数：** 3267 3268| 参数名 | 类型 | 必填 | 说明 | 3269| ------- | ------------------------------------------------------ | ---- | ---------------- | 3270| id | number | 是 | 即将销毁的子节点id。 | 3271| node | FrameNode | 是 | 即将销毁的FrameNode节点。 | 3272 3273### onUpdateChild<sup>12+</sup> 3274 3275onUpdateChild?(id: number, node: FrameNode): void 3276 3277重新加载的数据节点被复用时回调。 3278 3279**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3280 3281**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3282 3283**参数：** 3284 3285| 参数名 | 类型 | 必填 | 说明 | 3286| ------- | ------------------------------------------------------ | ---- | ---------------- | 3287| id | number | 是 | 复用节点索引值。 | 3288| node | FrameNode | 是 | 被复用的FrameNode节点。 | 3289 3290### attachNodeAdapter<sup>12+</sup> 3291 3292static attachNodeAdapter(adapter: NodeAdapter, node: FrameNode): boolean 3293 3294给FrameNode绑定一个NodeAdapter。一个节点只能绑定一个NodeAdapter。已经绑定NodeAdapter的再次绑定会失败并返回false。 3295 3296**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3297 3298**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3299 3300**参数：** 3301 3302| 参数名 | 类型 | 必填 | 说明 | 3303| ------- | ------------------------------------------------------ | ---- | ---------------- | 3304| adapter | [NodeAdapter](#nodeadapter12) | 是 | 定义懒加载的NodeAdapter类。 | 3305| node | FrameNode | 是 | 绑定的FrameNode节点。 | 3306 3307**返回值：** 3308 3309| 类型 | 说明 | 3310| ----------------- | ------------ | 3311| boolean | 绑定结果，返回true绑定成功，false绑定失败。 | 3312 3313### detachNodeAdapter<sup>12+</sup> 3314 3315static detachNodeAdapter(node: FrameNode): void 3316 3317解除绑定操作，解除FrameNode节点绑定的NodeAdapter。 3318 3319**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3320 3321**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3322 3323**参数：** 3324 3325| 参数名 | 类型 | 必填 | 说明 | 3326| ------- | ------------------------------------------------------ | ---- | ---------------- | 3327| node | FrameNode | 是 | 要解除绑定的FrameNode节点。 | 3328 3329## 自定义具体类型节点示例 3330 3331以Text节点为例，创建Text类型节点。 3332 3333```ts 3334import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 3335 3336class MyNodeController extends NodeController { 3337 makeNode(uiContext: UIContext): FrameNode | null { 3338 let node = new FrameNode(uiContext); 3339 node.commonAttribute.width(100) 3340 .height(50) 3341 .borderColor(Color.Gray) 3342 .borderWidth(1) 3343 .margin({ left: 10 }); 3344 let col = typeNode.createNode(uiContext, 'Column'); 3345 col.initialize({ space: 5 }) 3346 .width('100%').height('100%').margin({ top: 5 }); 3347 node.appendChild(col); 3348 let text = typeNode.createNode(uiContext, 'Text'); 3349 text.initialize("Hello").fontColor(Color.Blue).fontSize(14); 3350 col.appendChild(text); 3351 return node; 3352 } 3353} 3354 3355@Entry 3356@Component 3357struct FrameNodeTypeTest { 3358 private myNodeController: MyNodeController = new MyNodeController(); 3359 3360 build() { 3361 Row() { 3362 NodeContainer(this.myNodeController); 3363 } 3364 } 3365} 3366``` 3367 3368 3369 3370## 节点操作示例 3371```ts 3372import { NodeController, FrameNode, UIContext } from '@kit.ArkUI'; 3373import { BusinessError } from '@kit.BasicServicesKit'; 3374 3375const TEST_TAG : string = "FrameNode" 3376class MyNodeController extends NodeController { 3377 public frameNode: FrameNode | null = null; 3378 public childList:Array<FrameNode> = new Array<FrameNode>(); 3379 private rootNode: FrameNode | null = null; 3380 private uiContext: UIContext | null = null; 3381 private childrenCount: number = 0; 3382 makeNode(uiContext: UIContext): FrameNode | null { 3383 this.rootNode = new FrameNode(uiContext); 3384 this.childrenCount = this.childrenCount + 1; 3385 this.uiContext = uiContext; 3386 this.frameNode = new FrameNode(uiContext); 3387 this.rootNode.appendChild(this.frameNode); 3388 for (let i = 0; i < 10; i++) { 3389 let childNode = new FrameNode(uiContext); 3390 this.childList.push(childNode); 3391 this.frameNode.appendChild(childNode); 3392 } 3393 return this.rootNode; 3394 } 3395 appendChild() 3396 { 3397 let childNode = new FrameNode(this.uiContext!); 3398 this.rootNode!.appendChild(childNode); 3399 this.childrenCount = this.childrenCount + 1; 3400 } 3401 insertChildAfter(index : number) 3402 { 3403 let insertNode = new FrameNode(this.uiContext!); 3404 let childNode = this.rootNode!.getChild(index); 3405 this.rootNode!.insertChildAfter(insertNode,childNode); 3406 this.childrenCount = this.childrenCount + 1; 3407 } 3408 removeChild(index : number) 3409 { 3410 let childNode = this.rootNode!.getChild(index); 3411 if(childNode == null) 3412 { 3413 console.log(`${TEST_TAG} getchild at index {${index}} : fail`); 3414 return; 3415 } 3416 this.rootNode!.removeChild(childNode); 3417 this.childrenCount = this.childrenCount - 1; 3418 } 3419 getChildNumber() 3420 { 3421 console.log(TEST_TAG + " getChildNumber " + this.rootNode!.getChildrenCount()) 3422 console.log(TEST_TAG + " children count is " + this.childrenCount); 3423 3424 } 3425 clearChildren() 3426 { 3427 this.rootNode!.clearChildren(); 3428 } 3429 searchFrameNode() 3430 { 3431 if(this.rootNode!.getFirstChild() === null) 3432 { 3433 console.log(TEST_TAG + " the rootNode does not have child node.") 3434 } 3435 if(this.rootNode!.getFirstChild() === this.frameNode) { 3436 console.log(TEST_TAG + " getFirstChild result: success. The first child of the rootNode is equals to frameNode."); 3437 } else { 3438 console.log(TEST_TAG + " getFirstChild result: fail. The first child of the rootNode is not equals to frameNode."); 3439 } 3440 if(this.frameNode!.getChild(5) === this.frameNode!.getChild(4)!.getNextSibling()) { 3441 console.log(TEST_TAG + " getNextSibling result: success."); 3442 } else { 3443 console.log(TEST_TAG + " getNextSibling result: fail."); 3444 } 3445 if(this.frameNode!.getChild(3) === this.frameNode!.getChild(4)!.getPreviousSibling()) { 3446 console.log(TEST_TAG + " getPreviousSibling result: success."); 3447 } else { 3448 console.log(TEST_TAG + " getPreviousSibling result: fail."); 3449 } 3450 if(this.rootNode!.getFirstChild() !== null && this.rootNode!.getFirstChild()!.getParent() === this.rootNode) { 3451 console.log(TEST_TAG + " getParent result: success."); 3452 } else { 3453 console.log(TEST_TAG + " getParent result: fail."); 3454 } 3455 if(this.rootNode!.getParent() !== undefined || this.rootNode!.getParent() !== null) 3456 { 3457 console.log(TEST_TAG + " get ArkTsNode success.") 3458 console.log(TEST_TAG + " check rootNode whether is modifiable " + this.rootNode!.isModifiable()) 3459 console.log(TEST_TAG + " check getParent whether is modifiable " + this.rootNode!.getParent()!.isModifiable()) 3460 } else { 3461 console.log(TEST_TAG + " get ArkTsNode fail."); 3462 } 3463 } 3464 getPositionToWindow() 3465 { 3466 let positionToWindow = this.rootNode?.getPositionToWindow(); 3467 console.log(TEST_TAG + JSON.stringify(positionToWindow)); 3468 } 3469 getPositionToParent() 3470 { 3471 let positionToParent = this.rootNode?.getPositionToParent(); 3472 console.log(TEST_TAG + JSON.stringify(positionToParent)); 3473 } 3474 getPositionToScreen() 3475 { 3476 let positionToScreen = this.rootNode?.getPositionToScreen(); 3477 console.log(TEST_TAG + JSON.stringify(positionToScreen)); 3478 } 3479 getPositionToWindowWithTransform() 3480 { 3481 let positionToWindowWithTransform = this.rootNode?.getPositionToWindowWithTransform(); 3482 console.log(TEST_TAG + JSON.stringify(positionToWindowWithTransform)); 3483 } 3484 getPositionToParentWithTransform() 3485 { 3486 let positionToParentWithTransform = this.rootNode?.getPositionToParentWithTransform(); 3487 console.log(TEST_TAG + JSON.stringify(positionToParentWithTransform)); 3488 } 3489 getPositionToScreenWithTransform() 3490 { 3491 let positionToScreenWithTransform = this.rootNode?.getPositionToScreenWithTransform(); 3492 console.log(TEST_TAG + JSON.stringify(positionToScreenWithTransform)); 3493 } 3494 getMeasuredSize() 3495 { 3496 let measuredSize = this.frameNode?.getMeasuredSize(); 3497 console.log(TEST_TAG + JSON.stringify(measuredSize)); 3498 } 3499 getLayoutPosition() 3500 { 3501 let layoutPosition = this.frameNode?.getLayoutPosition(); 3502 console.log(TEST_TAG + JSON.stringify(layoutPosition)); 3503 } 3504 getUserConfigBorderWidth() 3505 { 3506 let userConfigBorderWidth = this.frameNode?.getUserConfigBorderWidth(); 3507 console.log(TEST_TAG + JSON.stringify(userConfigBorderWidth)); 3508 } 3509 getUserConfigPadding() 3510 { 3511 let userConfigPadding = this.frameNode?.getUserConfigPadding(); 3512 console.log(TEST_TAG + JSON.stringify(userConfigPadding)); 3513 } 3514 getUserConfigMargin() 3515 { 3516 let userConfigMargin = this.frameNode?.getUserConfigMargin(); 3517 console.log(TEST_TAG + JSON.stringify(userConfigMargin)); 3518 } 3519 getUserConfigSize() 3520 { 3521 let userConfigSize = this.frameNode?.getUserConfigSize(); 3522 console.log(TEST_TAG + JSON.stringify(userConfigSize)); 3523 } 3524 getId() 3525 { 3526 let id = this.frameNode?.getId(); 3527 console.log(TEST_TAG + id); 3528 } 3529 getUniqueId() 3530 { 3531 let uniqueId = this.frameNode?.getUniqueId(); 3532 console.log(TEST_TAG + uniqueId); 3533 } 3534 getNodeType() 3535 { 3536 let nodeType = this.frameNode?.getNodeType(); 3537 console.log(TEST_TAG + nodeType); 3538 } 3539 getOpacity() 3540 { 3541 let opacity = this.frameNode?.getOpacity(); 3542 console.log(TEST_TAG + JSON.stringify(opacity)); 3543 } 3544 isVisible() 3545 { 3546 let visible = this.frameNode?.isVisible(); 3547 console.log(TEST_TAG + JSON.stringify(visible)); 3548 } 3549 isClipToFrame() 3550 { 3551 let clipToFrame = this.frameNode?.isClipToFrame(); 3552 console.log(TEST_TAG + JSON.stringify(clipToFrame)); 3553 } 3554 isAttached() 3555 { 3556 let attached = this.frameNode?.isAttached(); 3557 console.log(TEST_TAG + JSON.stringify(attached)); 3558 } 3559 getInspectorInfo() 3560 { 3561 let inspectorInfo = this.frameNode?.getInspectorInfo(); 3562 console.log(TEST_TAG + JSON.stringify(inspectorInfo)); 3563 } 3564 3565 throwError() 3566 { 3567 try{ 3568 this.rootNode!.getParent()!.clearChildren(); 3569 } catch (err) { 3570 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " +(err as BusinessError).message); 3571 } 3572 try{ 3573 this.rootNode!.getParent()!.appendChild(new FrameNode(this.uiContext)); 3574 } catch (err) { 3575 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " +(err as BusinessError).message); 3576 } 3577 try{ 3578 this.rootNode!.getParent()!.removeChild(this.rootNode!.getParent()!.getChild(0)); 3579 } catch (err) { 3580 console.log(TEST_TAG + " " + (err as BusinessError).code + " : " +(err as BusinessError).message); 3581 } 3582 } 3583} 3584 3585@Entry 3586@Component 3587struct Index { 3588 private myNodeController: MyNodeController = new MyNodeController(); 3589 @State index : number = 0; 3590 build() { 3591 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 3592 Column(){ 3593 Row() 3594 { 3595 Button("ADD") 3596 .onClick(()=>{this.index++;}) 3597 Button("DEC") 3598 .onClick(()=>{this.index--;}) 3599 } 3600 Text("Current index is " + this.index) 3601 .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) 3602 .width('100%').fontSize(16) 3603 } 3604 Button("appendChild") 3605 .width(300) 3606 .onClick(()=>{ 3607 this.myNodeController.appendChild(); 3608 }) 3609 Button("insertChildAfter") 3610 .width(300) 3611 .onClick(()=>{ 3612 this.myNodeController.insertChildAfter(this.index); 3613 }) 3614 Button("removeChild") 3615 .width(300) 3616 .onClick(()=>{ 3617 this.myNodeController.removeChild(this.index); 3618 }) 3619 Button("clearChildren") 3620 .width(300) 3621 .onClick(()=>{ 3622 this.myNodeController.clearChildren(); 3623 }) 3624 Button("getChildNumber") 3625 .width(300) 3626 .onClick(()=>{ 3627 this.myNodeController.getChildNumber(); 3628 }) 3629 Button("searchFrameNode") 3630 .width(300) 3631 .onClick(()=>{ 3632 this.myNodeController.searchFrameNode(); 3633 }) 3634 Button("getPositionToWindow") 3635 .width(300) 3636 .onClick(()=>{ 3637 this.myNodeController.getPositionToWindow(); 3638 }) 3639 Button("getPositionToParent") 3640 .width(300) 3641 .onClick(()=>{ 3642 this.myNodeController.getPositionToParent(); 3643 }) 3644 Button("getPositionToScreen") 3645 .width(300) 3646 .onClick(()=>{ 3647 this.myNodeController.getPositionToScreen(); 3648 }) 3649 Button("getPositionToParentWithTransform") 3650 .width(300) 3651 .onClick(()=>{ 3652 this.myNodeController.getPositionToParentWithTransform(); 3653 }) 3654 Button("getPositionToWindowWithTransform") 3655 .width(300) 3656 .onClick(()=>{ 3657 this.myNodeController.getPositionToWindowWithTransform(); 3658 }) 3659 Button("getPositionToScreenWithTransform") 3660 .width(300) 3661 .onClick(()=>{ 3662 this.myNodeController.getPositionToScreenWithTransform(); 3663 }) 3664 Button("getMeasuredSize") 3665 .width(300) 3666 .onClick(()=>{ 3667 this.myNodeController.getMeasuredSize(); 3668 }) 3669 Button("getLayoutPosition") 3670 .width(300) 3671 .onClick(()=>{ 3672 this.myNodeController.getLayoutPosition(); 3673 }) 3674 Button("getUserConfigBorderWidth") 3675 .width(300) 3676 .onClick(()=>{ 3677 this.myNodeController.getUserConfigBorderWidth(); 3678 }) 3679 Button("getUserConfigPadding") 3680 .width(300) 3681 .onClick(()=>{ 3682 this.myNodeController.getUserConfigPadding(); 3683 }) 3684 Button("getUserConfigMargin") 3685 .width(300) 3686 .onClick(()=>{ 3687 this.myNodeController.getUserConfigMargin(); 3688 }) 3689 Button("getUserConfigSize") 3690 .width(300) 3691 .onClick(()=>{ 3692 this.myNodeController.getUserConfigSize(); 3693 }) 3694 Button("getId") 3695 .width(300) 3696 .onClick(()=>{ 3697 this.myNodeController.getId(); 3698 }) 3699 Button("getUniqueId") 3700 .width(300) 3701 .onClick(()=>{ 3702 this.myNodeController.getUniqueId(); 3703 }) 3704 Button("getNodeType") 3705 .width(300) 3706 .onClick(()=>{ 3707 this.myNodeController.getNodeType(); 3708 }) 3709 Button("getOpacity") 3710 .width(300) 3711 .onClick(()=>{ 3712 this.myNodeController.getOpacity(); 3713 }) 3714 Button("isVisible") 3715 .width(300) 3716 .onClick(()=>{ 3717 this.myNodeController.isVisible(); 3718 }) 3719 Button("isClipToFrame") 3720 .width(300) 3721 .onClick(()=>{ 3722 this.myNodeController.isClipToFrame(); 3723 }) 3724 Button("isAttached") 3725 .width(300) 3726 .onClick(()=>{ 3727 this.myNodeController.isAttached(); 3728 }) 3729 Button("getInspectorInfo") 3730 .width(300) 3731 .onClick(()=>{ 3732 this.myNodeController.getInspectorInfo(); 3733 }) 3734 Button("getCustomProperty") 3735 .width(300) 3736 .onClick(()=>{ 3737 const uiContext: UIContext = this.getUIContext(); 3738 if (uiContext) { 3739 const node: FrameNode | null = uiContext.getFrameNodeById("Test_Button") || null; 3740 if (node) { 3741 for (let i = 1; i < 4; i++) { 3742 const key = 'customProperty' + i; 3743 const property = node.getCustomProperty(key); 3744 console.log(TEST_TAG + key, JSON.stringify(property)); 3745 } 3746 } 3747 } 3748 }) 3749 .id('Test_Button') 3750 .customProperty('customProperty1', { 3751 'number': 10, 3752 'string': 'this is a string', 3753 'bool': true, 3754 'object': { 3755 'name': 'name', 3756 'value': 100 3757 } 3758 }) 3759 .customProperty('customProperty2', {}) 3760 .customProperty('customProperty2', undefined) 3761 Button("throwError") 3762 .width(300) 3763 .onClick(()=>{ 3764 this.myNodeController.throwError(); 3765 }) 3766 Column(){ 3767 Text("This is a NodeContainer.") 3768 .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) 3769 .width('100%').fontSize(16) 3770 NodeContainer(this.myNodeController) 3771 .borderWidth(1) 3772 .width(300) 3773 .height(100) 3774 } 3775 } 3776 .padding({ left: 35, right: 35, top: 35, bottom: 35 }) 3777 .width("100%") 3778 .height("100%") 3779 } 3780} 3781``` 3782## 基础事件示例 3783```ts 3784import { NodeController, FrameNode } from '@kit.ArkUI'; 3785 3786class MyNodeController extends NodeController { 3787 public rootNode: FrameNode | null = null; 3788 3789 makeNode(uiContext: UIContext): FrameNode | null { 3790 this.rootNode = new FrameNode(uiContext); 3791 this.rootNode.commonAttribute.width(100) 3792 .height(100) 3793 .backgroundColor(Color.Pink); 3794 this.addCommonEvent(this.rootNode); 3795 return this.rootNode; 3796 } 3797 3798 addCommonEvent(frameNode: FrameNode) { 3799 frameNode.commonEvent.setOnHover(((isHover: boolean, event: HoverEvent): void => { 3800 console.log(`isHover FrameNode: ${isHover}`); 3801 console.log(`isHover FrameNode: ${JSON.stringify(event)}`); 3802 event.stopPropagation(); 3803 })) 3804 frameNode.commonEvent.setOnClick((event: ClickEvent) => { 3805 console.log(`Click FrameNode: ${JSON.stringify(event)}`) 3806 }) 3807 frameNode.commonEvent.setOnTouch((event: TouchEvent) => { 3808 console.log(`touch FrameNode: ${JSON.stringify(event)}`) 3809 }) 3810 frameNode.commonEvent.setOnAppear(() => { 3811 console.log(`on Appear FrameNode`) 3812 }) 3813 frameNode.commonEvent.setOnDisappear(() => { 3814 console.log(`onDisAppear FrameNode`) 3815 }) 3816 frameNode.commonEvent.setOnFocus(() => { 3817 console.log(`onFocus FrameNode`) 3818 }) 3819 frameNode.commonEvent.setOnBlur(() => { 3820 console.log(`onBlur FrameNode`) 3821 }) 3822 frameNode.commonEvent.setOnKeyEvent((event: KeyEvent) => { 3823 console.log(`Key FrameNode: ${JSON.stringify(event)}`) 3824 }) 3825 frameNode.commonEvent.setOnMouse((event: MouseEvent) => { 3826 console.log(`Mouse FrameNode: ${JSON.stringify(event)}`) 3827 }) 3828 frameNode.commonEvent.setOnSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 3829 console.info(`onSizeChange FrameNode: oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 3830 }) 3831 } 3832} 3833 3834@Entry 3835@Component 3836struct Index { 3837 @State index: number = 0; 3838 private myNodeController: MyNodeController = new MyNodeController(); 3839 3840 build() { 3841 Column() { 3842 Button("add CommonEvent to Text") 3843 .onClick(() => { 3844 this.myNodeController!.addCommonEvent(this.myNodeController!.rootNode!.getParent()!.getPreviousSibling() !) 3845 }) 3846 Text("this is a Text") 3847 .fontSize(16) 3848 .borderWidth(1) 3849 .onHover(((isHover: boolean, event: HoverEvent): void => { 3850 console.log(`isHover Text: ${isHover}`); 3851 console.log(`isHover Text: ${JSON.stringify(event)}`); 3852 event.stopPropagation(); 3853 })) 3854 .onClick((event: ClickEvent) => { 3855 console.log(`Click Text : ${JSON.stringify(event)}`) 3856 }) 3857 .onTouch((event: TouchEvent) => { 3858 console.log(`touch Text : ${JSON.stringify(event)}`) 3859 }) 3860 .onAppear(() => { 3861 console.log(`on Appear Text`) 3862 }) 3863 .onDisAppear(() => { 3864 console.log(`onDisAppear Text`) 3865 }) 3866 .onFocus(() => { 3867 console.log(`onFocus Text`) 3868 }) 3869 .onBlur(() => { 3870 console.log(`onBlur Text`) 3871 }) 3872 .onKeyEvent((event: KeyEvent) => { 3873 console.log(`Key Text : ${JSON.stringify(event)}`) 3874 }) 3875 .onMouse((event: MouseEvent) => { 3876 console.log(`Mouse Text : ${JSON.stringify(event)}`) 3877 }) 3878 .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 3879 console.info(`onSizeChange Text: oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 3880 }) 3881 NodeContainer(this.myNodeController) 3882 .borderWidth(1) 3883 .width(300) 3884 .height(100) 3885 }.width("100%") 3886 } 3887} 3888``` 3889 3890## LazyForEach场景基础事件使用示例 3891 3892<!--code_no_check--> 3893 3894```ts 3895// index.ets 3896import {Track, TrackManager, TrackNode} from "./track" 3897 3898@Builder 3899function page1() { 3900 Column() { 3901 Text("Page1") 3902 PageList().height("90%") 3903 Button("DumpMessage") 3904 .onClick(() => { 3905 TrackManager.get().dump() 3906 }) 3907 3908 }.width("100%").height("100%") 3909} 3910 3911class BasicDataSource implements IDataSource { 3912 private listeners: DataChangeListener[] = []; 3913 private originDataArray: string[] = []; 3914 3915 public totalCount(): number { 3916 return 0; 3917 } 3918 3919 public getData(index: number): string { 3920 return this.originDataArray[index]; 3921 } 3922 3923 // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听 3924 registerDataChangeListener(listener: DataChangeListener): void { 3925 if (this.listeners.indexOf(listener) < 0) { 3926 console.info('add listener'); 3927 this.listeners.push(listener); 3928 } 3929 } 3930 3931 // 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听 3932 unregisterDataChangeListener(listener: DataChangeListener): void { 3933 const pos = this.listeners.indexOf(listener); 3934 if (pos >= 0) { 3935 console.info('remove listener'); 3936 this.listeners.splice(pos, 1); 3937 } 3938 } 3939 3940 // 通知LazyForEach组件需要重载所有子组件 3941 notifyDataReload(): void { 3942 this.listeners.forEach(listener => { 3943 listener.onDataReloaded(); 3944 }) 3945 } 3946 3947 // 通知LazyForEach组件需要在index对应索引处添加子组件 3948 notifyDataAdd(index: number): void { 3949 this.listeners.forEach(listener => { 3950 listener.onDataAdd(index); 3951 }) 3952 } 3953 3954 // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件 3955 notifyDataChange(index: number): void { 3956 this.listeners.forEach(listener => { 3957 listener.onDataChange(index); 3958 }) 3959 } 3960 3961 // 通知LazyForEach组件需要在index对应索引处删除该子组件 3962 notifyDataDelete(index: number): void { 3963 this.listeners.forEach(listener => { 3964 listener.onDataDelete(index); 3965 }) 3966 } 3967 3968 // 通知LazyForEach组件将from索引和to索引处的子组件进行交换 3969 notifyDataMove(from: number, to: number): void { 3970 this.listeners.forEach(listener => { 3971 listener.onDataMove(from, to); 3972 }) 3973 } 3974} 3975 3976class MyDataSource extends BasicDataSource { 3977 private dataArray: string[] = []; 3978 3979 public totalCount(): number { 3980 return this.dataArray.length; 3981 } 3982 3983 public getData(index: number): string { 3984 return this.dataArray[index]; 3985 } 3986 3987 public addData(index: number, data: string): void { 3988 this.dataArray.splice(index, 0, data); 3989 this.notifyDataAdd(index); 3990 } 3991 3992 public pushData(data: string): void { 3993 this.dataArray.push(data); 3994 this.notifyDataAdd(this.dataArray.length - 1); 3995 } 3996} 3997 3998@Component 3999struct PageList { 4000 private data: MyDataSource = new MyDataSource(); 4001 4002 aboutToAppear() { 4003 for (let i = 0; i <= 100; i++) { 4004 this.data.pushData(`Hello ${i}`) 4005 } 4006 } 4007 4008 build() { 4009 List({ space: 3 }) { 4010 LazyForEach(this.data, (item: string, index: number) => { 4011 ListItem() { 4012 // 通过TrackNode对组件进行封装埋点 4013 TrackNode({track: new Track().tag("xxx"+ item).id(index + 30000)}) { 4014 Row() { 4015 Text(item).fontSize(30) 4016 .onClick(() => { 4017 }) 4018 }.margin({ left: 10, right: 10 }) 4019 } 4020 } 4021 }, (item: string) => item) 4022 }.cachedCount(5) 4023 } 4024} 4025 4026 4027@Entry 4028@Component 4029struct TrackTest { 4030 pageInfos: NavPathStack = new NavPathStack() 4031 build() { 4032 Row() { 4033 TrackNode({ track: new Track().tag("root").id(10000)}) { 4034 page1() 4035 } 4036 } 4037 } 4038 4039 aboutToAppear(): void { 4040 TrackManager.get().startListenClick(this.getUIContext()) 4041 } 4042} 4043``` 4044 4045<!--code_no_check--> 4046 4047```ts 4048// ./track.ets 4049import { FrameNode, Rect } from '@kit.ArkUI'; 4050 4051@Component 4052export struct TrackNode { 4053 @BuilderParam closer: VoidCallback = this.defaultBuilder 4054 track: Track | null = null 4055 trackShadow: TrackShadow = new TrackShadow() 4056 4057 @Builder defaultBuilder() { 4058 } 4059 4060 build() { 4061 this.closer() 4062 } 4063 4064 aboutToAppear(): void { 4065 // use onDidBuild later 4066 } 4067 4068 aboutToDisappear(): void { 4069 TrackManager.get().removeTrack(this.trackShadow.id) 4070 console.log("Track disappear:" + this.trackShadow.id) 4071 } 4072 4073 onDidBuild(): void { 4074 // 构建埋点的虚拟树，获取的node为当前页面的根节点（用例中为Row）。 4075 let uid = this.getUniqueId() 4076 let node: FrameNode | null = this.getUIContext().getFrameNodeByUniqueId(uid); 4077 console.log("Track onDidBuild node:" + node?.getNodeType()) 4078 if (node === null) { 4079 return 4080 } 4081 this.trackShadow.node = node 4082 this.trackShadow.id = node?.getUniqueId() 4083 this.trackShadow.track = this.track; 4084 TrackManager.get().addTrack(this.trackShadow.id, this.trackShadow) 4085 // 通过setOnVisibleAreaApproximateChange监听记录埋点组件的可视区域。 4086 node?.commonEvent.setOnVisibleAreaApproximateChange( 4087 { ratios: [0, 0.1, 0.2, 0.5, 0.8, 1], expectedUpdateInterval: 500 }, 4088 (ratioInc: boolean, ratio: number) => { 4089 console.log(`Node ${node?.getUniqueId()}:${node?.getNodeType()} is visibleRatio is ${ratio}`); 4090 this.trackShadow.visibleRatio = ratio 4091 }) 4092 4093 let parent: FrameNode | null = node?.getParent() 4094 4095 let attachTrackToParent: (parent: FrameNode | null) => boolean = 4096 (parent: FrameNode | null) => { 4097 while (parent !== null) { 4098 let parentTrack = TrackManager.get().getTrackById(parent.getUniqueId()) 4099 if (parentTrack !== undefined) { 4100 parentTrack.childIds.add(this.trackShadow.id) 4101 this.trackShadow.parentId = parentTrack.id 4102 return true; 4103 } 4104 parent = parent.getParent() 4105 } 4106 return false; 4107 } 4108 let attached = attachTrackToParent(parent); 4109 4110 if (!attached) { 4111 node?.commonEvent.setOnAppear(() => { 4112 let attached = attachTrackToParent(parent); 4113 if (attached) { 4114 console.log("Track lazy attached:" + this.trackShadow.id) 4115 } 4116 }) 4117 } 4118 } 4119} 4120 4121export class Track { 4122 public areaPercent: number = 0 4123 private trackTag: string = "" 4124 private trackId: number = 0 4125 4126 constructor() { 4127 } 4128 4129 tag(newTag: string): Track { 4130 this.trackTag = newTag; 4131 return this; 4132 } 4133 4134 id(newId: number): Track { 4135 this.trackId = newId; 4136 return this; 4137 } 4138} 4139 4140export class TrackShadow { 4141 public node: FrameNode | null = null 4142 public id: number = -1 4143 public track: Track | null = null 4144 public childIds: Set<number> = new Set() 4145 public parentId: number = -1 4146 public visibleRect: Rect = { left: 0, top: 0, right: 0, bottom: 0 } 4147 public area: number = 0 4148 public visibleRatio: number = 0 4149 4150 // 通过全局dump输出埋点树的信息 4151 dump(depth: number = 0): void { 4152 console.log("Track Dp:" + depth + " id:" + this.id + " areaPer:" + this.track?.areaPercent + " visibleRatio:" + this.visibleRatio) 4153 this.childIds.forEach((value: number) => { 4154 TrackManager.get().getTrackById(value)?.dump(depth + 1) 4155 }) 4156 } 4157} 4158 4159export class TrackManager { 4160 static instance: TrackManager 4161 private trackMap: Map<number, TrackShadow> = new Map() 4162 private rootTrack: TrackShadow | null = null 4163 4164 static get(): TrackManager { 4165 if (TrackManager.instance !== undefined) { 4166 return TrackManager.instance 4167 } 4168 TrackManager.instance = new TrackManager() 4169 return TrackManager.instance 4170 } 4171 4172 addTrack(id: number, track: TrackShadow) { 4173 if (this.trackMap.size == 0) { 4174 this.rootTrack = track 4175 } 4176 console.log("Track add id:" + id) 4177 this.trackMap.set(id, track) 4178 } 4179 4180 removeTrack(id: number) { 4181 let current = this.getTrackById(id) 4182 if (current !== undefined) { 4183 this.trackMap.delete(id) 4184 let parent = this.getTrackById(current?.parentId) 4185 parent?.childIds.delete(id) 4186 } 4187 } 4188 4189 getTrackById(id: number): TrackShadow | undefined { 4190 return this.trackMap.get(id) 4191 } 4192 4193 startListenClick(context: UIContext) { 4194 // 通过无感监听获取FrameNode查找埋点信息。 4195 context.getUIObserver().on("willClick", (event: ClickEvent, node?: FrameNode) => { 4196 console.log("Track clicked:" + node) 4197 if (node == undefined) { 4198 return 4199 } 4200 let track = this.getTrackById(node.getUniqueId()) 4201 track?.dump(0); 4202 }) 4203 } 4204 4205 updateVisibleInfo(track: TrackShadow): void { 4206 // do something 4207 } 4208 4209 dump(): void { 4210 this.rootTrack?.dump(0) 4211 } 4212} 4213``` 4214## 节点自定义示例 4215 4216```ts 4217import { UIContext, DrawContext, FrameNode, NodeController, LayoutConstraint, Size, Position } from '@kit.ArkUI'; 4218import { drawing } from '@kit.ArkGraphics2D'; 4219 4220function GetChildLayoutConstraint(constraint: LayoutConstraint, child: FrameNode): LayoutConstraint { 4221 const size = child.getUserConfigSize(); 4222 const width = Math.max( 4223 Math.min(constraint.maxSize.width, size.width.value), 4224 constraint.minSize.width 4225 ); 4226 const height = Math.max( 4227 Math.min(constraint.maxSize.height, size.height.value), 4228 constraint.minSize.height 4229 ); 4230 const finalSize: Size = { width, height }; 4231 const res: LayoutConstraint = { 4232 maxSize: finalSize, 4233 minSize: finalSize, 4234 percentReference: finalSize 4235 }; 4236 4237 return res; 4238} 4239 4240class MyFrameNode extends FrameNode { 4241 public width: number = 10; 4242 private space: number = 1; 4243 4244 onMeasure(constraint: LayoutConstraint): void { 4245 let sizeRes: Size = { width: 100, height: 100 }; 4246 for (let i = 0;i < this.getChildrenCount();i++) { 4247 let child = this.getChild(i); 4248 if (child) { 4249 let childConstraint = GetChildLayoutConstraint(constraint, child); 4250 child.measure(childConstraint); 4251 let size = child.getMeasuredSize(); 4252 sizeRes.height += size.height + this.space; 4253 sizeRes.width = Math.max(sizeRes.width, size.width); 4254 } 4255 } 4256 this.setMeasuredSize(sizeRes); 4257 } 4258 4259 onLayout(position: Position): void { 4260 let y = 0; 4261 for (let i = 0;i < this.getChildrenCount();i++) { 4262 let child = this.getChild(i); 4263 if (child) { 4264 child.layout({ 4265 x: 20, 4266 y: y 4267 }); 4268 y += child.getMeasuredSize().height + this.space; 4269 } 4270 } 4271 this.setLayoutPosition(position); 4272 } 4273 4274 onDraw(context: DrawContext) { 4275 const canvas = context.canvas; 4276 const pen = new drawing.Pen(); 4277 pen.setStrokeWidth(5); 4278 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 4279 canvas.attachPen(pen); 4280 canvas.drawRect({ left: 0, right: this.width, top: 0, bottom: this.width }); 4281 canvas.detachPen(); 4282 } 4283 4284 addWidth() { 4285 this.width += 10; 4286 } 4287} 4288 4289class MyNodeController extends NodeController { 4290 public rootNode: MyFrameNode | null = null; 4291 4292 makeNode(context: UIContext): FrameNode | null { 4293 this.rootNode = new MyFrameNode(context); 4294 this.rootNode?.commonAttribute?.size({ width: 100, height: 100 }).backgroundColor(Color.Green); 4295 return this.rootNode; 4296 } 4297} 4298 4299@Entry 4300@Component 4301struct Index { 4302 private nodeController: MyNodeController = new MyNodeController(); 4303 4304 build() { 4305 Row() { 4306 Column() { 4307 NodeContainer(this.nodeController) 4308 .width('100%') 4309 .height(100) 4310 .backgroundColor('#FFF0F0F0') 4311 Button('Invalidate') 4312 .onClick(() => { 4313 this.nodeController?.rootNode?.addWidth(); 4314 this.nodeController?.rootNode?.invalidate(); 4315 }) 4316 Button('UpdateLayout') 4317 .onClick(() => { 4318 this.nodeController?.rootNode?.setNeedsLayout(); 4319 }) 4320 } 4321 .width('100%') 4322 .height('100%') 4323 } 4324 .height('100%') 4325 } 4326} 4327``` 4328## NodeAdapter使用示例 4329 4330```ts 4331import { FrameNode, NodeController, NodeAdapter, typeNode } from '@kit.ArkUI'; 4332 4333class MyNodeAdapter extends NodeAdapter { 4334 uiContext: UIContext 4335 cachePool: Array<FrameNode> = new Array(); 4336 changed: boolean = false 4337 reloadTimes: number = 0; 4338 data: Array<string> = new Array(); 4339 hostNode?: FrameNode 4340 4341 constructor(uiContext: UIContext, count: number) { 4342 super(); 4343 this.uiContext = uiContext; 4344 this.totalNodeCount = count; 4345 this.loadData(); 4346 } 4347 4348 reloadData(count: number): void { 4349 this.reloadTimes++; 4350 NodeAdapter.attachNodeAdapter(this, this.hostNode); 4351 this.totalNodeCount = count; 4352 this.loadData(); 4353 this.reloadAllItems(); 4354 } 4355 4356 refreshData(): void { 4357 let items = this.getAllAvailableItems() 4358 console.log("UINodeAdapter get All items:" + items.length); 4359 this.reloadAllItems(); 4360 } 4361 4362 detachData(): void { 4363 NodeAdapter.detachNodeAdapter(this.hostNode); 4364 this.reloadTimes = 0; 4365 } 4366 4367 loadData(): void { 4368 for (let i = 0; i < this.totalNodeCount; i++) { 4369 this.data[i] = "Adapter ListItem " + i + " r:" + this.reloadTimes; 4370 } 4371 } 4372 4373 changeData(from: number, count: number): void { 4374 this.changed = !this.changed; 4375 for (let i = 0; i < count; i++) { 4376 let index = i + from; 4377 this.data[index] = "Adapter ListItem " + (this.changed ? "changed:" : "") + index + " r:" + this.reloadTimes; 4378 } 4379 this.reloadItem(from, count); 4380 } 4381 4382 insertData(from: number, count: number): void { 4383 for (let i = 0; i < count; i++) { 4384 let index = i + from; 4385 this.data.splice(index, 0, "Adapter ListItem " + from + "-" + i); 4386 } 4387 this.insertItem(from, count); 4388 this.totalNodeCount += count; 4389 console.log("UINodeAdapter after insert count:" + this.totalNodeCount); 4390 } 4391 4392 removeData(from: number, count: number): void { 4393 let arr = this.data.splice(from, count); 4394 this.removeItem(from, count); 4395 this.totalNodeCount -= arr.length; 4396 console.log("UINodeAdapter after remove count:" + this.totalNodeCount); 4397 } 4398 4399 moveData(from: number, to: number): void { 4400 let tmp = this.data.splice(from, 1); 4401 this.data.splice(to, 0, tmp[0]); 4402 this.moveItem(from, to); 4403 } 4404 4405 onAttachToNode(target: FrameNode): void { 4406 console.log("UINodeAdapter onAttachToNode id:" + target.getUniqueId()); 4407 this.hostNode = target; 4408 } 4409 4410 onDetachFromNode(): void { 4411 console.log("UINodeAdapter onDetachFromNode"); 4412 } 4413 4414 onGetChildId(index: number): number { 4415 console.log("UINodeAdapter onGetChildId:" + index); 4416 return index; 4417 } 4418 4419 onCreateChild(index: number): FrameNode { 4420 console.log("UINodeAdapter onCreateChild:" + index); 4421 if (this.cachePool.length > 0) { 4422 let cacheNode = this.cachePool.pop(); 4423 if (cacheNode !== undefined) { 4424 console.log("UINodeAdapter onCreateChild reused id:" + cacheNode.getUniqueId()); 4425 let text = cacheNode?.getFirstChild(); 4426 let textNode = text as typeNode.Text; 4427 textNode?.initialize(this.data[index]).fontSize(20); 4428 return cacheNode; 4429 } 4430 } 4431 console.log("UINodeAdapter onCreateChild createNew"); 4432 let itemNode = typeNode.createNode(this.uiContext, "ListItem"); 4433 let textNode = typeNode.createNode(this.uiContext, "Text"); 4434 textNode.initialize(this.data[index]).fontSize(20); 4435 itemNode.appendChild(textNode); 4436 return itemNode; 4437 } 4438 4439 onDisposeChild(id: number, node: FrameNode): void { 4440 console.log("UINodeAdapter onDisposeChild:" + id); 4441 if (this.cachePool.length < 10) { 4442 if (!this.cachePool.includes(node)) { 4443 console.log("UINodeAdapter caching node id:" + node.getUniqueId()); 4444 this.cachePool.push(node); 4445 } 4446 } else { 4447 node.dispose(); 4448 } 4449 } 4450 4451 onUpdateChild(id: number, node: FrameNode): void { 4452 let index = id; 4453 let text = node.getFirstChild(); 4454 let textNode = text as typeNode.Text; 4455 textNode?.initialize(this.data[index]).fontSize(20); 4456 } 4457} 4458 4459class MyNodeAdapterController extends NodeController { 4460 rootNode: FrameNode | null = null; 4461 nodeAdapter: MyNodeAdapter | null = null; 4462 4463 makeNode(uiContext: UIContext): FrameNode | null { 4464 this.rootNode = new FrameNode(uiContext); 4465 let listNode = typeNode.createNode(uiContext, "List"); 4466 listNode.initialize({ space: 3 }).borderWidth(2).borderColor(Color.Black); 4467 this.rootNode.appendChild(listNode); 4468 this.nodeAdapter = new MyNodeAdapter(uiContext, 100); 4469 NodeAdapter.attachNodeAdapter(this.nodeAdapter, listNode); 4470 return this.rootNode; 4471 } 4472} 4473 4474@Entry 4475@Component 4476struct ListNodeTest { 4477 adapterController: MyNodeAdapterController = new MyNodeAdapterController(); 4478 4479 build() { 4480 Column() { 4481 Text("ListNode Adapter"); 4482 NodeContainer(this.adapterController) 4483 .width(300).height(300) 4484 .borderWidth(1).borderColor(Color.Black); 4485 Row() { 4486 Button("Reload") 4487 .onClick(() => { 4488 this.adapterController.nodeAdapter?.reloadData(50); 4489 }) 4490 Button("Change") 4491 .onClick(() => { 4492 this.adapterController.nodeAdapter?.changeData(5, 10) 4493 }) 4494 Button("Insert") 4495 .onClick(() => { 4496 this.adapterController.nodeAdapter?.insertData(10, 10); 4497 }) 4498 } 4499 4500 Row() { 4501 Button("Remove") 4502 .onClick(() => { 4503 this.adapterController.nodeAdapter?.removeData(10, 10); 4504 }) 4505 Button("Move") 4506 .onClick(() => { 4507 this.adapterController.nodeAdapter?.moveData(2, 5); 4508 }) 4509 Button("Refresh") 4510 .onClick(() => { 4511 this.adapterController.nodeAdapter?.refreshData(); 4512 }) 4513 Button("Detach") 4514 .onClick(() => { 4515 this.adapterController.nodeAdapter?.detachData(); 4516 }) 4517 } 4518 }.borderWidth(1) 4519 .width("100%") 4520 } 4521} 4522 4523``` 4524
