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