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