1# FrameNode 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9FrameNode表示组件树的实体节点。[NodeController](./js-apis-arkui-nodeController.md)可通过[BuilderNode](./js-apis-arkui-builderNode.md)持有的FrameNode将其挂载到[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md)上，也可通过FrameNode获取[RenderNode](./js-apis-arkui-renderNode.md)，挂载到其他FrameNode上。最佳实践请参考[组件动态创建-组件动态添加、更新和删除](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-ui-dynamic-operations#section153921947151012)。 10 11> **说明：** 12> 13> 本模块首批接口从API version 11开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 14> 15> 当前不支持在预览器中使用FrameNode节点。 16> 17> FrameNode节点暂不支持拖拽。 18 19## 导入模块 20 21```ts 22import { FrameNode, LayoutConstraint, ExpandMode, typeNode, NodeAdapter } from "@kit.ArkUI"; 23``` 24 25## LayoutConstraint<sup>12+</sup> 26 27描述组件的布局约束。 28 29**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33| 名称 | 类型 | 只读 | 可选 | 说明 | 34| -------------- | ------ | ----- | ----------|-------------------------------- | 35| maxSize | [Size](./js-apis-arkui-graphics.md#size) |否| 是 | 最大尺寸。 | 36| minSize | [Size](./js-apis-arkui-graphics.md#size) |否| 是 | 最小尺寸。 | 37| percentReference | [Size](./js-apis-arkui-graphics.md#size) |否| 是 | 子节点计算百分比时的尺寸基准。| 38 39## CrossLanguageOptions<sup>15+</sup> 40 41该接口用于配置或查询FrameNode的跨语言访问权限。例如，针对ArkTS语言创建的节点，可通过该接口控制是否允许通过非ArkTS语言进行属性访问或修改。 42 43**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 44 45**系统能力：** SystemCapability.ArkUI.ArkUI.Full 46 47| 名称 | 类型 | 只读 | 可选 | 说明 | 48| ------ | ------ | ---- | ---- | ---------------------- | 49| attributeSetting | boolean | 否 | 是 | FrameNode是否支持跨ArkTS语言进行属性设置。<br/>true表示支持跨ArkTS语言进行属性设置，false表示不支持跨ArkTS语言进行属性设置。<br/>默认为false。 | 50 51## ExpandMode<sup>15+</sup> 52 53子节点展开模式枚举。 54 55**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 56 57**系统能力：** SystemCapability.ArkUI.ArkUI.Full 58 59| 名称 | 值 | 说明 | 60| -------- | -------- | -------- | 61| NOT_EXPAND | 0 | 表示不展开当前FrameNode的子节点。如果FrameNode包含[LazyForEach](./arkui-ts/ts-rendering-control-lazyforeach.md)子节点，获取在主节点树上的子节点时，不展开当前FrameNode的子节点。子节点序列号按在主节点树上的子节点计算。 | 62| EXPAND | 1 | 表示展开当前FrameNode的子节点。如果FrameNode包含[LazyForEach](./arkui-ts/ts-rendering-control-lazyforeach.md)子节点，获取所有子节点时，展开当前FrameNode的子节点。子节点序列号按所有子节点计算。 | 63| LAZY_EXPAND | 2 | 表示按需展开当前FrameNode的子节点。如果FrameNode包含[LazyForEach](./arkui-ts/ts-rendering-control-lazyforeach.md)子节点，获取在主树上的子节点时，不展开当前FrameNode的子节点；获取不在主树上的子节点时，展开当前FrameNode的子节点。子节点序列号按所有子节点计算。 | 64 65## InteractionEventBindingInfo<sup>19+</sup> 66 67如果当前节点上绑定了所要查询的交互事件，则返回一个InteractionEventBindingInfo对象，指示事件绑定详细信息。 68 69**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 70 71**系统能力：** SystemCapability.ArkUI.ArkUI.Full 72 73| 名称 | 类型 | 只读 | 可选 | 说明 | 74| ------ | ------ | ---- | ---- | ---------------------- | 75| baseEventRegistered | boolean | 否 | 否 | 是否以声明方式绑定事件。<br/>true表示以声明方式绑定事件，false表示没有以声明方式绑定事件。 | 76| nodeEventRegistered | boolean | 否 | 否 | 是否以自定义组件节点的方式绑定事件，请参考[基础事件示例](#基础事件示例)<br/>true表示以自定义组件节点的方式绑定事件，false表示没有以自定义组件节点的方式绑定事件。 | 77| nativeEventRegistered | boolean | 否 | 否 | 是否以注册节点事件（[registerNodeEvent](capi-arkui-nativemodule-arkui-nativenodeapi-1.md#registernodeevent)）的方式绑定事件。<br/>true表示以注册节点事件的方式绑定事件，false表示没有以注册节点事件的方式绑定事件。| 78| builtInEventRegistered | boolean | 否 | 否 | 组件是否绑定内置事件(组件内部定义的事件, 无需开发者手动绑定)。<br/>true表示组件绑定内置事件，false表示组件没有绑定内置事件。 | 79 80## UIState<sup>20+</sup> 81 82多态样式状态枚举。 83 84**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 85 86**系统能力：** SystemCapability.ArkUI.ArkUI.Full 87 88| 名称 | 值 | 说明 | 89| -------- | -------- | -------- | 90| NORMAL | 0 | 正常状态。 | 91| PRESSED | 1 << 0 | 按下状态。 | 92| FOCUSED | 1 << 1 | 获焦状态。 | 93| DISABLED | 1 << 2 | 禁用状态。 | 94| SELECTED | 1 << 3 | 选中状态。<br/>仅特定的组件支持此状态：Checkbox、Radio、Toggle、List、Grid、MenuItem。 | 95 96## UIStatesChangeHandler<sup>20+</sup> 97 98type UIStatesChangeHandler = (node: FrameNode, currentUIStates: number) => void 99 100当UI状态发生变化时触发的回调。 101 102**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 103 104**系统能力：** SystemCapability.ArkUI.ArkUI.Full 105 106**参数：** 107 108| 参数名 | 类型 | 必填 | 说明 | 109| -------- | ----------------------------- | ---- | ------------------------------------------------------------ | 110| node | [FrameNode](#framenode-1) | 是 | 触发UI状态变化的节点。 | 111| currentUIStates | number | 是 | 回调触发时当前的UI状态。<br>可以通过位与运算判断当前包含哪些[UIState](#uistate20)状态。<br>位与运算方法：if (currentState & UIState.PRESSED == UIState.PRESSED)。 | 112 113## FrameNode 114 115### constructor 116 117constructor(uiContext: UIContext) 118 119FrameNode的构造函数。 120 121**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 122 123**系统能力：** SystemCapability.ArkUI.ArkUI.Full 124 125**参数：** 126 127| 参数名 | 类型 | 必填 | 说明 | 128| --------- | ----------------------------------------- | ---- | ---------------------------------- | 129| uiContext | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 130 131### getRenderNode 132 133getRenderNode(): RenderNode | null 134 135获取FrameNode中持有的RenderNode。 136 137**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 138 139**系统能力：** SystemCapability.ArkUI.ArkUI.Full 140 141**返回值：** 142 143| 类型 | 说明 | 144| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 145| [RenderNode](./js-apis-arkui-renderNode.md) \| null | 一个RenderNode对象。若该FrameNode不包含RenderNode，则返回空对象null。如果当前FrameNode为声明式组件创建的节点，则返回null。 | 146 147**示例：** 148 149```ts 150import { NodeController, FrameNode } from '@kit.ArkUI'; 151 152class MyNodeController extends NodeController { 153 private rootNode: FrameNode | null = null; 154 155 makeNode(uiContext: UIContext): FrameNode | null { 156 this.rootNode = new FrameNode(uiContext); 157 158 const renderNode = this.rootNode.getRenderNode(); 159 if (renderNode !== null) { 160 renderNode.size = { width: 100, height: 100 }; 161 renderNode.backgroundColor = 0XFFFF0000; 162 } 163 164 return this.rootNode; 165 } 166} 167 168@Entry 169@Component 170struct Index { 171 private myNodeController: MyNodeController = new MyNodeController(); 172 173 build() { 174 Row() { 175 NodeContainer(this.myNodeController) 176 } 177 } 178} 179``` 180### isModifiable<sup>12+</sup> 181 182isModifiable(): boolean 183 184判断当前节点是否可修改。 185 186**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 187 188**系统能力：** SystemCapability.ArkUI.ArkUI.Full 189 190**返回值：** 191 192| 类型 | 说明 | 193| ------- | ------------------------------------------------------------------------------------------------------------------------------------- | 194| boolean | 判断当前节点是否可修改。<br/>true表示当前节点可修改，false表示当前节点不可修改。<br/>当节点为系统组件的代理节点或节点已经[dispose](#dispose12)时返回false。<br/>当返回false时，当前FrameNode不支持appendChild、insertChildAfter、removeChild、clearChildren、createAnimation、cancelAnimations的操作。 | 195 196**示例：** 197 198请参考[节点操作示例](#节点操作示例)。 199 200### appendChild<sup>12+</sup> 201 202appendChild(node: FrameNode): void 203 204在FrameNode最后一个子节点后添加新的子节点。当前FrameNode如果不可修改，抛出异常信息。[typeNode](#typenode12)在appendChild时会校验子组件类型或个数，不满足抛出异常信息，限制情况请查看[typeNode](#typenode12)描述。 205 206**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 207 208**系统能力：** SystemCapability.ArkUI.ArkUI.Full 209 210**参数：** 211 212| 参数名 | 类型 | 必填 | 说明 | 213| ------ | ----------------------- | ---- | --------------------- | 214| node | [FrameNode](#framenode-1) | 是 | 需要添加的FrameNode。<br/>**说明：**<br/> node节点不可以为声明式创建的节点，即不可修改的FrameNode。仅有从BuilderNode中获取的声明式节点可以作为子节点。若子节点不符合规格，则抛出异常信息。<br/> node节点不可以拥有父节点，否则抛出异常信息。| 215 216**错误码：** 217 218| 错误码ID | 错误信息 | 219| -------- | -------------------------------- | 220| 100021 | The FrameNode is not modifiable. | 221 222**示例：** 223 224请参考[节点操作示例](#节点操作示例)。 225 226### insertChildAfter<sup>12+</sup> 227 228insertChildAfter(child: FrameNode, sibling: FrameNode | null): void 229 230在FrameNode指定子节点之后添加新的子节点。当前FrameNode如果不可修改，抛出异常信息。 231 232**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 233 234**系统能力：** SystemCapability.ArkUI.ArkUI.Full 235 236**参数：** 237 238| 参数名 | 类型 | 必填 | 说明 | 239| ------- | ----------------------------------------- | ---- | ---------------------------------------------------------------------------- | 240| child | [FrameNode](#framenode-1) | 是 | 需要添加的子节点。<br/>**说明：**<br/> child节点不可以为声明式创建的节点，即不可修改的FrameNode。仅有从BuilderNode中获取的声明式节点可以作为子节点。若子节点不符合规格，则抛出异常信息。<br/> child节点不可以拥有父节点，否则抛出异常信息。 | 241| sibling | [FrameNode](#framenode-1) \| null | 是 | 新节点将插入到该节点之后。若该参数设置为空，则新节点将插入到首个子节点之前。 | 242 243**错误码：** 244 245| 错误码ID | 错误信息 | 246| -------- | -------------------------------- | 247| 100021 | The FrameNode is not modifiable. | 248 249**示例：** 250 251请参考[节点操作示例](#节点操作示例)。 252 253### removeChild<sup>12+</sup> 254 255removeChild(node: FrameNode): void 256 257从FrameNode中删除指定的子节点。当前FrameNode如果不可修改，抛出异常信息。 258 259**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 260 261**系统能力：** SystemCapability.ArkUI.ArkUI.Full 262 263**参数：** 264 265| 参数名 | 类型 | 必填 | 说明 | 266| ------ | ----------------------- | ---- | ------------------ | 267| node | [FrameNode](#framenode-1) | 是 | 需要删除的子节点。 | 268 269**错误码：** 270 271| 错误码ID | 错误信息 | 272| -------- | -------------------------------- | 273| 100021 | The FrameNode is not modifiable. | 274 275**示例：** 276 277请参考[节点操作示例](#节点操作示例)。 278 279### clearChildren<sup>12+</sup> 280 281clearChildren(): void 282 283清除当前FrameNode的所有子节点。当前FrameNode如果不可修改，抛出异常信息。 284 285**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 286 287**系统能力：** SystemCapability.ArkUI.ArkUI.Full 288 289**错误码：** 290 291| 错误码ID | 错误信息 | 292| -------- | -------------------------------- | 293| 100021 | The FrameNode is not modifiable. | 294 295**示例：** 296 297请参考[节点操作示例](#节点操作示例)。 298 299### getChild<sup>12+</sup> 300 301getChild(index: number): FrameNode | null 302 303获取当前节点指定位置的子节点。 304 305**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 306 307**系统能力：** SystemCapability.ArkUI.ArkUI.Full 308 309**参数：** 310 311| 参数名 | 类型 | 必填 | 说明 | 312| ------ | ------ | ---- | -------------------------- | 313| index | number | 是 | 需要查询的子节点的序列号。<br/>若当前节点有n个子节点，index取值范围为[0, n-1]。 | 314 315**返回值：** 316 317| 类型 | 说明 | 318| ------------------------------- | ------------------------------------------------------------- | 319| [FrameNode](#framenode-1) \| null | 子节点。若该FrameNode不包含所查询的子节点，则返回空对象null。 | 320 321**示例：** 322 323请参考[节点操作示例](#节点操作示例)。 324 325### getChild<sup>15+</sup> 326 327getChild(index: number, expandMode?: ExpandMode): FrameNode | null 328 329获取当前节点指定位置的子节点，支持指定子节点展开模式。 330 331**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 332 333**系统能力：** SystemCapability.ArkUI.ArkUI.Full 334 335**参数：** 336 337| 参数名 | 类型 | 必填 | 说明 | 338| ------ | ------ | ---- | -------------------------- | 339| index | number | 是 | 需要查询的子节点的序列号。<br/>若当前节点有n个子节点，index取值范围为[0, n-1]。 | 340| expandMode | [ExpandMode](#expandmode15) | 否 | 指定子节点展开模式。<br/>默认值：ExpandMode.EXPAND | 341 342**返回值：** 343 344| 类型 | 说明 | 345| ------------------------------- | ------------------------------------------------------------- | 346| [FrameNode](#framenode-1) \| null | 子节点。若该FrameNode不包含所查询的子节点，则返回空对象null。 | 347 348**示例：** 349 350请参考[LazyForEach场景节点操作示例](#lazyforeach场景节点操作示例)。 351 352### getFirstChildIndexWithoutExpand<sup>15+</sup> 353 354getFirstChildIndexWithoutExpand(): number 355 356获取当前节点第一个在主节点树上的子节点的序列号。子节点序列号按所有子节点计算。 357 358**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 359 360**系统能力：** SystemCapability.ArkUI.ArkUI.Full 361 362**返回值：** 363 364| 类型 | 说明 | 365| ------ | ---------------------------------------- | 366| number | 当前节点第一个在主节点树上的子节点的序列号。 | 367 368**示例：** 369 370请参考[LazyForEach场景节点操作示例](#lazyforeach场景节点操作示例)。 371 372### getLastChildIndexWithoutExpand<sup>15+</sup> 373 374getLastChildIndexWithoutExpand(): number 375 376获取当前节点最后一个在主节点树上的子节点的序列号。子节点序列号按所有子节点计算。 377 378**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 379 380**系统能力：** SystemCapability.ArkUI.ArkUI.Full 381 382**返回值：** 383 384| 类型 | 说明 | 385| ------ | ------------------------------------------ | 386| number | 当前节点最后一个在主节点树上的子节点的序列号。 | 387 388**示例：** 389 390请参考[LazyForEach场景节点操作示例](#lazyforeach场景节点操作示例)。 391 392### getFirstChild<sup>12+</sup> 393 394getFirstChild(): FrameNode | null 395 396获取当前FrameNode的第一个子节点。 397 398**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 399 400**系统能力：** SystemCapability.ArkUI.ArkUI.Full 401 402**返回值：** 403 404| 类型 | 说明 | 405| ------------------------------- | --------------------------------------------------------- | 406| [FrameNode](#framenode-1) \| null | 首个子节点。若该FrameNode不包含子节点，则返回空对象null。 | 407 408**示例：** 409 410请参考[节点操作示例](#节点操作示例)。 411 412### getNextSibling<sup>12+</sup> 413 414getNextSibling(): FrameNode | null 415 416获取当前FrameNode的下一个同级节点。 417 418**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 419 420**系统能力：** SystemCapability.ArkUI.ArkUI.Full 421 422**返回值：** 423 424| 类型 | 说明 | 425| ------------------------------- | ------------------------------------------------------------------------------------ | 426| [FrameNode](#framenode-1) \| null | 当前FrameNode的下一个同级节点。若该FrameNode不包含下一个同级节点，则返回空对象null。 | 427 428**示例：** 429 430请参考[节点操作示例](#节点操作示例)。 431 432### getPreviousSibling<sup>12+</sup> 433 434getPreviousSibling(): FrameNode | null 435 436获取当前FrameNode的上一个同级节点。 437 438**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 439 440**系统能力：** SystemCapability.ArkUI.ArkUI.Full 441 442**返回值：** 443 444| 类型 | 说明 | 445| -------------------------------- | ------------------------------------------------------------------------------------ | 446| [FrameNode](#framenode-1) \| null | 当前FrameNode的上一个同级节点。若该FrameNode不包含上一个同级节点，则返回空对象null。 | 447 448**示例：** 449 450请参考[节点操作示例](#节点操作示例)。 451 452### getParent<sup>12+</sup> 453 454getParent(): FrameNode | null 455 456获取当前FrameNode的父节点。 457 458**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 459 460**系统能力：** SystemCapability.ArkUI.ArkUI.Full 461 462**返回值：** 463 464| 类型 | 说明 | 465| -------------------------------- | -------------------------------------------------------------------- | 466| [FrameNode](#framenode-1) \| null | 当前FrameNode的父节点。若该FrameNode不包含父节点，则返回空对象null。 | 467 468**示例：** 469 470请参考[节点操作示例](#节点操作示例)和[获取根节点示例](#获取根节点示例)。 471 472 473### getChildrenCount<sup>12+</sup> 474 475getChildrenCount(): number 476 477获取当前FrameNode的子节点数量。 478 479**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 480 481**系统能力：** SystemCapability.ArkUI.ArkUI.Full 482 483**返回值：** 484 485| 类型 | 说明 | 486| -------- | ------------------------------- | 487| number | 获取当前FrameNode的子节点数量。 | 488 489**示例：** 490 491请参考[节点操作示例](#节点操作示例)。 492 493### moveTo<sup>18+</sup> 494 495moveTo(targetParent: FrameNode, index?: number): void 496 497将当前FrameNode移动到目标FrameNode的指定位置。当前FrameNode如果不可修改，抛出异常信息。targetParent为[typeNode](#typenode12)时会校验子组件类型或个数，不满足抛出异常信息，限制情况请查看[typeNode](#typenode12)描述。 498 499> **说明：** 500> 501> 当前仅支持以下类型的[TypedFrameNode](#typedframenode12)进行移动操作：[Stack](#stack12)、[XComponent](#xcomponent12)。对于其他类型的节点，移动操作不会生效。 502> 503> 当前仅支持根节点为以下类型组件的[BuilderNode](./js-apis-arkui-builderNode.md#buildernode-1)进行移动操作：[Stack](./arkui-ts/ts-container-stack.md)、[XComponent](./arkui-ts/ts-basic-components-xcomponent.md)、[EmbeddedComponent](./arkui-ts/ts-container-embedded-component.md)。对于其他类型的组件，移动操作不会生效。 504 505**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 506 507**系统能力：** SystemCapability.ArkUI.ArkUI.Full 508 509**参数：** 510 511| 参数名 | 类型 | 必填 | 说明 | 512| ------------ | ----------------------- | ---- | --------------------- | 513| targetParent | [FrameNode](#framenode-1) | 是 | 目标父节点。<br/>**说明：**<br/>targetParent节点不可以为声明式创建的节点，即不可修改的FrameNode。若目标父节点不符合规格，则抛出异常信息。 | 514| index | number | 否 | 子节点序列号。当前FrameNode将被添加到目标FrameNode对应序列号的子节点之前，若目标FrameNode有n个节点，index取值范围为[0, n-1]。<br/>若参数无效或不指定，则添加到目标FrameNode的最后。<br/>默认值：-1 | 515 516**错误码：** 517 518| 错误码ID | 错误信息 | 519| -------- | -------------------------------- | 520| 100021 | The FrameNode is not modifiable. | 521 522**示例：** 523 524请参考[节点操作示例](#节点操作示例)。 525 526### getPositionToWindow<sup>12+</sup> 527 528getPositionToWindow(): Position 529 530获取FrameNode相对于窗口的位置偏移，单位为VP。 531 532**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 533 534**系统能力：** SystemCapability.ArkUI.ArkUI.Full 535 536**返回值：** 537 538| 类型 | 说明 | 539| -------- | ------------------------------- | 540| [Position](./js-apis-arkui-graphics.md#position) | 节点相对于窗口的位置偏移，单位为VP。 | 541 542**示例：** 543 544```ts 545import { NodeController, FrameNode, UIContext } from '@kit.ArkUI'; 546 547const TEST_TAG: string = "FrameNode "; 548 549class MyNodeController extends NodeController { 550 public frameNode: FrameNode | null = null; 551 private rootNode: FrameNode | null = null; 552 553 makeNode(uiContext: UIContext): FrameNode | null { 554 this.rootNode = new FrameNode(uiContext); 555 this.frameNode = new FrameNode(uiContext); 556 this.frameNode.commonAttribute.backgroundColor(Color.Pink); 557 this.frameNode.commonAttribute.size({ width: 100, height: 100 }); 558 this.rootNode.appendChild(this.frameNode); 559 return this.rootNode; 560 } 561 562 getPositionToWindow() { 563 let positionToWindow = this.rootNode?.getPositionToWindow(); 564 console.info(`${TEST_TAG}${JSON.stringify(positionToWindow)}`); 565 } 566} 567 568@Entry 569@Component 570struct Index { 571 private myNodeController: MyNodeController = new MyNodeController(); 572 private scroller: Scroller = new Scroller(); 573 @State index: number = 0; 574 575 build() { 576 Scroll(this.scroller) { 577 Column({ space: 8 }) { 578 Column() { 579 Text("This is a NodeContainer.") 580 .textAlign(TextAlign.Center) 581 .borderRadius(10) 582 .backgroundColor(0xFFFFFF) 583 .width('100%') 584 .fontSize(16) 585 NodeContainer(this.myNodeController) 586 .borderWidth(1) 587 .width(300) 588 .height(100) 589 } 590 591 Button("getPositionToWindow") 592 .width(300) 593 .onClick(() => { 594 this.myNodeController.getPositionToWindow(); 595 }) 596 } 597 .width("100%") 598 } 599 .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 600 } 601} 602 603``` 604 605请参考[节点操作示例](#节点操作示例)。 606 607 608### getPositionToParent<sup>12+</sup> 609 610getPositionToParent(): Position 611 612获取FrameNode相对于父组件的位置偏移，单位为VP。 613 614**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 615 616**系统能力：** SystemCapability.ArkUI.ArkUI.Full 617 618**返回值：** 619 620| 类型 | 说明 | 621| -------------------------------------------------------------- | --------------------------------------------------------------------- | 622| [Position](./js-apis-arkui-graphics.md#position) | 节点相对于父组件的位置偏移，单位为VP。 | 623 624**示例：** 625 626```ts 627import { NodeController, FrameNode, UIContext } from '@kit.ArkUI'; 628 629const TEST_TAG: string = "FrameNode "; 630 631class MyNodeController extends NodeController { 632 public frameNode: FrameNode | null = null; 633 private rootNode: FrameNode | null = null; 634 635 makeNode(uiContext: UIContext): FrameNode | null { 636 this.rootNode = new FrameNode(uiContext); 637 638 this.frameNode = new FrameNode(uiContext); 639 this.frameNode.commonAttribute.backgroundColor(Color.Pink); 640 this.frameNode.commonAttribute.size({ width: 100, height: 100 }); 641 this.rootNode.appendChild(this.frameNode); 642 return this.rootNode; 643 } 644 645 getPositionToParent() { 646 let positionToParent = this.rootNode?.getPositionToParent(); 647 console.info(TEST_TAG + JSON.stringify(positionToParent)); 648 } 649} 650 651@Entry 652@Component 653struct Index { 654 private myNodeController: MyNodeController = new MyNodeController(); 655 private scroller: Scroller = new Scroller(); 656 @State index: number = 0; 657 658 build() { 659 Scroll(this.scroller) { 660 Column({ space: 8 }) { 661 Column() { 662 Text("This is a NodeContainer.") 663 .textAlign(TextAlign.Center) 664 .borderRadius(10) 665 .backgroundColor(0xFFFFFF) 666 .width('100%') 667 .fontSize(16) 668 NodeContainer(this.myNodeController) 669 .borderWidth(1) 670 .width(300) 671 .height(100) 672 } 673 674 Button("getPositionToParent") 675 .width(300) 676 .onClick(() => { 677 this.myNodeController.getPositionToParent(); 678 }) 679 } 680 .width("100%") 681 } 682 .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 683 } 684} 685 686``` 687 688请参考[节点操作示例](#节点操作示例)。 689 690### getPositionToScreen<sup>12+</sup> 691 692getPositionToScreen(): Position 693 694获取FrameNode相对于屏幕的位置偏移，单位为VP。 695 696**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 697 698**系统能力：** SystemCapability.ArkUI.ArkUI.Full 699 700**返回值：** 701 702| 类型 | 说明 | 703| -------- | ------------------------------- | 704| [Position](./js-apis-arkui-graphics.md#position) | 节点相对于屏幕的位置偏移，单位为VP。 | 705 706**示例：** 707 708```ts 709import { NodeController, FrameNode, UIContext } from '@kit.ArkUI'; 710 711const TEST_TAG: string = "FrameNode "; 712 713class MyNodeController extends NodeController { 714 public frameNode: FrameNode | null = null; 715 private rootNode: FrameNode | null = null; 716 717 makeNode(uiContext: UIContext): FrameNode | null { 718 this.rootNode = new FrameNode(uiContext); 719 720 this.frameNode = new FrameNode(uiContext); 721 this.frameNode.commonAttribute.backgroundColor(Color.Pink); 722 this.frameNode.commonAttribute.size({ width: 100, height: 100 }); 723 this.rootNode.appendChild(this.frameNode); 724 return this.rootNode; 725 } 726 727 getPositionToScreen() { 728 let positionToScreen = this.rootNode?.getPositionToScreen(); 729 console.info(TEST_TAG + JSON.stringify(positionToScreen)); 730 } 731} 732 733@Entry 734@Component 735struct Index { 736 private myNodeController: MyNodeController = new MyNodeController(); 737 private scroller: Scroller = new Scroller(); 738 @State index: number = 0; 739 740 build() { 741 Scroll(this.scroller) { 742 Column({ space: 8 }) { 743 Column() { 744 Text("This is a NodeContainer.") 745 .textAlign(TextAlign.Center) 746 .borderRadius(10) 747 .backgroundColor(0xFFFFFF) 748 .width('100%') 749 .fontSize(16) 750 NodeContainer(this.myNodeController) 751 .borderWidth(1) 752 .width(300) 753 .height(100) 754 } 755 756 Button("getPositionToScreen") 757 .width(300) 758 .onClick(() => { 759 this.myNodeController.getPositionToScreen(); 760 }) 761 } 762 .width("100%") 763 } 764 .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 765 } 766} 767 768``` 769 770请参考[节点操作示例](#节点操作示例)。 771 772 773### getGlobalPositionOnDisplay<sup>20+</sup> 774 775getGlobalPositionOnDisplay(): Position 776 777获取FrameNode相对于全局屏幕的位置偏移，单位为VP。 778 779**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 780 781**系统能力：** SystemCapability.ArkUI.ArkUI.Full 782 783**返回值：** 784 785| 类型 | 说明 | 786| -------- | ------------------------------- | 787| [Position](./js-apis-arkui-graphics.md#position) | 节点相对于全局屏幕的位置偏移，单位为VP。 | 788 789**示例：** 790 791请参考[节点操作示例](#节点操作示例)。 792 793 794### getPositionToParentWithTransform<sup>12+</sup> 795 796getPositionToParentWithTransform(): Position 797 798获取FrameNode相对于父组件带有绘制属性的位置偏移，单位为VP，绘制属性比如transform, translate等，返回的坐标是组件布局时左上角变换后的坐标。 799 800**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 801 802**系统能力：** SystemCapability.ArkUI.ArkUI.Full 803 804**返回值：** 805 806| 类型 | 说明 | 807| -------------------------------------------------------------- | --------------------------------------------------------------------- | 808| [Position](./js-apis-arkui-graphics.md#position) | 节点相对于父组件的位置偏移，单位为VP。 当设置了其他（比如：transform, translate等）绘制属性，由于浮点数精度的影响，返回值会有微小偏差。 | 809 810**示例：** 811 812```ts 813import { NodeController, FrameNode, UIContext } from '@kit.ArkUI'; 814 815const TEST_TAG: string = "FrameNode "; 816 817class MyNodeController extends NodeController { 818 public frameNode: FrameNode | null = null; 819 private rootNode: FrameNode | null = null; 820 821 makeNode(uiContext: UIContext): FrameNode | null { 822 this.rootNode = new FrameNode(uiContext); 823 824 this.frameNode = new FrameNode(uiContext); 825 this.frameNode.commonAttribute.backgroundColor(Color.Pink); 826 this.frameNode.commonAttribute.size({ width: 100, height: 100 }); 827 this.rootNode.appendChild(this.frameNode); 828 return this.rootNode; 829 } 830 831 getPositionToParentWithTransform() { 832 let positionToParentWithTransform = this.rootNode?.getPositionToParentWithTransform(); 833 console.info(TEST_TAG + JSON.stringify(positionToParentWithTransform)); 834 } 835} 836 837@Entry 838@Component 839struct Index { 840 private myNodeController: MyNodeController = new MyNodeController(); 841 private scroller: Scroller = new Scroller(); 842 @State index: number = 0; 843 844 build() { 845 Scroll(this.scroller) { 846 Column({ space: 8 }) { 847 Column() { 848 Text("This is a NodeContainer.") 849 .textAlign(TextAlign.Center) 850 .borderRadius(10) 851 .backgroundColor(0xFFFFFF) 852 .width('100%') 853 .fontSize(16) 854 NodeContainer(this.myNodeController) 855 .borderWidth(1) 856 .width(300) 857 .height(100) 858 } 859 860 Button("getPositionToParentWithTransform") 861 .width(300) 862 .onClick(() => { 863 this.myNodeController.getPositionToParentWithTransform(); 864 }) 865 } 866 .width("100%") 867 } 868 .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 869 } 870} 871``` 872 873请参考[节点操作示例](#节点操作示例)。 874 875### getPositionToWindowWithTransform<sup>12+</sup> 876 877getPositionToWindowWithTransform(): Position 878 879获取FrameNode相对于窗口带有绘制属性的位置偏移，单位为VP，绘制属性比如transform, translate等，返回的坐标是组件布局时左上角变换后的坐标。 880 881**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 882 883**系统能力：** SystemCapability.ArkUI.ArkUI.Full 884 885**返回值：** 886 887| 类型 | 说明 | 888| -------------------------------------------------------------- | --------------------------------------------------------------------- | 889| [Position](./js-apis-arkui-graphics.md#position) | 节点相对于窗口的位置偏移，单位为VP。 当设置了其他（比如：transform, translate等）绘制属性，由于浮点数精度的影响，返回值会有微小偏差。 | 890 891**示例：** 892 893```ts 894import { NodeController, FrameNode, UIContext } from '@kit.ArkUI'; 895 896const TEST_TAG: string = "FrameNode "; 897 898class MyNodeController extends NodeController { 899 public frameNode: FrameNode | null = null; 900 private rootNode: FrameNode | null = null; 901 902 makeNode(uiContext: UIContext): FrameNode | null { 903 this.rootNode = new FrameNode(uiContext); 904 905 this.frameNode = new FrameNode(uiContext); 906 this.frameNode.commonAttribute.backgroundColor(Color.Pink); 907 this.frameNode.commonAttribute.size({ width: 100, height: 100 }); 908 this.rootNode.appendChild(this.frameNode); 909 return this.rootNode; 910 } 911 912 getPositionToWindowWithTransform() { 913 let positionToWindowWithTransform = this.rootNode?.getPositionToWindowWithTransform(); 914 console.info(TEST_TAG + JSON.stringify(positionToWindowWithTransform)); 915 } 916} 917 918@Entry 919@Component 920struct Index { 921 private myNodeController: MyNodeController = new MyNodeController(); 922 private scroller: Scroller = new Scroller(); 923 @State index: number = 0; 924 925 build() { 926 Scroll(this.scroller) { 927 Column({ space: 8 }) { 928 Column() { 929 Text("This is a NodeContainer.") 930 .textAlign(TextAlign.Center) 931 .borderRadius(10) 932 .backgroundColor(0xFFFFFF) 933 .width('100%') 934 .fontSize(16) 935 NodeContainer(this.myNodeController) 936 .borderWidth(1) 937 .width(300) 938 .height(100) 939 } 940 Button("getPositionToWindowWithTransform") 941 .width(300) 942 .onClick(() => { 943 this.myNodeController.getPositionToWindowWithTransform(); 944 }) 945 } 946 .width("100%") 947 } 948 .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 949 } 950} 951``` 952 953请参考[节点操作示例](#节点操作示例)。 954 955### getPositionToScreenWithTransform<sup>12+</sup> 956 957getPositionToScreenWithTransform(): Position 958 959获取FrameNode相对于屏幕带有绘制属性的位置偏移，单位为VP，绘制属性比如transform, translate等，返回的坐标是组件布局时左上角变换后的坐标。 960 961**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 962 963**系统能力：** SystemCapability.ArkUI.ArkUI.Full 964 965**返回值：** 966 967| 类型 | 说明 | 968| -------------------------------------------------------------- | --------------------------------------------------------------------- | 969| [Position](./js-apis-arkui-graphics.md#position) | 节点相对于屏幕的位置偏移，单位为VP。 当设置了其他（比如：transform, translate等）绘制属性，由于浮点数精度的影响，返回值会有微小偏差。 | 970 971**示例：** 972 973```ts 974import { NodeController, FrameNode, UIContext } from '@kit.ArkUI'; 975 976const TEST_TAG: string = "FrameNode "; 977 978class MyNodeController extends NodeController { 979 public frameNode: FrameNode | null = null; 980 private rootNode: FrameNode | null = null; 981 982 makeNode(uiContext: UIContext): FrameNode | null { 983 this.rootNode = new FrameNode(uiContext); 984 985 this.frameNode = new FrameNode(uiContext); 986 this.frameNode.commonAttribute.backgroundColor(Color.Pink); 987 this.frameNode.commonAttribute.size({ width: 100, height: 100 }); 988 this.rootNode.appendChild(this.frameNode); 989 return this.rootNode; 990 } 991 992 getPositionToScreenWithTransform() { 993 let positionToScreenWithTransform = this.rootNode?.getPositionToScreenWithTransform(); 994 console.info(TEST_TAG + JSON.stringify(positionToScreenWithTransform)); 995 } 996} 997 998@Entry 999@Component 1000struct Index { 1001 private myNodeController: MyNodeController = new MyNodeController(); 1002 private scroller: Scroller = new Scroller(); 1003 @State index: number = 0; 1004 1005 build() { 1006 Scroll(this.scroller) { 1007 Column({ space: 8 }) { 1008 Column() { 1009 Text("This is a NodeContainer.") 1010 .textAlign(TextAlign.Center) 1011 .borderRadius(10) 1012 .backgroundColor(0xFFFFFF) 1013 .width('100%') 1014 .fontSize(16) 1015 NodeContainer(this.myNodeController) 1016 .borderWidth(1) 1017 .width(300) 1018 .height(100) 1019 } 1020 1021 Button("getPositionToScreenWithTransform") 1022 .width(300) 1023 .onClick(() => { 1024 this.myNodeController.getPositionToScreenWithTransform(); 1025 }) 1026 } 1027 .width("100%") 1028 } 1029 .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 1030 } 1031} 1032``` 1033 1034请参考[节点操作示例](#节点操作示例)。 1035 1036 1037### getMeasuredSize<sup>12+</sup> 1038 1039getMeasuredSize(): Size 1040 1041获取FrameNode测量后的大小，单位为PX。 1042 1043**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1044 1045**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1046 1047**返回值：** 1048 1049| 类型 | 说明 | 1050| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1051| [Size](./js-apis-arkui-graphics.md#size) | 节点测量后的大小，单位为PX。 | 1052 1053**示例：** 1054 1055请参考[节点操作示例](#节点操作示例)。 1056 1057 1058### getLayoutPosition<sup>12+</sup> 1059 1060getLayoutPosition(): Position 1061 1062获取FrameNode布局后相对于父组件的位置偏移，单位为PX。该偏移是父容器对该节点进行布局之后的结果，因此布局之后生效的offset属性和不参与布局的position属性不影响该偏移值。 1063 1064**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1065 1066**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1067 1068**返回值：** 1069 1070| 类型 | 说明 | 1071| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1072| [Position](./js-apis-arkui-graphics.md#position) | 节点布局后相对于父组件的位置偏移，单位为PX。 | 1073 1074**示例：** 1075 1076请参考[节点操作示例](#节点操作示例)。 1077 1078### getUserConfigBorderWidth<sup>12+</sup> 1079 1080getUserConfigBorderWidth(): Edges\<LengthMetrics\> 1081 1082获取用户设置的边框宽度。 1083 1084**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1085 1086**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1087 1088**返回值：** 1089 1090| 类型 | 说明 | 1091| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1092| [Edges](./js-apis-arkui-graphics.md#edgest12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | 用户设置的边框宽度。 | 1093 1094**示例：** 1095 1096请参考[节点操作示例](#节点操作示例)。 1097 1098### getUserConfigPadding<sup>12+</sup> 1099 1100getUserConfigPadding(): Edges\<LengthMetrics\> 1101 1102获取用户设置的内边距。 1103 1104**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1105 1106**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1107 1108**返回值：** 1109 1110| 类型 | 说明 | 1111| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1112| [Edges](./js-apis-arkui-graphics.md#edgest12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | 用户设置的内边距。 | 1113 1114**示例：** 1115 1116请参考[节点操作示例](#节点操作示例)。 1117 1118### getUserConfigMargin<sup>12+</sup> 1119 1120getUserConfigMargin(): Edges\<LengthMetrics\> 1121 1122获取用户设置的外边距。 1123 1124**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1125 1126**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1127 1128**返回值：** 1129 1130| 类型 | 说明 | 1131| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1132| [Edges](./js-apis-arkui-graphics.md#edgest12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | 用户设置的外边距。 | 1133 1134**示例：** 1135 1136请参考[节点操作示例](#节点操作示例)。 1137 1138### getUserConfigSize<sup>12+</sup> 1139 1140getUserConfigSize(): SizeT\<LengthMetrics\> 1141 1142获取用户设置的宽高。 1143 1144**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1145 1146**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1147 1148**返回值：** 1149 1150| 类型 | 说明 | 1151| ------------------------------------------------------------ | ---------------- | 1152| [SizeT](./js-apis-arkui-graphics.md#sizett12)\<[LengthMetrics](./js-apis-arkui-graphics.md#lengthmetrics12)\> | 用户设置的宽高。 | 1153 1154**示例：** 1155 1156请参考[节点操作示例](#节点操作示例)。 1157 1158### getId<sup>12+</sup> 1159 1160getId(): string 1161 1162获取用户设置的节点ID（通用属性设置的[ID](./arkui-ts/ts-universal-attributes-component-id.md)）。 1163 1164**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1165 1166**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1167 1168**返回值：** 1169 1170| 类型 | 说明 | 1171| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1172| string | 用户设置的节点ID（通用属性设置的[ID](./arkui-ts/ts-universal-attributes-component-id.md)）。 | 1173 1174**示例：** 1175 1176请参考[节点操作示例](#节点操作示例)。 1177 1178### getUniqueId<sup>12+</sup> 1179 1180getUniqueId(): number 1181 1182获取系统分配的唯一标识的节点UniqueID。 1183 1184**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1185 1186**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1187 1188**返回值：** 1189 1190| 类型 | 说明 | 1191| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1192| number | 系统分配的唯一标识的节点UniqueID。 | 1193 1194**示例：** 1195 1196请参考[节点操作示例](#节点操作示例)。 1197 1198### getNodeType<sup>12+</sup> 1199 1200getNodeType(): string 1201 1202获取节点的类型。系统组件类型为组件名称，例如，按钮组件Button的类型为Button。而对于自定义组件，若其有渲染内容，则其类型为__Common__。 1203 1204**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1205 1206**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1207 1208**返回值：** 1209 1210| 类型 | 说明 | 1211| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1212| string | 节点的类型。 | 1213 1214**示例：** 1215 1216请参考[节点操作示例](#节点操作示例)。 1217 1218### getOpacity<sup>12+</sup> 1219 1220getOpacity(): number 1221 1222获取节点的不透明度，最小值为0，最大值为1。 1223 1224**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1225 1226**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1227 1228**返回值：** 1229 1230| 类型 | 说明 | 1231| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1232| number | 节点的不透明度。范围是[0, 1]，值越大透明度越低。 | 1233 1234**示例：** 1235 1236请参考[节点操作示例](#节点操作示例)。 1237 1238### isVisible<sup>12+</sup> 1239 1240isVisible(): boolean 1241 1242获取节点是否可见。 1243 1244**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1245 1246**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1247 1248**返回值：** 1249 1250| 类型 | 说明 | 1251| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1252| boolean | 节点是否可见。<br/>true表示节点可见，false表示节点不可见。 | 1253 1254**示例：** 1255 1256请参考[节点操作示例](#节点操作示例)。 1257 1258### isClipToFrame<sup>12+</sup> 1259 1260isClipToFrame(): boolean 1261 1262获取节点是否是剪裁到组件区域。当调用[dispose](#dispose12)解除对实体FrameNode节点的引用关系之后，返回值为true。 1263 1264**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1265 1266**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1267 1268**返回值：** 1269 1270| 类型 | 说明 | 1271| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1272| boolean | 节点是否是剪裁到组件区域。<br/>true表示节点剪裁到组件区域，false表示节点不是剪裁到组件区域。 | 1273 1274**示例：** 1275 1276请参考[节点操作示例](#节点操作示例)。 1277 1278### isAttached<sup>12+</sup> 1279 1280isAttached(): boolean 1281 1282获取节点是否被挂载到主节点树上。 1283 1284**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1285 1286**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1287 1288**返回值：** 1289 1290| 类型 | 说明 | 1291| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1292| boolean | 节点是否被挂载到主节点树上。<br/>true表示节点被挂载到主节点树上，false表示节点不是被挂载到主节点树上。 | 1293 1294**示例：** 1295 1296请参考[节点操作示例](#节点操作示例)。 1297 1298### isDisposed<sup>20+</sup> 1299 1300isDisposed(): boolean 1301 1302查询当前FrameNode对象是否已解除与后端实体节点的引用关系。前端节点均绑定有相应的后端实体节点，当节点调用dispose接口解除绑定后，再次调用接口可能会出现crash、返回默认值的情况。由于业务需求，可能存在节点在dispose后仍被调用接口的情况。为此，提供此接口以供开发者在操作节点前检查其有效性，避免潜在风险。 1303 1304**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 1305 1306**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1307 1308**返回值：** 1309 1310| 类型 | 说明 | 1311| ------- | ------------------ | 1312| boolean | 后端实体节点是否解除引用。true为节点已与后端实体节点解除引用，false为节点未与后端实体节点解除引用。 1313 1314**示例：** 1315 1316请参考[检验FrameNode是否有效示例](#检验framenode是否有效示例)。 1317 1318### getInspectorInfo<sup>12+</sup> 1319 1320getInspectorInfo(): Object 1321 1322获取节点的结构信息，该信息和DevEco Studio内置<!--RP1-->ArkUI Inspector<!--RP1End-->工具里面的一致。 1323 1324> **说明：** 1325> 1326> getInspectorInfo接口用于获取所有节点的信息，作为调试接口使用，频繁调用会导致性能下降。 1327 1328**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1329 1330**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1331 1332**返回值：** 1333 1334| 类型 | 说明 | 1335| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1336| Object | 节点的结构信息。 | 1337 1338以查询Button组件节点为例获取到的Object结果部分值如下所示 1339```json 1340{ 1341 "$type": "Button", // 组件类型 1342 "$ID": 44, // 组件id 1343 "type": "build-in", // build-in为系统组件，custom为自定义组件 1344 "$rect": "[498.00, 468.00],[718.00,598.00]", // 组件框左上角坐标和右下角坐标 1345 "$debugLine": "", // 组件对应源码的调试信息，包括源码路径和组件所在的行号。 1346 "$attrs": { 1347 "borderStyle": "BorderStyle.Solid", 1348 "borderColor": "#FF000000", 1349 "borderWidth": "0.00vp", 1350 "borderRadius": { 1351 "topLeft": "65.00px", 1352 "topRight": "65.00px", 1353 "bottomLeft": "65.00px", 1354 "bottomRight": "65.00px" 1355 }, 1356 "border": "{\"style\":\"BorderStyle.Solid\",\"color\":\"#FF000000\",\"width\":\"0.00vp\",\"radius\":{\"topLeft\":\"65.00px\",\"topRight\":\"65.00px\",\"bottomLeft\":\"65.00px\",\"bottomRight\":\"65.00px\"},\"dashGap\":\"0.00vp\",\"dashWidth\":\"0.00vp\"}", 1357 "outlineStyle": "OutlineStyle.SOLID", 1358 "outlineColor": "#FF000000" 1359 } 1360} 1361``` 1362以上返回结果的\$attrs字段会根据不同的组件类型具有不同的属性，具体可以参考<!--RP2-->[getInspectorInfo返回结果$attrs映射表.xlsx](./figures/getInspectorInfo返回结果%24attrs映射表.xlsx)<!--RP2End--> 1363 1364**示例：** 1365 1366请参考[节点操作示例](#节点操作示例)。 1367 1368### getCustomProperty<sup>12+</sup> 1369 1370getCustomProperty(name: string): Object | undefined 1371 1372通过名称获取组件的自定义属性。 1373 1374**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1375 1376**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1377 1378**参数：** 1379 1380| 参数名 | 类型 | 必填 | 说明 | 1381| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 1382| name | string | 是 | 自定义属性的名称。 | 1383 1384**返回值：** 1385 1386| 类型 | 说明 | 1387| -------------------------------------------------------------- | --------------------------------------------------------------------- | 1388| Object \| undefined | 自定义属性的值。 | 1389 1390**示例：** 1391 1392请参考[节点操作示例](#节点操作示例)。 1393 1394### dispose<sup>12+</sup> 1395 1396dispose(): void 1397 1398立即解除当前FrameNode对象对实体FrameNode节点的引用关系。 1399 1400**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1401 1402**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1403 1404> **说明：** 1405> 1406> FrameNode对象调用dispose后，由于不对应任何实体FrameNode节点，在调用部分查询接口([getMeasuredSize](#getmeasuredsize12)、[getLayoutPosition](#getlayoutposition12))的时候会导致应用出现jscrash。 1407> 1408> 通过[getUniqueId](#getuniqueid12)可以判断当前FrameNode是否对应一个实体FrameNode节点。当UniqueId大于0时表示该对象对应一个实体FrameNode节点。 1409 1410**示例：** 1411 1412```ts 1413import { NodeController, FrameNode, BuilderNode } from '@kit.ArkUI'; 1414 1415@Component 1416struct TestComponent { 1417 build() { 1418 Column() { 1419 Text('This is a BuilderNode.') 1420 .fontSize(16) 1421 .fontWeight(FontWeight.Bold) 1422 } 1423 .width('100%') 1424 .backgroundColor(Color.Gray) 1425 } 1426 1427 aboutToAppear() { 1428 console.error('aboutToAppear'); 1429 } 1430 1431 aboutToDisappear() { 1432 console.error('aboutToDisappear'); 1433 } 1434} 1435 1436@Builder 1437function buildComponent() { 1438 TestComponent() 1439} 1440 1441class MyNodeController extends NodeController { 1442 private rootNode: FrameNode | null = null; 1443 private builderNode: BuilderNode<[]> | null = null; 1444 1445 makeNode(uiContext: UIContext): FrameNode | null { 1446 this.rootNode = new FrameNode(uiContext); 1447 this.builderNode = new BuilderNode(uiContext, { selfIdealSize: { width: 200, height: 100 } }); 1448 this.builderNode.build(new WrappedBuilder(buildComponent)); 1449 1450 const rootRenderNode = this.rootNode.getRenderNode(); 1451 if (rootRenderNode !== null) { 1452 rootRenderNode.size = { width: 200, height: 200 }; 1453 rootRenderNode.backgroundColor = 0xff00ff00; 1454 rootRenderNode.appendChild(this.builderNode!.getFrameNode()!.getRenderNode()); 1455 } 1456 1457 return this.rootNode; 1458 } 1459 1460 disposeFrameNode() { 1461 if (this.rootNode !== null && this.builderNode !== null) { 1462 this.rootNode.removeChild(this.builderNode.getFrameNode()); 1463 this.builderNode.dispose(); 1464 1465 this.rootNode.dispose(); 1466 } 1467 } 1468 1469 removeBuilderNode() { 1470 const rootRenderNode = this.rootNode!.getRenderNode(); 1471 if (rootRenderNode !== null && this.builderNode !== null && this.builderNode.getFrameNode() !== null) { 1472 rootRenderNode.removeChild(this.builderNode!.getFrameNode()!.getRenderNode()); 1473 } 1474 } 1475} 1476 1477@Entry 1478@Component 1479struct Index { 1480 private myNodeController: MyNodeController = new MyNodeController(); 1481 1482 build() { 1483 Column({ space: 4 }) { 1484 NodeContainer(this.myNodeController) 1485 Button('FrameNode dispose') 1486 .onClick(() => { 1487 this.myNodeController.disposeFrameNode(); 1488 }) 1489 .width('100%') 1490 } 1491 } 1492} 1493``` 1494 1495### commonAttribute<sup>12+</sup> 1496 1497get commonAttribute(): CommonAttribute 1498 1499获取FrameNode中持有的CommonAttribute接口，用于设置[通用属性](./arkui-ts/ts-component-general-attributes.md)和[通用事件](./arkui-ts/ts-component-general-events.md)。 1500 1501仅可以修改自定义节点的属性。 1502 1503**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1504 1505**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1506 1507**返回值：** 1508 1509| 类型 | 说明 | 1510| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 1511| CommonAttribute | 获取FrameNode中持有的CommonAttribute接口，用于设置通用属性和通用事件。| 1512 1513> **说明：** 1514> 1515> FrameNode的效果参考对齐方式为顶部起始端的[Stack](./arkui-ts/ts-container-stack.md)容器组件。 1516> 1517> FrameNode的属性支持范围参考[CommonModifier](./arkui-ts/ts-universal-attributes-attribute-modifier.md#attribute支持范围)。 1518 1519**示例：** 1520 1521请参考[基础事件示例](#基础事件示例)。 1522 1523### commonEvent<sup>12+</sup> 1524 1525get commonEvent(): UICommonEvent 1526 1527获取FrameNode中持有的UICommonEvent对象，用于设置基础事件。设置的基础事件与声明式定义的事件平行，参与事件竞争；设置的基础事件不覆盖原有的声明式事件。同时设置两个事件回调的时候，优先回调声明式事件。 1528 1529LazyForEach场景下，由于存在节点的销毁重建，对于重建的节点需要重新设置事件回调才能保证监听事件正常响应。 1530 1531**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1532 1533**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1534 1535**返回值：** 1536 1537| 类型 | 说明 | 1538| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 1539| [UICommonEvent](./arkui-ts/ts-uicommonevent.md#uicommonevent) | UICommonEvent对象，用于设置基础事件。 | 1540 1541**示例：** 1542 1543请参考[基础事件示例](#基础事件示例)和[LazyForEach场景基础事件使用示例](#lazyforeach场景基础事件使用示例)。 1544 1545### gestureEvent<sup>14+</sup> 1546 1547get gestureEvent(): UIGestureEvent 1548 1549获取FrameNode中持有的UIGestureEvent对象，用于设置组件绑定的手势事件。通过gestureEvent接口设置的手势不会覆盖通过[声明式手势接口](./arkui-ts/ts-gesture-settings.md)绑定的手势，两者同时设置了手势时，优先回调声明式接口设置的手势事件。 1550 1551**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 1552 1553**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1554 1555**返回值：** 1556 1557| 类型 | 说明 | 1558| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 1559| [UIGestureEvent](./arkui-ts/ts-uigestureevent.md#uigestureevent) | UIGestureEvent对象，用于设置组件绑定的手势。 | 1560 1561**示例：** 1562 1563请参考[手势事件示例](#手势事件示例)。 1564 1565### onDraw<sup>12+</sup> 1566 1567onDraw?(context: DrawContext): void 1568 1569FrameNode的自绘制方法，该方法会重写默认绘制方法，在FrameNode进行内容绘制时被调用。 1570 1571**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1572 1573**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1574 1575**参数：** 1576 1577| 参数名 | 类型 | 必填 | 说明 | 1578| ------- | ------------------------------------------------------ | ---- | ---------------- | 1579| context | [DrawContext](./js-apis-arkui-graphics.md#drawcontext) | 是 | 图形绘制上下文。自绘制区域无法超出组件自身大小。 | 1580 1581**示例：** 1582 1583请参考[节点自定义示例](#节点自定义示例)。 1584 1585### onMeasure<sup>12+</sup> 1586 1587onMeasure(constraint: LayoutConstraint): void 1588 1589FrameNode的自定义测量方法，该方法会重写默认测量方法，在FrameNode进行测量时被调用，测量FrameNode及其内容的大小。 1590 1591**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1592 1593**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1594 1595**参数：** 1596 1597| 参数名 | 类型 | 必填 | 说明 | 1598| ------- | ------------------------------------------------------ | ---- | ---------------- | 1599| constraint | [LayoutConstraint](#layoutconstraint12) | 是 | 组件进行测量时使用的布局约束。 | 1600 1601**示例：** 1602 1603请参考[节点自定义示例](#节点自定义示例)。 1604 1605### onLayout<sup>12+</sup> 1606 1607onLayout(position: Position): void 1608 1609FrameNode的自定义布局方法，该方法会重写默认布局方法，在FrameNode进行布局时被调用，为FrameNode及其子节点指定位置。 1610 1611**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1612 1613**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1614 1615**参数：** 1616 1617| 参数名 | 类型 | 必填 | 说明 | 1618| ------- | ------------------------------------------------------ | ---- | ---------------- | 1619| position | [Position](./js-apis-arkui-graphics.md#position) | 是 | 组件进行布局时使用的位置信息。 | 1620 1621**示例：** 1622 1623请参考[节点自定义示例](#节点自定义示例)。 1624 1625### setMeasuredSize<sup>12+</sup> 1626 1627setMeasuredSize(size: Size): void 1628 1629设置FrameNode的测量后的尺寸，默认单位PX。若设置的宽高为负数，自动取零。 1630 1631**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1632 1633**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1634 1635**参数：** 1636 1637| 参数名 | 类型 | 必填 | 说明 | 1638| ------- | ------------------------------------------------------ | ---- | ---------------- | 1639| size | [Size](./js-apis-arkui-graphics.md#size) | 是 | FrameNode的测量后的尺寸。 | 1640 1641**示例：** 1642 1643请参考[节点自定义示例](#节点自定义示例)。 1644 1645### setLayoutPosition<sup>12+</sup> 1646 1647setLayoutPosition(position: Position): void 1648 1649设置FrameNode的布局后的位置，默认单位PX。 1650 1651**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1652 1653**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1654 1655**参数：** 1656 1657| 参数名 | 类型 | 必填 | 说明 | 1658| ------- | ------------------------------------------------------ | ---- | ---------------- | 1659| position | [Position](./js-apis-arkui-graphics.md#position) | 是 | FrameNode的布局后的位置。 | 1660 1661**示例：** 1662 1663请参考[节点自定义示例](#节点自定义示例)。 1664 1665### measure<sup>12+</sup> 1666 1667measure(constraint: LayoutConstraint): void 1668 1669调用FrameNode的测量方法，根据父容器的布局约束，对FrameNode进行测量，计算出尺寸，如果测量方法被重写，则调用重写的方法。建议在[onMeasure](#onmeasure12)方法中调用。 1670 1671**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1672 1673**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1674 1675**参数：** 1676 1677| 参数名 | 类型 | 必填 | 说明 | 1678| ------- | ------------------------------------------------------ | ---- | ---------------- | 1679| constraint | [LayoutConstraint](#layoutconstraint12) | 是 | 组件进行测量时使用的父容器布局约束。 | 1680 1681**示例：** 1682 1683请参考[节点自定义示例](#节点自定义示例)。 1684 1685### layout<sup>12+</sup> 1686 1687layout(position: Position): void 1688 1689调用FrameNode的布局方法，为FrameNode及其子节点指定布局位置，如果布局方法被重写，则调用重写的方法。建议在[onLayout](#onlayout12)方法中调用。 1690 1691**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1692 1693**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1694 1695**参数：** 1696 1697| 参数名 | 类型 | 必填 | 说明 | 1698| ------- | ------------------------------------------------------ | ---- | ---------------- | 1699| position | [Position](./js-apis-arkui-graphics.md#position) | 是 | 组件进行布局时使用的位置信息。 | 1700 1701**示例：** 1702 1703请参考[节点自定义示例](#节点自定义示例)。 1704 1705### setNeedsLayout<sup>12+</sup> 1706 1707setNeedsLayout(): void 1708 1709该方法会将FrameNode标记为需要布局的状态，下一帧将会进行重新布局。 1710 1711**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1712 1713**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1714 1715**示例：** 1716 1717请参考[节点自定义示例](#节点自定义示例)。 1718 1719### invalidate<sup>12+</sup> 1720 1721invalidate(): void 1722 1723该方法会触发FrameNode自绘制内容的重新渲染。 1724 1725**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1726 1727**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1728 1729### addComponentContent<sup>12+</sup> 1730 1731addComponentContent\<T>(content: ComponentContent\<T>): void 1732 1733支持添加ComponentContent类型的组件内容。要求当前节点是一个可修改的节点，即[isModifiable](#ismodifiable12)的返回值为true，否则抛出异常信息。 1734 1735**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1736 1737**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1738 1739**参数：** 1740 1741| 参数名 | 类型 | 必填 | 说明 | 1742| ------- | ------------------------------------------------------ | ---- | ---------------- | 1743| content | [ComponentContent](./js-apis-arkui-ComponentContent.md)\<T> | 是 | FrameNode节点中显示的组件内容。 | 1744 1745**错误码：** 1746 1747| 错误码ID | 错误信息 | 1748| -------- | -------------------------------- | 1749| 100021 | The FrameNode is not modifiable. | 1750 1751```ts 1752import { NodeController, FrameNode, ComponentContent, typeNode } from '@kit.ArkUI'; 1753 1754@Builder 1755function buildText() { 1756 Column() { 1757 Text('hello') 1758 .width(50) 1759 .height(50) 1760 .backgroundColor(Color.Yellow) 1761 } 1762} 1763 1764class MyNodeController extends NodeController { 1765 makeNode(uiContext: UIContext): FrameNode | null { 1766 let node = new FrameNode(uiContext) 1767 node.commonAttribute.width(300).height(300).backgroundColor(Color.Red) 1768 let col = typeNode.createNode(uiContext, "Column") 1769 col.initialize({ space: 10 }) 1770 node.appendChild(col) 1771 let row4 = typeNode.createNode(uiContext, "Row") 1772 row4.attribute.width(200) 1773 .height(200) 1774 .borderWidth(1) 1775 .borderColor(Color.Black) 1776 .backgroundColor(Color.Green) 1777 let component = new ComponentContent<Object>(uiContext, wrapBuilder(buildText)) 1778 if (row4.isModifiable()) { 1779 row4.addComponentContent(component) 1780 col.appendChild(row4) 1781 } 1782 return node 1783 } 1784} 1785 1786@Entry 1787@Component 1788struct FrameNodeTypeTest { 1789 private myNodeController: MyNodeController = new MyNodeController(); 1790 1791 build() { 1792 Row() { 1793 NodeContainer(this.myNodeController); 1794 } 1795 } 1796} 1797``` 1798 1799### disposeTree<sup>12+</sup> 1800 1801disposeTree(): void 1802 1803下树并递归释放当前节点为根的子树。 1804 1805**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1806 1807**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1808 1809```ts 1810import { FrameNode, NodeController, BuilderNode } from '@kit.ArkUI'; 1811 1812@Component 1813struct TestComponent { 1814 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent2)); 1815 1816 build() { 1817 Column() { 1818 Text('This is a BuilderNode.') 1819 .fontSize(16) 1820 .fontWeight(FontWeight.Bold) 1821 NodeContainer(this.myNodeController) 1822 } 1823 .width('100%') 1824 .backgroundColor(Color.Gray) 1825 } 1826 1827 aboutToAppear() { 1828 console.error('BuilderNode aboutToAppear'); 1829 } 1830 1831 aboutToDisappear() { 1832 console.error('BuilderNode aboutToDisappear'); 1833 } 1834} 1835 1836@Component 1837struct TestComponent2 { 1838 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent3)); 1839 private myNodeController2: MyNodeController = new MyNodeController(wrapBuilder(buildComponent4)); 1840 1841 build() { 1842 Column() { 1843 Text('This is a BuilderNode 2.') 1844 .fontSize(16) 1845 .fontWeight(FontWeight.Bold) 1846 NodeContainer(this.myNodeController) 1847 NodeContainer(this.myNodeController2) 1848 } 1849 .width('100%') 1850 .backgroundColor(Color.Gray) 1851 } 1852 1853 aboutToAppear() { 1854 console.error('BuilderNode 2 aboutToAppear'); 1855 } 1856 1857 aboutToDisappear() { 1858 console.error('BuilderNode 2 aboutToDisappear'); 1859 } 1860} 1861 1862@Component 1863struct TestComponent3 { 1864 build() { 1865 Column() { 1866 Text('This is a BuilderNode 3.') 1867 .fontSize(16) 1868 .fontWeight(FontWeight.Bold) 1869 1870 } 1871 .width('100%') 1872 .backgroundColor(Color.Gray) 1873 } 1874 1875 aboutToAppear() { 1876 console.error('BuilderNode 3 aboutToAppear'); 1877 } 1878 1879 aboutToDisappear() { 1880 console.error('BuilderNode 3 aboutToDisappear'); 1881 } 1882} 1883 1884@Component 1885struct TestComponent4 { 1886 build() { 1887 Column() { 1888 Text('This is a BuilderNode 4.') 1889 .fontSize(16) 1890 .fontWeight(FontWeight.Bold) 1891 1892 } 1893 .width('100%') 1894 .backgroundColor(Color.Gray) 1895 } 1896 1897 aboutToAppear() { 1898 console.error('BuilderNode 4 aboutToAppear'); 1899 } 1900 1901 aboutToDisappear() { 1902 console.error('BuilderNode 4 aboutToDisappear'); 1903 } 1904} 1905 1906@Builder 1907function buildComponent() { 1908 TestComponent() 1909} 1910 1911@Builder 1912function buildComponent2() { 1913 TestComponent2() 1914} 1915 1916@Builder 1917function buildComponent3() { 1918 TestComponent3() 1919} 1920 1921@Builder 1922function buildComponent4() { 1923 TestComponent4() 1924} 1925 1926class MyNodeController extends NodeController { 1927 private rootNode: FrameNode | null = null; 1928 private builderNode: BuilderNode<[]> | null = null; 1929 private wrappedBuilder: WrappedBuilder<[]>; 1930 1931 constructor(builder: WrappedBuilder<[]>) { 1932 super(); 1933 this.wrappedBuilder = builder; 1934 } 1935 1936 makeNode(uiContext: UIContext): FrameNode | null { 1937 this.builderNode = new BuilderNode(uiContext, { selfIdealSize: { width: 200, height: 100 } }); 1938 this.builderNode.build(this.wrappedBuilder); 1939 1940 return this.builderNode.getFrameNode(); 1941 } 1942 1943 dispose() { 1944 if (this.builderNode !== null) { 1945 this.builderNode.getFrameNode()?.disposeTree() 1946 } 1947 } 1948 1949 removeBuilderNode() { 1950 const rootRenderNode = this.rootNode!.getRenderNode(); 1951 if (rootRenderNode !== null && this.builderNode !== null && this.builderNode.getFrameNode() !== null) { 1952 rootRenderNode.removeChild(this.builderNode!.getFrameNode()!.getRenderNode()); 1953 } 1954 } 1955} 1956 1957@Entry 1958@Component 1959struct Index { 1960 private myNodeController: MyNodeController = new MyNodeController(wrapBuilder(buildComponent)); 1961 1962 build() { 1963 Column({ space: 4 }) { 1964 NodeContainer(this.myNodeController) 1965 Button('BuilderNode dispose') 1966 .onClick(() => { 1967 this.myNodeController.dispose(); 1968 }) 1969 .width('100%') 1970 Button('BuilderNode rebuild') 1971 .onClick(() => { 1972 this.myNodeController.rebuild(); 1973 }) 1974 .width('100%') 1975 } 1976 } 1977} 1978``` 1979 1980**示例：** 1981 1982请参考[节点自定义示例](#节点自定义示例)。 1983 1984### setCrossLanguageOptions<sup>15+</sup> 1985 1986setCrossLanguageOptions(options: CrossLanguageOptions): void 1987 1988设置当前FrameNode的跨ArkTS语言访问选项。例如ArkTS语言创建的节点，设置该节点是否可通过非ArkTS语言进行属性设置。当前FrameNode如果不可修改或不可设置跨ArkTS语言访问选项，抛出异常信息。 1989 1990> **说明：** 1991> 1992> 当前仅支持[Scroll](#scroll12), [Swiper](#swiper12)，[List](#list12)，[ListItem](#listitem12),[ListImteGroup](#listitemgroup12)，[WatterFlow](#waterflow12)，[FlowItem](#flowitem12)，[Grid](#grid14)，[GridTime](#griditem14)，[TextInput](#textinput12)，[TextArea](#textarea14)，[Column](#column12)，[Row](#row12)，[Stack](#stack12)，[Flex](#flex12)，[RelativeContainer](#relativecontainer12)，[Progress](#progress12)，[LoadingProgress](#loadingprogress12)，[Image](#image12)，[Button](#button12)，[CheckBox](#checkbox18)，[Radio](#radio18)，[Slider](#slider18)，[Toggle](#toggle18)，[XComponent](#xcomponent12)类型的[TypedFrameNode](#typedframenode12)设置跨ArkTS语言访问选项。 1993 1994**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 1995 1996**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1997 1998**参数：** 1999 2000| 参数名 | 类型 | 必填 | 说明 | 2001| ------------ | ----------------------- | ---- | --------------------- | 2002| options | [CrossLanguageOptions](#crosslanguageoptions15) | 是 | 跨ArkTS语言访问选项。 | 2003 2004**错误码：** 2005 2006| 错误码ID | 错误信息 | 2007| -------- | -------------------------------- | 2008| 100022 | The FrameNode cannot be set whether to support cross-language common attribute setting. | 2009 2010**示例：** 2011 2012请参考[节点操作示例](#节点操作示例)。 2013 2014### getCrossLanguageOptions<sup>15+</sup> 2015 2016getCrossLanguageOptions(): CrossLanguageOptions 2017 2018获取当前FrameNode的跨ArkTS语言访问选项。例如ArkTS语言创建的节点，返回该节点是否可通过非ArkTS语言进行属性设置。 2019 2020**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 2021 2022**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2023 2024**返回值：** 2025 2026| 类型 | 说明 | 2027| ----------------------- | --------------------- | 2028| [CrossLanguageOptions](#crosslanguageoptions15) | 跨ArkTS语言访问选项。 | 2029 2030**示例：** 2031 2032请参考[节点操作示例](#节点操作示例)。 2033 2034### getInteractionEventBindingInfo<sup>19+</sup> 2035 2036getInteractionEventBindingInfo(eventType: EventQueryType): InteractionEventBindingInfo | undefined 2037 2038获取目标节点的事件绑定信息，如果该组件节点上没有绑定要查询的交互事件类型时，返回 undefined。 2039 2040**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 2041 2042**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2043 2044**参数：** 2045 2046| 参数名 | 类型 | 必填 | 说明 | 2047| ------------------ | ------------------ | ------------------- | ------------------- | 2048| eventType | [EventQueryType](./arkui-ts/ts-appendix-enums.md#eventquerytype19) | 是 | 要查询的交互事件类型。 | 2049 2050**返回值：** 2051 2052| 类型 | 说明 | 2053| ------------------ | ------------------ | 2054| [InteractionEventBindingInfo](#interactioneventbindinginfo19) \| undefined | 如果当前节点上绑定了所要查询的交互事件，则返回一个InteractionEventBindingInfo对象，指示事件绑定详细信息，如果没有绑定任何交互事件则返回undefined。 | 2055 2056**示例：** 2057 2058请参考[节点操作示例](#节点操作示例)。 2059 2060### recycle<sup>18+</sup> 2061 2062recycle(): void 2063 2064全局复用场景下，触发子组件回收，彻底释放FrameNode后端资源，以便于资源的重新复用，确保后端资源能够被有效回收并再次使用。 2065 2066**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 2067 2068**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2069 2070**示例：** 2071 2072请参考[节点复用回收使用示例](#节点复用回收使用示例)。 2073 2074### reuse<sup>18+</sup> 2075 2076reuse(): void 2077 2078全局复用场景下，触发子组件复用，实现FrameNode后端资源的复用，提升资源利用效率。为保证资源充足，可以在recycle之后使用。 2079 2080**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 2081 2082**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2083 2084**示例：** 2085 2086请参考[节点复用回收使用示例](#节点复用回收使用示例)。 2087 2088### addSupportedUIStates<sup>20+</sup> 2089 2090addSupportedUIStates(uiStates: number, statesChangeHandler: UIStatesChangeHandler, excludeInner?: boolean): void 2091 2092设置组件支持的多态样式状态。 2093 2094**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 2095 2096**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2097 2098**参数：** 2099 2100| 参数名 | 类型 | 必填 | 说明 | 2101| -------- | ----------------------------- | ---- | ------------------------------------------------------------ | 2102| uiStates | number | 是 | 需要处理目标节点的UI状态。<br>可以通过位或计算同时指定设置多个状态，如：targetUIStates = UIState.PRESSED \| UIState.FOCUSED。 | 2103| statesChangeHandler | [UIStatesChangeHandler](#uistateschangehandler20) | 是 | 状态变化时的回调函数。 | 2104| excludeInner | boolean | 否 | 禁止内部默认状态样式处理的标志，默认值为false。<br> true表示禁止内部默认状态样式处理，false不禁止内部默认状态样式处理。 | 2105 2106**示例：** 2107 2108请参考[组件设置和删除多态样式状态示例](#组件设置和删除多态样式状态示例)。 2109 2110### removeSupportedUIStates<sup>20+</sup> 2111 2112removeSupportedUIStates(uiStates: number): void 2113 2114删除组件当前注册的状态处理。 2115 2116**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 2117 2118**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2119 2120**参数：** 2121 2122| 参数名 | 类型 | 必填 | 说明 | 2123| ------- | -------- | ---- | ------------------------------------------------------------ | 2124| uiStates | number | 是 | 需要删除的UI状态。<br>可以通过位或计算同时指定删除多个状态，如：removeUIStates = UIState.PRESSED \| UIState.FOCUSED。 | 2125 2126**示例：** 2127 2128请参考[组件设置和删除多态样式状态示例](#组件设置和删除多态样式状态示例)。 2129 2130### createAnimation<sup>20+</sup> 2131 2132createAnimation(property: AnimationPropertyType, startValue: Optional\<number[]>, endValue: number[], param: AnimateParam): boolean 2133 2134创建FrameNode上属性的动画。 2135 2136**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 2137 2138**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2139 2140**参数：** 2141 2142| 参数名 | 类型 | 必填 | 说明 | 2143| ------- | -------- | ---- | ------------------------------------------------------------ | 2144| property | [AnimationPropertyType](./arkui-ts/ts-appendix-enums.md#animationpropertytype20) | 是 | 动画属性枚举。 | 2145| startValue | Optional\<number[]> | 是 | 动画属性的起始值。取值为undefined或数组，取值为数组时数组长度需要和属性枚举匹配。如果为undefined则表示不显式指定动画初值，节点上一次设置的属性终值为此次动画的起点值。如果取值为数组，<br/>- 对于AnimationPropertyType.ROTATION，取值格式为[rotationX, rotationY, rotationZ]，单位为度（°），表示绕x、y、z轴的旋转角。<br/>- 对于AnimationPropertyType.TRANSLATION，取值格式为[translateX, translateY]，单位为px，表示沿x、y轴的平移量。<br/>- 对于AnimationPropertyType.SCALE，取值格式为[scaleX, scaleY]，表示x、y方向的缩放比例。<br/>- 对于AnimationPropertyType.OPACITY，取值格式为[opacity]，表示不透明度。opacity的取值范围为[0, 1]。<br/>**说明：**<br/>当节点上从未设置过该属性时，需要显式指定startValue才能正常创建动画。当节点上已经设置过属性（如第二次及之后创建动画），则推荐不显式指定startValue或者显式指定startValue为上一次的终值，表示使用上一次的终值作为新的动画起点，避免起始值跳变。 | 2146| endValue | number[] | 是 | 动画属性的终止值。取值为数组，数组长度需要和属性枚举匹配。<br/>- 对于AnimationPropertyType.ROTATION，取值格式为[rotationX, rotationY, rotationZ]，单位为度（°），表示绕x、y、z轴的旋转角。<br/>- 对于AnimationPropertyType.TRANSLATION，取值格式为[translateX, translateY]，单位为px，表示沿x、y轴的平移量。<br/>- 对于AnimationPropertyType.SCALE，取值格式为[scaleX, scaleY]，表示x、y方向的缩放比例。<br/>- 对于AnimationPropertyType.OPACITY，取值格式为[opacity]，表示不透明度。opacity的取值范围为[0, 1]。 | 2147| param | [AnimateParam](./arkui-ts/ts-explicit-animation.md#animateparam对象说明) | 是 | 动画参数。包含时长、动画曲线、结束回调等参数。 | 2148 2149**返回值：** 2150 2151| 类型 | 说明 | 2152| ------------------ | ------------------ | 2153| boolean | 表示动画是否创建成功。<br/>返回值为true：动画创建成功，如果动画参数中设置结束回调，动画结束后会调用结束回调。<br/>返回值为false：动画创建失败，即使动画参数中设置结束回调，结束回调也不会被调用。<br/>可能导致动画创建失败的原因：<br/> 1. 节点已经释放，调用过[dispose](#dispose12)方法。<br/> 2. 对于系统组件的代理节点，即对于[isModifiable](#ismodifiable12)为false的节点，调用该接口会失败。<br/> 3. 属性枚举非法，或属性枚举需要的长度与startValue或endValue的长度不匹配。<br/> 4. 该属性在第一次创建动画时没有显式指定startValue导致没有动画起点值，或设置的动画终值和动画起始值（当startValue为undefined时动画起始值为上一次的终值）相同，此时无动画产生。 | 2154 2155**示例：** 2156 2157请参考[动画创建与取消示例](#动画创建与取消示例)。 2158 2159### cancelAnimations<sup>20+</sup> 2160 2161cancelAnimations(properties: AnimationPropertyType[]): boolean 2162 2163请求取消FrameNode上指定属性上的所有动画，该方法需在节点所处线程中调用，会阻塞当前线程以等待取消结果。如果动画成功取消，节点上的属性值会被恢复为取消时的显示值（即当前状态）。 2164 2165**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 2166 2167**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2168 2169**参数：** 2170 2171| 参数名 | 类型 | 必填 | 说明 | 2172| ------- | -------- | ---- | ------------------------------------------------------------ | 2173| properties | [AnimationPropertyType](./arkui-ts/ts-appendix-enums.md#animationpropertytype20)\[\] | 是 | 待取消的动画属性枚举数组。可以一次取消一个节点上的多个属性的动画。 | 2174 2175**返回值：** 2176 2177| 类型 | 说明 | 2178| ------------------ | ------------------ | 2179| boolean | 表示动画是否取消成功。<br/>返回值为true：动画取消成功。<br/>返回值为false：动画取消失败。<br/>可能导致动画取消失败的原因：<br/> 1. 节点已经释放，调用过[dispose](#dispose12)方法。<br/> 2. 对于系统组件的代理节点，即对于[isModifiable](#ismodifiable12)为false的节点，调用该接口会失败。<br/> 3. 属性枚举数组存在非法枚举值。<br/> 4. 系统异常。如发生ipc异常导致动画取消失败。<br/>**说明：**<br/> 1. 即使属性上没有动画，尝试取消该属性的动画，在无系统异常情况下调用取消接口也会返回true。<br/> 2. 如果开发者保证传入参数合法且节点正常，返回false时表明发生了系统异常。此时开发者可隔一段时间后再次尝试取消，或通过调用duration为0的[createAnimation](#createanimation20)接口停止属性上的动画。| 2180 2181**示例：** 2182 2183请参考[动画创建与取消示例](#动画创建与取消示例)。 2184 2185### getNodePropertyValue<sup>20+</sup> 2186 2187getNodePropertyValue(property: AnimationPropertyType): number[] 2188 2189获取FrameNode上的属性值。 2190 2191**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 2192 2193**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2194 2195**参数：** 2196 2197| 参数名 | 类型 | 必填 | 说明 | 2198| ------- | -------- | ---- | ------------------------------------------------------------ | 2199| property | [AnimationPropertyType](./arkui-ts/ts-appendix-enums.md#animationpropertytype20) | 是 | 动画属性枚举。 | 2200 2201**返回值：** 2202 2203| 类型 | 说明 | 2204| ------------------ | ------------------ | 2205| number[] | 表示渲染节点上的属性值，返回的数组长度与属性枚举相关，异常时返回空数组。<br/>对不同属性枚举的返回值格式：<br/>- 当节点已经释放，调用过[dispose](#dispose12)方法，或者属性枚举非法时，返回长度为0的空数组。<br/>- 对于AnimationPropertyType.ROTATION，返回值为[rotationX, rotationY, rotationZ]，单位为度（°），表示绕x、y、z轴的旋转角。<br/>- 对于AnimationPropertyType.TRANSLATION，返回值为[translateX, translateY]，单位为px，表示沿x、y轴的平移量。<br/>- 对于AnimationPropertyType.SCALE，返回值为[scaleX, scaleY]，表示x、y方向的缩放比例。<br/>- 对于AnimationPropertyType.OPACITY，返回值为[opacity]，表示不透明度。<br/>**说明：**<br/>1. 动画正常取消后，节点上的属性值被恢复为取消时的值，通过该接口可以获取取消后的显示值。<br/>2. 动画期间该接口的返回值为该属性的终值，而不是动画过程的实时值。<br/>| 2206 2207**示例：** 2208 2209请参考[动画创建与取消示例](#动画创建与取消示例)。 2210 2211## TypedFrameNode<sup>12+</sup> 2212 2213TypedFrameNode继承自[FrameNode](#framenode-1)，用于声明具体类型的FrameNode。 2214 2215### 属性 2216 2217**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2218 2219**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2220 2221| 名称 | 类型 | 只读 | 可选 | 说明 | 2222| ---------- | ---- | ---- | ---- | ------------------------------------------------------------ | 2223| initialize | C | 否 | 否 | 该接口用于创建对应组件的构造参数，用于设置/更新组件的初始值。 | 2224| attribute | T | 是 | 否 | 该接口用于获取对应组件的属性设置对象，用于设置/更新组件的通用、私有属性。 | 2225 2226> **说明：** 2227> 2228> [commonAttribute](#commonattribute12)仅在CustomFrameNode上生效，TypedFrameNode上commonAttribute行为未定义。建议使用[attribute](#属性)接口而非[commonAttribute](#commonattribute12)接口进行通用属性设置，如node.attribute.backgroundColor(Color.Pink)。 2229 2230## typeNode<sup>12+</sup> 2231 2232typeNode提供创建具体类型的FrameNode能力，可通过FrameNode的基础接口进行自定义的挂载，使用占位容器进行显示。 2233 2234使用typeNode创建Text、Image、Select、Toggle节点时，当传入的[UIContext](./arkts-apis-uicontext-uicontext.md)对应的UI实例销毁后，调用该接口会返回一个无效的FrameNode节点，无法正常挂载和显示。 2235 2236**示例：** 2237 2238请参考[自定义具体类型节点示例](#自定义具体类型节点示例)。 2239 2240### Text<sup>12+</sup> 2241 2242type Text = TypedFrameNode<TextInterface, TextAttribute> 2243 2244Text类型的FrameNode节点类型。不允许添加子组件。 2245 2246**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2247 2248**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2249 2250| 类型 | 说明 | 2251| -------------------------------------------------- | ------------------------------------------------------------ | 2252| TypedFrameNode<[TextInterface](./arkui-ts/ts-basic-components-text.md#接口), [TextAttribute](./arkui-ts/ts-basic-components-text.md#属性)> | 提供Text类型FrameNode节点。<br/>**说明：**<br/> TextInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Text组件的构造函数类型。 <br/> TextAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Text组件的属性设置对象。 | 2253 2254### createNode('Text')<sup>12+</sup> 2255 2256createNode(context: UIContext, nodeType: 'Text'): Text 2257 2258创建Text类型的FrameNode节点。 2259 2260**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2261 2262**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2263 2264**参数：** 2265 2266| 参数名 | 类型 | 必填 | 说明 | 2267| ------------------ | ------------------ | ------------------- | ------------------- | 2268| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2269| nodeType | 'Text' | 是 | 创建Text类型的FrameNode节点。 | 2270 2271**返回值：** 2272 2273| 类型 | 说明 | 2274| ------------------ | ------------------ | 2275| [Text](#text12) | Text类型的FrameNode节点。 | 2276 2277**示例：** 2278 2279```ts 2280import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 2281 2282class MyNodeController extends NodeController { 2283 makeNode(uiContext: UIContext): FrameNode | null { 2284 let node = new FrameNode(uiContext); 2285 node.commonAttribute; 2286 let col = typeNode.createNode(uiContext, 'Column'); 2287 col.initialize({ space: 5 }); 2288 node.appendChild(col); 2289 // 创建Text 2290 let text = typeNode.createNode(uiContext, 'Text'); 2291 text.initialize("Hello").fontColor(Color.Blue).fontSize(14); 2292 typeNode.getAttribute(text, 'Text')?.fontWeight(FontWeight.Bold); 2293 col.appendChild(text); 2294 return node; 2295 } 2296} 2297 2298@Entry 2299@Component 2300struct FrameNodeTypeTest { 2301 private myNodeController: MyNodeController = new MyNodeController(); 2302 2303 build() { 2304 Column({ space: 5 }) { 2305 Text('Text sample'); 2306 NodeContainer(this.myNodeController); 2307 } 2308 } 2309} 2310``` 2311 2312### getAttribute('Text')<sup>20+</sup> 2313 2314getAttribute(node: FrameNode, nodeType: 'Text'): TextAttribute | undefined 2315 2316获取Text节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 2317 2318**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 2319 2320**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2321 2322**参数：** 2323 2324| 参数名 | 类型 | 必填 | 说明 | 2325| ------------------ | ------------------ | ------------------- | ------------------- | 2326| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 2327| nodeType | 'Text' | 是 | 获取Text节点类型的属性。 | 2328 2329**返回值：** 2330 2331| 类型 | 说明 | 2332| ------------------ | ------------------ | 2333| TextAttribute \| undefined | Text节点类型的属性，若获取失败，则返回undefined。 | 2334 2335**示例：** 2336 2337```ts 2338import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 2339 2340class MyNodeController extends NodeController { 2341 makeNode(uiContext: UIContext): FrameNode | null { 2342 let node = new FrameNode(uiContext); 2343 node.commonAttribute; 2344 let col = typeNode.createNode(uiContext, 'Column'); 2345 col.initialize({ space: 5 }); 2346 node.appendChild(col); 2347 // 创建Text 2348 let text = typeNode.createNode(uiContext, 'Text'); 2349 text.initialize("Hello"); 2350 // 获取Text的属性 2351 typeNode.getAttribute(text, 'Text')?.fontColor(Color.Red) 2352 col.appendChild(text); 2353 // 创建另一个Text用于对比 2354 let text2 = typeNode.createNode(uiContext, 'Text'); 2355 text2.initialize("world"); 2356 col.appendChild(text2); 2357 return node; 2358 } 2359} 2360 2361@Entry 2362@Component 2363struct FrameNodeTypeTest { 2364 private myNodeController: MyNodeController = new MyNodeController(); 2365 2366 build() { 2367 Column({ space: 5 }) { 2368 Text('Text sample'); 2369 NodeContainer(this.myNodeController); 2370 } 2371 } 2372} 2373``` 2374 2375### bindController('Text')<sup>20+</sup> 2376 2377bindController(node: FrameNode, controller: TextController, nodeType: 'Text'): void 2378 2379将文本控制器TextController绑定到Text节点。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则抛出异常。该接口不支持声明式方式创建的节点。 2380 2381**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 2382 2383**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2384 2385**参数：** 2386 2387| 参数名 | 类型 | 必填 | 说明 | 2388| ------------------ | ------------------ | ------------------- | ------------------- | 2389| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 绑定文本控制器的目标节点。 | 2390| controller | [TextController](arkui-ts/ts-basic-components-text.md#textcontroller11) | 是 | 文本控制器。 | 2391| nodeType | 'Text' | 是 | 绑定输入框控制器的目标节点的节点类型为Text。 | 2392 2393**错误码：** 2394 2395以下错误码的详细介绍请参见[自定义节点错误码](./errorcode-node.md)。 2396 2397| 错误码ID | 错误信息 | 2398| -------- | -------------------------------- | 2399| 100023 | Parameter error. Possible causes: 1. The component type of the node is incorrect. 2. The node is null or undefined. 3. The controller is null or undefined. | 2400| 100021 | The FrameNode is not modifiable. | 2401 2402**示例：** 2403 2404```ts 2405import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 2406 2407class MyNodeController extends NodeController { 2408 // 设置TextController，可以在外部获取 2409 controller: TextController = new TextController() 2410 2411 makeNode(uiContext: UIContext): FrameNode | null { 2412 let node = new FrameNode(uiContext); 2413 node.commonAttribute; 2414 let col = typeNode.createNode(uiContext, 'Column'); 2415 col.initialize({ space: 5 }); 2416 node.appendChild(col); 2417 // 创建Text 2418 let text = typeNode.createNode(uiContext, 'Text'); 2419 text.initialize("Hello").fontColor(Color.Blue).fontSize(14); 2420 typeNode.getAttribute(text, 'Text')?.fontWeight(FontWeight.Bold) 2421 // 绑定TextController 2422 typeNode.bindController(text, this.controller, 'Text'); 2423 col.appendChild(text); 2424 return node; 2425 } 2426} 2427 2428@Entry 2429@Component 2430struct FrameNodeTypeTest { 2431 @State line: number = 0 2432 private myNodeController: MyNodeController = new MyNodeController(); 2433 2434 build() { 2435 Column({ space: 5 }) { 2436 Text('Text bindController Sample') 2437 NodeContainer(this.myNodeController) 2438 Text(`Text的行数, ${this.line}`) 2439 Button(`点击获取行数`) 2440 .onClick(() => { 2441 this.line = this.myNodeController.controller.getLayoutManager().getLineCount() 2442 }) 2443 } 2444 } 2445} 2446``` 2447 2448### Column<sup>12+</sup> 2449 2450type Column = TypedFrameNode<ColumnInterface, ColumnAttribute> 2451 2452Column类型的FrameNode节点类型。 2453 2454**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2455 2456**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2457 2458| 类型 | 说明 | 2459| ------------------------------------------------------ | ------------------------------------------------------------ | 2460| TypedFrameNode<[ColumnInterface](./arkui-ts/ts-container-column.md#接口), [ColumnAttribute](./arkui-ts/ts-container-column.md#属性)> | 提供Column类型FrameNode节点。<br/>**说明：**<br/> ColumnInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Column组件的构造函数类型。 <br/> ColumnAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Column组件的属性设置对象。 | 2461 2462### createNode('Column')<sup>12+</sup> 2463 2464createNode(context: UIContext, nodeType: 'Column'): Column 2465 2466创建Column类型的FrameNode节点。 2467 2468**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2469 2470**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2471 2472**参数：** 2473 2474| 参数名 | 类型 | 必填 | 说明 | 2475| ------------------ | ------------------ | ------------------- | ------------------- | 2476| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2477| nodeType | 'Column' | 是 | 创建Column类型的FrameNode节点。 | 2478 2479**返回值：** 2480 2481| 类型 | 说明 | 2482| ------------------ | ------------------ | 2483| [Column](#column12) | Column类型的FrameNode节点。 | 2484 2485**示例：** 2486 2487```ts 2488import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 2489 2490class MyColumnController extends NodeController { 2491 makeNode(uiContext: UIContext): FrameNode | null { 2492 let node = new FrameNode(uiContext) 2493 node.commonAttribute 2494 let col = typeNode.createNode(uiContext, 'Column') 2495 col.initialize({ space: 5 }) 2496 .width('50%') 2497 .height('50%') 2498 .backgroundColor(Color.Gray) 2499 node.appendChild(col) 2500 return node; 2501 } 2502} 2503 2504@Entry 2505@Component 2506struct FrameNodeTypeTest { 2507 private myColumnController: MyColumnController = new MyColumnController(); 2508 2509 build() { 2510 Column({ space: 5 }) { 2511 Text('ColumnSample') 2512 NodeContainer(this.myColumnController); 2513 }.width('100%') 2514 } 2515} 2516``` 2517 2518### getAttribute('Column')<sup>20+</sup> 2519 2520getAttribute(node: FrameNode, nodeType: 'Column'): ColumnAttribute | undefined 2521 2522获取Column节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 2523 2524**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 2525 2526**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2527 2528**参数：** 2529 2530| 参数名 | 类型 | 必填 | 说明 | 2531| ------------------ | ------------------ | ------------------- | ------------------- | 2532| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 2533| nodeType | 'Column' | 是 | 获取Column节点类型的属性。 | 2534 2535**返回值：** 2536 2537| 类型 | 说明 | 2538| ------------------ | ------------------ | 2539| ColumnAttribute \| undefined | Column节点类型的属性，若获取失败，则返回undefined。 | 2540 2541**示例：** 2542 2543```ts 2544import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 2545 2546class MyNodeController extends NodeController { 2547 makeNode(uiContext: UIContext): FrameNode | null { 2548 let node = new FrameNode(uiContext); 2549 node.commonAttribute; 2550 let col = typeNode.createNode(uiContext, 'Column'); 2551 col.initialize({ space: 5 }); 2552 node.appendChild(col); 2553 // 创建Column 2554 let col1 = typeNode.createNode(uiContext, 'Column'); 2555 col1.initialize().width("50%").height("20%").backgroundColor(Color.Pink); 2556 // 获取Column的属性 2557 typeNode.getAttribute(col1, 'Column')?.backgroundColor(Color.Blue).width("100%") 2558 col.appendChild(col1); 2559 // 创建另一个Column用于对比 2560 let col2 = typeNode.createNode(uiContext, 'Column'); 2561 col2.initialize().width("50%").height("20%").backgroundColor(Color.Pink); 2562 col.appendChild(col2); 2563 return node; 2564 } 2565} 2566 2567@Entry 2568@Component 2569struct FrameNodeTypeTest { 2570 private myNodeController: MyNodeController = new MyNodeController(); 2571 2572 build() { 2573 Column({ space: 5 }) { 2574 Text('Column sample'); 2575 NodeContainer(this.myNodeController); 2576 } 2577 } 2578} 2579``` 2580 2581### Row<sup>12+</sup> 2582 2583type Row = TypedFrameNode<RowInterface, RowAttribute> 2584 2585Row类型的FrameNode节点类型。 2586 2587**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2588 2589**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2590 2591| 类型 | 说明 | 2592| ------------------------------------------------ | ------------------------------------------------------------ | 2593| TypedFrameNode<[RowInterface](./arkui-ts/ts-container-row.md#接口), [RowAttribute](./arkui-ts/ts-container-row.md#属性)> | 提供Row类型FrameNode节点。<br/>**说明：**<br/> RowInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Row组件的构造函数类型。 <br/> RowAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Row组件的属性设置对象。 | 2594 2595### createNode('Row')<sup>12+</sup> 2596 2597createNode(context: UIContext, nodeType: 'Row'): Row 2598 2599创建Row类型的FrameNode节点。 2600 2601**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2602 2603**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2604 2605**参数：** 2606 2607| 参数名 | 类型 | 必填 | 说明 | 2608| ------------------ | ------------------ | ------------------- | ------------------- | 2609| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2610| nodeType | 'Row' | 是 | 创建Row类型的FrameNode节点。 | 2611 2612**返回值：** 2613 2614| 类型 | 说明 | 2615| ------------------ | ------------------ | 2616| [Row](#row12) | Row类型的FrameNode节点。 | 2617 2618**示例：** 2619 2620```ts 2621import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 2622 2623class MyRowController extends NodeController { 2624 makeNode(uiContext: UIContext): FrameNode | null { 2625 let node = new FrameNode(uiContext) 2626 node.commonAttribute 2627 let row = typeNode.createNode(uiContext, 'Row') 2628 row.initialize({ space: 5 }) 2629 .width('50%') 2630 .height('50%') 2631 .backgroundColor(Color.Gray) 2632 node.appendChild(row) 2633 return node; 2634 } 2635} 2636 2637@Entry 2638@Component 2639struct FrameNodeTypeTest { 2640 private myRowController: MyRowController = new MyRowController(); 2641 2642 build() { 2643 Column({ space: 5 }) { 2644 Text('RowSample') 2645 NodeContainer(this.myRowController); 2646 }.width('100%') 2647 } 2648} 2649``` 2650 2651### getAttribute('Row')<sup>20+</sup> 2652 2653getAttribute(node: FrameNode, nodeType: 'Row'): RowAttribute | undefined 2654 2655获取Row节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 2656 2657**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 2658 2659**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2660 2661**参数：** 2662 2663| 参数名 | 类型 | 必填 | 说明 | 2664| ------------------ | ------------------ | ------------------- | ------------------- | 2665| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 2666| nodeType | 'Row' | 是 | 获取Row节点类型的属性。 | 2667 2668**返回值：** 2669 2670| 类型 | 说明 | 2671| ------------------ | ------------------ | 2672| RowAttribute \| undefined | Row节点类型的属性，若获取失败，则返回undefined。 | 2673 2674**示例：** 2675 2676```ts 2677import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 2678 2679class MyNodeController extends NodeController { 2680 makeNode(uiContext: UIContext): FrameNode | null { 2681 let node = new FrameNode(uiContext); 2682 node.commonAttribute; 2683 let col = typeNode.createNode(uiContext, 'Column'); 2684 col.initialize({ space: 5 }); 2685 node.appendChild(col); 2686 // 创建Row 2687 let row1 = typeNode.createNode(uiContext, 'Row'); 2688 row1.initialize().width("50%").height("20%").backgroundColor(Color.Pink); 2689 // 获取Row的属性 2690 typeNode.getAttribute(row1, 'Row')?.backgroundColor(Color.Blue).width("100%") 2691 col.appendChild(row1); 2692 // 创建另一个Row用于对比 2693 let row2 = typeNode.createNode(uiContext, 'Row'); 2694 row2.initialize().width("50%").height("20%").backgroundColor(Color.Pink); 2695 col.appendChild(row2); 2696 return node; 2697 } 2698} 2699 2700@Entry 2701@Component 2702struct FrameNodeTypeTest { 2703 private myNodeController: MyNodeController = new MyNodeController(); 2704 2705 build() { 2706 Column({ space: 5 }) { 2707 Text('Row sample'); 2708 NodeContainer(this.myNodeController); 2709 } 2710 } 2711} 2712``` 2713 2714### Stack<sup>12+</sup> 2715 2716type Stack = TypedFrameNode<StackInterface, StackAttribute> 2717 2718Stack类型的FrameNode节点类型。 2719 2720**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2721 2722**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2723 2724| 类型 | 说明 | 2725| ---------------------------------------------------- | ------------------------------------------------------------ | 2726| TypedFrameNode<[StackInterface](./arkui-ts/ts-container-stack.md#接口), [StackAttribute](./arkui-ts/ts-container-stack.md#属性)> | 提供Stack类型FrameNode节点。<br/>**说明：**<br/> StackInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Stack组件的构造函数类型。 <br/> StackAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Stack组件的属性设置对象。 | 2727 2728### createNode('Stack')<sup>12+</sup> 2729 2730createNode(context: UIContext, nodeType: 'Stack'): Stack 2731 2732创建Stack类型的FrameNode节点。 2733 2734**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2735 2736**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2737 2738**参数：** 2739 2740| 参数名 | 类型 | 必填 | 说明 | 2741| ------------------ | ------------------ | ------------------- | ------------------- | 2742| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2743| nodeType | 'Stack' | 是 | 创建Stack类型的FrameNode节点。 | 2744 2745**返回值：** 2746 2747| 类型 | 说明 | 2748| ------------------ | ------------------ | 2749| [Stack](#stack12) | Stack类型的FrameNode节点。 | 2750 2751**示例：** 2752 2753```ts 2754import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 2755 2756class MyStackController extends NodeController { 2757 makeNode(uiContext: UIContext): FrameNode | null { 2758 let node = new FrameNode(uiContext) 2759 node.commonAttribute 2760 let stack = typeNode.createNode(uiContext, 'Stack') 2761 stack.initialize({ alignContent: Alignment.Top }) 2762 .width('50%') 2763 .height('50%') 2764 .backgroundColor(Color.Gray) 2765 node.appendChild(stack) 2766 let text = typeNode.createNode(uiContext, 'Text') 2767 text.initialize("This is Text") 2768 stack.appendChild(text) 2769 return node; 2770 } 2771} 2772 2773@Entry 2774@Component 2775struct FrameNodeTypeTest { 2776 private myStackController: MyStackController = new MyStackController(); 2777 2778 build() { 2779 Column({ space: 5 }) { 2780 Text('StackSample') 2781 NodeContainer(this.myStackController); 2782 }.width('100%') 2783 } 2784} 2785``` 2786 2787### getAttribute('Stack')<sup>20+</sup> 2788 2789getAttribute(node: FrameNode, nodeType: 'Stack'): StackAttribute | undefined 2790 2791获取Stack节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 2792 2793**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 2794 2795**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2796 2797**参数：** 2798 2799| 参数名 | 类型 | 必填 | 说明 | 2800| ------------------ | ------------------ | ------------------- | ------------------- | 2801| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 2802| nodeType | 'Stack' | 是 | 获取Stack节点类型的属性。 | 2803 2804**返回值：** 2805 2806| 类型 | 说明 | 2807| ------------------ | ------------------ | 2808| StackAttribute \| undefined | Stack节点类型的属性，若获取失败，则返回undefined。 | 2809 2810**示例：** 2811 2812```ts 2813import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 2814 2815class MyNodeController extends NodeController { 2816 makeNode(uiContext: UIContext): FrameNode | null { 2817 let node = new FrameNode(uiContext); 2818 node.commonAttribute; 2819 let col = typeNode.createNode(uiContext, 'Column'); 2820 col.initialize({ space: 5 }); 2821 node.appendChild(col); 2822 // 创建Stack 2823 let stack1 = typeNode.createNode(uiContext, 'Stack'); 2824 stack1.initialize().width("50%").height("20%").backgroundColor(Color.Pink); 2825 // 获取Stack的属性 2826 typeNode.getAttribute(stack1, 'Stack')?.backgroundColor(Color.Blue).width("100%") 2827 col.appendChild(stack1); 2828 // 创建另一个Stack用于对比 2829 let stack2 = typeNode.createNode(uiContext, 'Stack'); 2830 stack2.initialize().width("50%").height("20%").backgroundColor(Color.Pink); 2831 col.appendChild(stack2); 2832 return node; 2833 } 2834} 2835 2836@Entry 2837@Component 2838struct FrameNodeTypeTest { 2839 private myNodeController: MyNodeController = new MyNodeController(); 2840 2841 build() { 2842 Column({ space: 5 }) { 2843 Text('Row sample'); 2844 NodeContainer(this.myNodeController); 2845 } 2846 } 2847} 2848``` 2849 2850### GridRow<sup>12+</sup> 2851 2852type GridRow = TypedFrameNode<GridRowInterface, GridRowAttribute> 2853 2854GridRow类型的FrameNode节点类型。只允许添加GridCol类型子组件。 2855 2856**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2857 2858**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2859 2860| 类型 | 说明 | 2861| -------------------------------------------------------- | ------------------------------------------------------------ | 2862| TypedFrameNode<[GridRowInterface](./arkui-ts/ts-container-gridrow.md#接口), [GridRowAttribute](./arkui-ts/ts-container-gridrow.md#属性)> | 提供GridRow类型FrameNode节点。<br/>**说明：**<br/> GridRowInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为GridRow组件的构造函数类型。 <br/> GridRowAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回GridRow组件的属性设置对象。 | 2863 2864### createNode('GridRow')<sup>12+</sup> 2865 2866createNode(context: UIContext, nodeType: 'GridRow'): GridRow 2867 2868创建GridRow类型的FrameNode节点。 2869 2870**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2871 2872**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2873 2874**参数：** 2875 2876| 参数名 | 类型 | 必填 | 说明 | 2877| ------------------ | ------------------ | ------------------- | ------------------- | 2878| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2879| nodeType | 'GridRow' | 是 | 创建GridRow类型的FrameNode节点。 | 2880 2881**返回值：** 2882 2883| 类型 | 说明 | 2884| ------------------ | ------------------ | 2885| [GridRow](#gridrow12) | GridRow类型的FrameNode节点。 | 2886 2887**示例：** 2888 2889```ts 2890import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 2891 2892class MyGridRowController extends NodeController { 2893 makeNode(uiContext: UIContext): FrameNode | null { 2894 let node = new FrameNode(uiContext) 2895 node.commonAttribute 2896 let gridRow = typeNode.createNode(uiContext, 'GridRow') 2897 gridRow.initialize({ columns: 12 }) 2898 .width('50%') 2899 .height('50%') 2900 .backgroundColor(Color.Gray) 2901 node.appendChild(gridRow) 2902 let gridCol = typeNode.createNode(uiContext, 'GridCol') 2903 gridCol.initialize({ span: 2, offset: 4 }) 2904 .height("100%") 2905 .backgroundColor(Color.Red) 2906 gridRow.appendChild(gridCol) 2907 return node; 2908 } 2909} 2910 2911@Entry 2912@Component 2913struct FrameNodeTypeTest { 2914 private myGridRowController: MyGridRowController = new MyGridRowController(); 2915 2916 build() { 2917 Column({ space: 5 }) { 2918 Text('GridRowSample') 2919 NodeContainer(this.myGridRowController); 2920 }.width('100%') 2921 } 2922} 2923``` 2924 2925### GridCol<sup>12+</sup> 2926 2927type GridCol = TypedFrameNode<GridColInterface, GridColAttribute> 2928 2929GridCol类型的FrameNode节点类型。不允许添加子组件。 2930 2931**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2932 2933**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2934 2935| 类型 | 说明 | 2936| -------------------------------------------------------- | ------------------------------------------------------------ | 2937| TypedFrameNode<[GridColInterface](./arkui-ts/ts-container-gridcol.md#接口), [GridColAttribute](./arkui-ts/ts-container-gridcol.md#属性)> | 提供GridCol类型FrameNode节点。<br/>**说明：**<br/> GridColInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为GridCol组件的构造函数类型。 <br/> GridColAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回GridCol组件的属性设置对象。 | 2938 2939### createNode('GridCol')<sup>12+</sup> 2940 2941createNode(context: UIContext, nodeType: 'GridCol'): GridCol 2942 2943创建GridCol类型的FrameNode节点。 2944 2945**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2946 2947**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2948 2949**参数：** 2950 2951| 参数名 | 类型 | 必填 | 说明 | 2952| ------------------ | ------------------ | ------------------- | ------------------- | 2953| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 2954| nodeType | 'GridCol' | 是 | 创建GridCol类型的FrameNode节点。 | 2955 2956**返回值：** 2957 2958| 类型 | 说明 | 2959| ------------------ | ------------------ | 2960| [GridCol](#gridcol12) | GridCol类型的FrameNode节点。 | 2961 2962**示例：** 2963 2964```ts 2965import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 2966 2967class MyGridRowController extends NodeController { 2968 makeNode(uiContext: UIContext): FrameNode | null { 2969 let node = new FrameNode(uiContext) 2970 node.commonAttribute 2971 let gridRow = typeNode.createNode(uiContext, 'GridRow') 2972 gridRow.initialize({ columns: 12 }) 2973 .width('50%') 2974 .height('50%') 2975 .backgroundColor(Color.Gray) 2976 node.appendChild(gridRow) 2977 let gridCol = typeNode.createNode(uiContext, 'GridCol') 2978 gridCol.initialize({ span: 2, offset: 4 }) 2979 .height("100%") 2980 .backgroundColor(Color.Red) 2981 gridRow.appendChild(gridCol) 2982 return node; 2983 } 2984} 2985 2986@Entry 2987@Component 2988struct FrameNodeTypeTest { 2989 private myGridRowController: MyGridRowController = new MyGridRowController(); 2990 2991 build() { 2992 Column({ space: 5 }) { 2993 Text('GridColSample') 2994 NodeContainer(this.myGridRowController); 2995 }.width('100%') 2996 } 2997} 2998``` 2999 3000### Flex<sup>12+</sup> 3001 3002type Flex = TypedFrameNode<FlexInterface, FlexAttribute> 3003 3004Flex类型的FrameNode节点类型。 3005 3006**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3007 3008**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3009 3010| 类型 | 说明 | 3011| -------------------------------------------------- | ------------------------------------------------------------ | 3012| TypedFrameNode<[FlexInterface](./arkui-ts/ts-container-flex.md#接口), [FlexAttribute](./arkui-ts/ts-container-flex.md#属性)> | 提供Flex类型FrameNode节点。<br/>**说明：**<br/> FlexInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Flex组件的构造函数类型。 <br/> FlexAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Flex组件的属性设置对象。 | 3013 3014### createNode('Flex')<sup>12+</sup> 3015 3016createNode(context: UIContext, nodeType: 'Flex'): Flex 3017 3018创建Flex类型的FrameNode节点。 3019 3020**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3021 3022**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3023 3024**参数：** 3025 3026| 参数名 | 类型 | 必填 | 说明 | 3027| ------------------ | ------------------ | ------------------- | ------------------- | 3028| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 3029| nodeType | 'Flex' | 是 | 创建Flex类型的FrameNode节点。 | 3030 3031**返回值：** 3032 3033| 类型 | 说明 | 3034| ------------------ | ------------------ | 3035| [Flex](#flex12) | Flex类型的FrameNode节点。 | 3036 3037**示例：** 3038 3039```ts 3040import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 3041 3042class MyFlexController extends NodeController { 3043 makeNode(uiContext: UIContext): FrameNode | null { 3044 let node = new FrameNode(uiContext) 3045 node.commonAttribute 3046 let flex = typeNode.createNode(uiContext, 'Flex') 3047 flex.initialize() 3048 .width('50%') 3049 .height('50%') 3050 .backgroundColor(Color.Gray) 3051 node.appendChild(flex) 3052 return node; 3053 } 3054} 3055 3056@Entry 3057@Component 3058struct FrameNodeTypeTest { 3059 private myFlexController: MyFlexController = new MyFlexController(); 3060 3061 build() { 3062 Column({ space: 5 }) { 3063 Text('FlexSample') 3064 NodeContainer(this.myFlexController); 3065 }.width('100%') 3066 } 3067} 3068``` 3069 3070### getAttribute('Flex')<sup>20+</sup> 3071 3072getAttribute(node: FrameNode, nodeType: 'Flex'): FlexAttribute | undefined 3073 3074获取Flex节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 3075 3076**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 3077 3078**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3079 3080**参数：** 3081 3082| 参数名 | 类型 | 必填 | 说明 | 3083| ------------------ | ------------------ | ------------------- | ------------------- | 3084| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 3085| nodeType | 'Flex' | 是 | 获取Flex节点类型的属性。 | 3086 3087**返回值：** 3088 3089| 类型 | 说明 | 3090| ------------------ | ------------------ | 3091| FlexAttribute \| undefined | Flex节点类型的属性，若获取失败，则返回undefined。 | 3092 3093**示例：** 3094 3095```ts 3096import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 3097 3098class MyNodeController extends NodeController { 3099 makeNode(uiContext: UIContext): FrameNode | null { 3100 let node = new FrameNode(uiContext); 3101 node.commonAttribute; 3102 let col = typeNode.createNode(uiContext, 'Column'); 3103 col.initialize({ space: 5 }); 3104 node.appendChild(col); 3105 // 创建Flex 3106 let flex1 = typeNode.createNode(uiContext, 'Flex'); 3107 flex1.initialize().width("50%").height("20%").backgroundColor(Color.Pink); 3108 // 获取Flex的属性 3109 typeNode.getAttribute(flex1, 'Flex')?.backgroundColor(Color.Blue).width("100%") 3110 col.appendChild(flex1); 3111 // 创建另一个Flex用于对比 3112 let flex2 = typeNode.createNode(uiContext, 'Flex'); 3113 flex2.initialize().width("50%").height("20%").backgroundColor(Color.Pink); 3114 col.appendChild(flex2); 3115 return node; 3116 } 3117} 3118 3119@Entry 3120@Component 3121struct FrameNodeTypeTest { 3122 private myNodeController: MyNodeController = new MyNodeController(); 3123 3124 build() { 3125 Column({ space: 5 }) { 3126 Text('Flex sample'); 3127 NodeContainer(this.myNodeController); 3128 } 3129 } 3130} 3131``` 3132 3133### Swiper<sup>12+</sup> 3134 3135type Swiper = TypedFrameNode<SwiperInterface, SwiperAttribute> 3136 3137Swiper类型的FrameNode节点类型。 3138 3139**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3140 3141**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3142 3143| 类型 | 说明 | 3144| ------------------------------------------------------ | ------------------------------------------------------------ | 3145| TypedFrameNode<[SwiperInterface](./arkui-ts/ts-container-swiper.md#接口), [SwiperAttribute](./arkui-ts/ts-container-swiper.md#属性)> | 提供Swiper类型FrameNode节点。<br/>**说明：**<br/> SwiperInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Swiper组件的构造函数类型。 <br/> SwiperAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Swiper组件的属性设置对象。 | 3146 3147### createNode('Swiper')<sup>12+</sup> 3148 3149createNode(context: UIContext, nodeType: 'Swiper'): Swiper 3150 3151创建Swiper类型的FrameNode节点。 3152 3153**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3154 3155**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3156 3157**参数：** 3158 3159| 参数名 | 类型 | 必填 | 说明 | 3160| ------------------ | ------------------ | ------------------- | ------------------- | 3161| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 3162| nodeType | 'Swiper' | 是 | 创建Swiper类型的FrameNode节点。 | 3163 3164**返回值：** 3165 3166| 类型 | 说明 | 3167| ------------------ | ------------------ | 3168| [Swiper](#swiper12) | Swiper类型的FrameNode节点。 | 3169 3170**示例：** 3171 3172<!--code_no_check--> 3173 3174```ts 3175import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 3176 3177class MySwiperController extends NodeController { 3178 swiperController: SwiperController = new SwiperController() 3179 3180 makeNode(uiContext: UIContext): FrameNode | null { 3181 let swiperNode = typeNode.createNode(uiContext, 'Swiper') 3182 3183 let text0 = typeNode.createNode(uiContext, 'Text') 3184 text0.initialize("0") 3185 .width('100%') 3186 .height('100%') 3187 .textAlign(TextAlign.Center) 3188 swiperNode.appendChild(text0) 3189 let text1 = typeNode.createNode(uiContext, 'Text') 3190 text1.initialize("1") 3191 .width('100%') 3192 .height('100%') 3193 .textAlign(TextAlign.Center) 3194 swiperNode.appendChild(text1) 3195 swiperNode.commonAttribute.width('100%') 3196 .height('20%') 3197 .backgroundColor(0xAFEEEE) 3198 typeNode.bindController(swiperNode, this.swiperController, 'Swiper') 3199 typeNode.getAttribute(swiperNode, 'Swiper')?.loop(false) 3200 return swiperNode; 3201 3202 } 3203} 3204 3205@Entry 3206@Component 3207struct FrameNodeTypeTest { 3208 private mySwiperController: MySwiperController = new MySwiperController(); 3209 3210 build() { 3211 Column({ space: 5 }) { 3212 Text('SwiperSample') 3213 NodeContainer(this.mySwiperController); 3214 }.width('100%') 3215 } 3216} 3217``` 3218 3219### getAttribute('Swiper')<sup>20+</sup> 3220 3221getAttribute(node: FrameNode, nodeType: 'Swiper'): SwiperAttribute | undefined 3222 3223获取Swiper节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 3224 3225**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 3226 3227**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3228 3229**参数：** 3230 3231| 参数名 | 类型 | 必填 | 说明 | 3232| ------------------ | ------------------ | ------------------- | ------------------- | 3233| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 3234| nodeType | 'Swiper' | 是 | 获取Swiper节点类型的属性。 | 3235 3236**返回值：** 3237 3238| 类型 | 说明 | 3239| ------------------ | ------------------ | 3240| SwiperAttribute \| undefined | Swiper节点类型的属性，若获取失败，则返回undefined。 | 3241 3242**示例：** 3243 3244请参考[createNode('Swiper')<sup>12+</sup>示例](#createnodeswiper12)。 3245 3246### bindController('Swiper')<sup>20+</sup> 3247 3248bindController(node: FrameNode, controller: SwiperController, nodeType: 'Swiper'): void 3249 3250将控制器SwiperController绑定到Swiper节点。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则抛出异常。该接口不支持声明式方式创建的节点。 3251 3252**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 3253 3254**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3255 3256**参数：** 3257 3258| 参数名 | 类型 | 必填 | 说明 | 3259| ------------------ | ------------------ | ------------------- | ------------------- | 3260| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 绑定控制器的目标节点。 | 3261| controller | [SwiperController](arkui-ts/ts-container-swiper.md#swipercontroller) | 是 | Swiper容器组件的控制器。 | 3262| nodeType | 'Swiper' | 是 | 绑定控制器的目标节点的节点类型为Swiper。 | 3263 3264**错误码：** 3265 3266以下错误码的详细介绍请参见[自定义节点错误码](./errorcode-node.md)。 3267 3268| 错误码ID | 错误信息 | 3269| -------- | -------------------------------- | 3270| 100023 | Parameter error. Possible causes: 1. The component type of the node is incorrect. 2. The node is null or undefined. 3. The controller is null or undefined. | 3271| 100021 | The FrameNode is not modifiable. | 3272 3273**示例：** 3274 3275请参考[createNode('Swiper')<sup>12+</sup>示例](#createnodeswiper12)。 3276 3277### Progress<sup>12+</sup> 3278 3279type Progress = TypedFrameNode<ProgressInterface, ProgressAttribute> 3280 3281Progress类型的FrameNode节点类型。不允许添加子组件。 3282 3283**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3284 3285**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3286 3287| 类型 | 说明 | 3288| ---------------------------------------------------------- | ------------------------------------------------------------ | 3289| TypedFrameNode<[ProgressInterface](./arkui-ts/ts-basic-components-progress.md#接口), [ProgressAttribute](./arkui-ts/ts-basic-components-progress.md#属性)> | 提供Progress类型FrameNode节点。<br/>**说明：**<br/> ProgressInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Progress组件的构造函数类型。 <br/> ProgressAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Progress组件的属性设置对象。 | 3290 3291### createNode('Progress')<sup>12+</sup> 3292 3293createNode(context: UIContext, nodeType: 'Progress'): Progress 3294 3295创建Progress类型的FrameNode节点。 3296 3297**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3298 3299**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3300 3301**参数：** 3302 3303| 参数名 | 类型 | 必填 | 说明 | 3304| ------------------ | ------------------ | ------------------- | ------------------- | 3305| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 3306| nodeType | 'Progress' | 是 | 创建Progress类型的FrameNode节点。 | 3307 3308**返回值：** 3309 3310| 类型 | 说明 | 3311| ------------------ | ------------------ | 3312| [Progress](#progress12) | Progress类型的FrameNode节点。 | 3313 3314**示例：** 3315 3316```ts 3317import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 3318 3319class MyProgressNodeController extends NodeController { 3320 public uiContext: UIContext | null = null; 3321 public rootNode: FrameNode | null = null; 3322 3323 makeNode(uiContext: UIContext): FrameNode | null { 3324 this.uiContext = uiContext; 3325 this.rootNode = new FrameNode(uiContext); 3326 let node = typeNode.createNode(uiContext, 'Progress'); 3327 node.initialize({ 3328 value: 15, 3329 total: 200, 3330 type: ProgressType.ScaleRing 3331 }).width(100) 3332 .height(100) 3333 this!.rootNode!.appendChild(node); 3334 return this.rootNode; 3335 } 3336} 3337 3338@Entry 3339@Component 3340struct Sample { 3341 build() { 3342 Column({ space: 10 }) { 3343 NodeContainer(new MyProgressNodeController()).margin(5) 3344 }.width('100%').height('100%') 3345 3346 } 3347} 3348``` 3349 3350### getAttribute('Progress')<sup>20+</sup> 3351 3352getAttribute(node: FrameNode, nodeType: 'Progress'): ProgressAttribute | undefined 3353 3354获取Progress节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 3355 3356**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 3357 3358**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3359 3360**参数：** 3361 3362| 参数名 | 类型 | 必填 | 说明 | 3363| ------------------ | ------------------ | ------------------- | ------------------- | 3364| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 3365| nodeType | 'Progress' | 是 | 获取Progress节点类型的属性。 | 3366 3367**返回值：** 3368 3369| 类型 | 说明 | 3370| ------------------ | ------------------ | 3371| ProgressAttribute \| undefined | Progress节点类型的属性，若获取失败，则返回undefined。 | 3372 3373**示例：** 3374 3375```ts 3376import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 3377 3378class MyProgressNodeController extends NodeController { 3379 public uiContext: UIContext | null = null; 3380 public rootNode: FrameNode | null = null; 3381 3382 makeNode(uiContext: UIContext): FrameNode | null { 3383 this.uiContext = uiContext; 3384 this.rootNode = new FrameNode(uiContext); 3385 let node = typeNode.createNode(uiContext, 'Progress'); 3386 node.initialize({ 3387 value: 15, 3388 total: 200, 3389 type: ProgressType.ScaleRing 3390 }).width(100) 3391 .height(100) 3392 // 获取Progress的属性 3393 typeNode.getAttribute(node, 'Progress'); 3394 this!.rootNode!.appendChild(node); 3395 return this.rootNode; 3396 } 3397} 3398 3399@Entry 3400@Component 3401struct Sample { 3402 build() { 3403 Column({ space: 10 }) { 3404 NodeContainer(new MyProgressNodeController()).margin(5) 3405 }.width('100%').height('100%') 3406 3407 } 3408} 3409``` 3410 3411### Scroll<sup>12+</sup> 3412 3413type Scroll = TypedFrameNode<ScrollInterface, ScrollAttribute> 3414 3415Scroll类型的FrameNode节点类型。允许添加一个子组件。 3416 3417**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3418 3419**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3420 3421| 类型 | 说明 | 3422| ------------------------------------------------------ | ------------------------------------------------------------ | 3423| TypedFrameNode<[ScrollInterface](./arkui-ts/ts-container-scroll.md#接口), [ScrollAttribute](./arkui-ts/ts-container-scroll.md)> | 提供Scroll类型FrameNode节点。<br/>**说明：**<br/> ScrollInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Scroll组件的构造函数类型。 <br/> ScrollAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Scroll组件的属性设置对象。 | 3424 3425### createNode('Scroll')<sup>12+</sup> 3426 3427createNode(context: UIContext, nodeType: 'Scroll'): Scroll 3428 3429创建Scroll类型的FrameNode节点。 3430 3431**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3432 3433**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3434 3435**参数：** 3436 3437| 参数名 | 类型 | 必填 | 说明 | 3438| ------------------ | ------------------ | ------------------- | ------------------- | 3439| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 3440| nodeType | 'Scroll' | 是 | 创建Scroll类型的FrameNode节点。 | 3441 3442**返回值：** 3443 3444| 类型 | 说明 | 3445| ------------------ | ------------------ | 3446| [Scroll](#scroll12) | Scroll类型的FrameNode节点。 | 3447 3448**示例：** 3449 3450```ts 3451import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 3452 3453class MyScrollController extends NodeController { 3454 public rootNode: FrameNode | null = null; 3455 3456 makeNode(uiContext: UIContext): FrameNode | null { 3457 this.rootNode = new FrameNode(uiContext); 3458 3459 let scroller: Scroller = new Scroller(); 3460 //创建Scroll并设置属性 3461 let scrollNode = typeNode.createNode(uiContext, 'Scroll'); 3462 scrollNode.initialize(scroller).size({ width: '100%', height: 500 }); 3463 typeNode.getAttribute(scrollNode, "Scroll")?.friction(0.6); 3464 3465 let colNode = typeNode.createNode(uiContext, 'Column'); 3466 scrollNode.appendChild(colNode); 3467 3468 for (let i = 0; i < 10; i++) { 3469 let text = typeNode.createNode(uiContext, 'Text'); 3470 text.initialize('item' + i) 3471 .size({ width: '90%', height: 100 }) 3472 .textAlign(TextAlign.Center) 3473 .backgroundColor(0xF9CF93); 3474 colNode.appendChild(text); 3475 } 3476 3477 this!.rootNode!.appendChild(scrollNode); 3478 return this.rootNode; 3479 } 3480} 3481 3482@Entry 3483@Component 3484struct FrameNodeTypeTest { 3485 private myScrollController: MyScrollController = new MyScrollController(); 3486 3487 build() { 3488 Column({ space: 5 }) { 3489 Text('ScrollSample') 3490 NodeContainer(this.myScrollController) 3491 3492 }.width('100%') 3493 } 3494} 3495``` 3496 3497### getAttribute('Scroll')<sup>15+</sup> 3498 3499getAttribute(node: FrameNode, nodeType: 'Scroll'): ScrollAttribute | undefined 3500 3501获取Scroll节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 3502 3503**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 3504 3505**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3506 3507**参数：** 3508 3509| 参数名 | 类型 | 必填 | 说明 | 3510| ------------------ | ------------------ | ------------------- | ------------------- | 3511| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 3512| nodeType | 'Scroll' | 是 | 获取Scroll节点类型的属性。 | 3513 3514**返回值：** 3515 3516| 类型 | 说明 | 3517| ------------------ | ------------------ | 3518| ScrollAttribute \| undefined | Scroll节点类型的属性，若获取失败，则返回undefined。 | 3519 3520**示例：** 3521 3522完整示例请参考[createNode('Scroll')](#createnodescroll12)的示例。 3523 3524### getEvent('Scroll')<sup>19+</sup> 3525 3526getEvent(node: FrameNode, nodeType: 'Scroll'): UIScrollEvent | undefined 3527 3528获取Scroll节点中持有的UIScrollEvent对象，用于设置滚动事件。设置的滚动事件与声明式定义的事件平行；设置的滚动事件不覆盖原有的声明式事件。同时设置两个事件回调的时候，优先回调声明式事件。 3529 3530**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 3531 3532**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3533 3534**参数：** 3535 3536| 参数名 | 类型 | 必填 | 说明 | 3537| ------------------ | ------------------ | ------------------- | ------------------- | 3538| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取事件时所需的目标节点。 | 3539| nodeType | 'Scroll' | 是 | 获取Scroll节点类型的滚动事件。 | 3540 3541**返回值：** 3542 3543| 类型 | 说明 | 3544| ------------------ | ------------------ | 3545| [UIScrollEvent](./arkui-ts/ts-container-scroll.md#uiscrollevent19) \| undefined | Scroll节点类型的滚动事件，若获取失败，则返回undefined。 | 3546 3547**示例：** 3548 3549完整示例请参考[滚动事件示例](#滚动事件示例)。 3550 3551### bindController('Scroll')<sup>15+</sup> 3552 3553bindController(node: FrameNode, controller: Scroller, nodeType: 'Scroll'): void 3554 3555将滚动控制器Scroller绑定到Scroll节点。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则抛出异常。该接口不支持声明式方式创建的节点。 3556 3557**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 3558 3559**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3560 3561**参数：** 3562 3563| 参数名 | 类型 | 必填 | 说明 | 3564| ------------------ | ------------------ | ------------------- | ------------------- | 3565| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 绑定滚动控制器的目标节点。 | 3566| controller | [Scroller](arkui-ts/ts-container-scroll.md#scroller) | 是 | 滚动控制器。 | 3567| nodeType | 'Scroll' | 是 | 绑定滚动控制器的目标节点的节点类型为Scroll。 | 3568 3569**错误码：** 3570 3571| 错误码ID | 错误信息 | 3572| -------- | -------------------------------- | 3573| 401 | Parameter error. Possible causes: 1. the type of the node is error. 2. the node is null or undefined. | 3574| 100021 | The FrameNode is not modifiable. | 3575 3576**示例：** 3577 3578<!--code_no_check--> 3579 3580```ts 3581typeNode.bindController(node, scroller, 'Scroll'); 3582``` 3583 3584### RelativeContainer<sup>12+</sup> 3585 3586type RelativeContainer = TypedFrameNode<RelativeContainerInterface, RelativeContainerAttribute> 3587 3588RelativeContainer类型的FrameNode节点类型。 3589 3590**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3591 3592**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3593 3594| 类型 | 说明 | 3595| ------------------------------------------------------------ | ------------------------------------------------------------ | 3596| TypedFrameNode<[RelativeContainerInterface](./arkui-ts/ts-container-relativecontainer.md#接口), [RelativeContainerAttribute](./arkui-ts/ts-container-relativecontainer.md#属性)> | 提供RelativeContainer类型FrameNode节点。<br/>**说明：**<br/> RelativeContainerInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为RelativeContainer组件的构造函数类型。 <br/> RelativeContainerAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回RelativeContainer组件的属性设置对象。 | 3597 3598### createNode('RelativeContainer')<sup>12+</sup> 3599 3600createNode(context: UIContext, nodeType: 'RelativeContainer'): RelativeContainer 3601 3602创建RelativeContainer类型的FrameNode节点。 3603 3604**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3605 3606**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3607 3608**参数：** 3609 3610| 参数名 | 类型 | 必填 | 说明 | 3611| ------------------ | ------------------ | ------------------- | ------------------- | 3612| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 3613| nodeType | 'RelativeContainer' | 是 | 创建RelativeContainer类型的FrameNode节点。 | 3614 3615**返回值：** 3616 3617| 类型 | 说明 | 3618| ------------------ | ------------------ | 3619| [RelativeContainer](#relativecontainer12) | RelativeContainer类型的FrameNode节点。 | 3620 3621**示例：** 3622 3623```ts 3624import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 3625 3626class MyRelativeController extends NodeController { 3627 makeNode(uiContext: UIContext): FrameNode | null { 3628 let node = new FrameNode(uiContext) 3629 node.commonAttribute 3630 let relative = typeNode.createNode(uiContext, 'RelativeContainer') 3631 relative.initialize() 3632 .width('50%') 3633 .height('50%') 3634 .backgroundColor(Color.Gray) 3635 node.appendChild(relative) 3636 return node; 3637 } 3638} 3639 3640@Entry 3641@Component 3642struct FrameNodeTypeTest { 3643 private myRelativeController: MyRelativeController = new MyRelativeController(); 3644 3645 build() { 3646 Column({ space: 5 }) { 3647 Text('RelativeContainerSample') 3648 NodeContainer(this.myRelativeController); 3649 }.width('100%') 3650 } 3651} 3652``` 3653 3654### getAttribute('RelativeContainer')<sup>20+</sup> 3655 3656getAttribute(node: FrameNode, nodeType: 'RelativeContainer'): RelativeContainerAttribute | undefined 3657 3658获取RelativeContainer节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 3659 3660**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 3661 3662**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3663 3664**参数：** 3665 3666| 参数名 | 类型 | 必填 | 说明 | 3667| ------------------ | ------------------ | ------------------- | ------------------- | 3668| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 3669| nodeType | 'RelativeContainer' | 是 | 获取RelativeContainer节点类型的属性。 | 3670 3671**返回值：** 3672 3673| 类型 | 说明 | 3674| ------------------ | ------------------ | 3675| RelativeContainerAttribute \| undefined | RelativeContainer节点类型的属性，若获取失败，则返回undefined。 | 3676 3677**示例：** 3678 3679```ts 3680import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 3681 3682class MyNodeController extends NodeController { 3683 makeNode(uiContext: UIContext): FrameNode | null { 3684 let node = new FrameNode(uiContext); 3685 node.commonAttribute; 3686 let col = typeNode.createNode(uiContext, 'Column'); 3687 col.initialize({ space: 5 }); 3688 node.appendChild(col); 3689 // 创建RelativeContainer 3690 let relative1 = typeNode.createNode(uiContext, 'RelativeContainer'); 3691 relative1.initialize().width("50%").height("20%").backgroundColor(Color.Pink); 3692 // 获取RelativeContainer的属性 3693 typeNode.getAttribute(relative1, 'RelativeContainer')?.backgroundColor(Color.Blue).width("100%") 3694 col.appendChild(relative1); 3695 // 创建另一个RelativeContainer用于对比 3696 let relative2 = typeNode.createNode(uiContext, 'RelativeContainer'); 3697 relative2.initialize().width("50%").height("20%").backgroundColor(Color.Pink); 3698 col.appendChild(relative2); 3699 return node; 3700 } 3701} 3702 3703@Entry 3704@Component 3705struct FrameNodeTypeTest { 3706 private myNodeController: MyNodeController = new MyNodeController(); 3707 3708 build() { 3709 Column({ space: 5 }) { 3710 Text('RelativeContainer sample'); 3711 NodeContainer(this.myNodeController); 3712 } 3713 } 3714} 3715``` 3716 3717### Divider<sup>12+</sup> 3718 3719type Divider = TypedFrameNode<DividerInterface, DividerAttribute> 3720 3721Divider类型的FrameNode节点类型。不允许添加子组件。 3722 3723**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3724 3725**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3726 3727| 类型 | 说明 | 3728| -------------------------------------------------------- | ------------------------------------------------------------ | 3729| TypedFrameNode<[DividerInterface](./arkui-ts/ts-basic-components-divider.md#接口), [DividerAttribute](./arkui-ts/ts-basic-components-divider.md#属性)> | 提供Divider类型FrameNode节点。<br/>**说明：**<br/> DividerInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为RelativeContainer组件的构造函数类型。 <br/> DividerAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Divider组件的属性设置对象。 | 3730 3731### createNode('Divider')<sup>12+</sup> 3732 3733createNode(context: UIContext, nodeType: 'Divider'): Divider 3734 3735创建Divider类型的FrameNode节点。 3736 3737**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3738 3739**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3740 3741**参数：** 3742 3743| 参数名 | 类型 | 必填 | 说明 | 3744| ------------------ | ------------------ | ------------------- | ------------------- | 3745| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 3746| nodeType | 'Divider' | 是 | 创建Divider类型的FrameNode节点。 | 3747 3748**返回值：** 3749 3750| 类型 | 说明 | 3751| ------------------ | ------------------ | 3752| [Divider](#divider12) | Divider类型的FrameNode节点。 | 3753 3754**示例：** 3755 3756```ts 3757import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 3758 3759class MyDividerController extends NodeController { 3760 makeNode(uiContext: UIContext): FrameNode | null { 3761 let node = new FrameNode(uiContext) 3762 node.commonAttribute 3763 let col = typeNode.createNode(uiContext, 'Column') 3764 col.initialize({ space: 5 }) 3765 .width('100%') 3766 .height('100%') 3767 node.appendChild(col) 3768 let divider = typeNode.createNode(uiContext, 'Divider') 3769 divider.initialize() 3770 .strokeWidth(1) 3771 col.appendChild(divider) 3772 3773 return node; 3774 } 3775} 3776 3777@Entry 3778@Component 3779struct FrameNodeTypeTest { 3780 private myDividerController: MyDividerController = new MyDividerController(); 3781 3782 build() { 3783 Column({ space: 5 }) { 3784 Text('DividerSample') 3785 NodeContainer(this.myDividerController); 3786 3787 }.width('100%') 3788 } 3789} 3790``` 3791 3792### LoadingProgress<sup>12+</sup> 3793 3794type LoadingProgress = TypedFrameNode<LoadingProgressInterface, LoadingProgressAttribute> 3795 3796LoadingProgress类型的FrameNode节点类型。不允许添加子组件。 3797 3798**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3799 3800**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3801 3802| 类型 | 说明 | 3803| ------------------------------------------------------------ | ------------------------------------------------------------ | 3804| TypedFrameNode<[LoadingProgressInterface](./arkui-ts/ts-basic-components-loadingprogress.md#接口), [LoadingProgressAttribute](./arkui-ts/ts-basic-components-loadingprogress.md#属性)> | 提供LoadingProgress类型FrameNode节点。<br/>**说明：**<br/> LoadingProgressInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为LoadingProgress组件的构造函数类型。 <br/> LoadingProgressAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回LoadingProgress组件的属性设置对象。 | 3805 3806### createNode('LoadingProgress')<sup>12+</sup> 3807 3808createNode(context: UIContext, nodeType: 'LoadingProgress'): LoadingProgress 3809 3810创建LoadingProgress类型的FrameNode节点。 3811 3812**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3813 3814**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3815 3816**参数：** 3817 3818| 参数名 | 类型 | 必填 | 说明 | 3819| ------------------ | ------------------ | ------------------- | ------------------- | 3820| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 3821| nodeType | 'LoadingProgress' | 是 | 创建LoadingProgress类型的FrameNode节点。 | 3822 3823**返回值：** 3824 3825| 类型 | 说明 | 3826| ------------------ | ------------------ | 3827| [LoadingProgress](#loadingprogress12) | LoadingProgress类型的FrameNode节点。 | 3828 3829**示例：** 3830 3831```ts 3832import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 3833 3834class MyLoadingProgressNodeController extends NodeController { 3835 public uiContext: UIContext | null = null; 3836 public rootNode: FrameNode | null = null; 3837 3838 makeNode(uiContext: UIContext): FrameNode | null { 3839 this.uiContext = uiContext; 3840 this.rootNode = new FrameNode(uiContext); 3841 let node = typeNode.createNode(uiContext, 'LoadingProgress'); 3842 node.initialize() 3843 .width(100) 3844 .height(100) 3845 .color(Color.Red) 3846 .enableLoading(true) 3847 this!.rootNode!.appendChild(node); 3848 return this.rootNode; 3849 } 3850} 3851 3852@Entry 3853@Component 3854struct Sample { 3855 build() { 3856 Column({ space: 10 }) { 3857 NodeContainer(new MyLoadingProgressNodeController()).margin(5) 3858 }.width('100%').height('100%') 3859 } 3860} 3861``` 3862 3863### getAttribute('LoadingProgress')<sup>20+</sup> 3864 3865getAttribute(node: FrameNode, nodeType: 'LoadingProgress'): LoadingProgressAttribute | undefined 3866 3867获取LoadingProgress节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 3868 3869**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 3870 3871**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3872 3873**参数：** 3874 3875| 参数名 | 类型 | 必填 | 说明 | 3876| ------------------ | ------------------ | ------------------- | ------------------- | 3877| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 3878| nodeType | 'LoadingProgress' | 是 | 获取LoadingProgress节点类型的属性。 | 3879 3880**返回值：** 3881 3882| 类型 | 说明 | 3883| ------------------ | ------------------ | 3884| LoadingProgressAttribute \| undefined | LoadingProgress节点类型的属性，若获取失败，则返回undefined。 | 3885 3886**示例：** 3887 3888```ts 3889import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 3890 3891class MyLoadingProgressNodeController extends NodeController { 3892 public uiContext: UIContext | null = null; 3893 public rootNode: FrameNode | null = null; 3894 3895 makeNode(uiContext: UIContext): FrameNode | null { 3896 this.uiContext = uiContext; 3897 this.rootNode = new FrameNode(uiContext); 3898 let node = typeNode.createNode(uiContext, 'LoadingProgress'); 3899 node.initialize() 3900 .width(100) 3901 .height(100) 3902 .color(Color.Red) 3903 .enableLoading(true) 3904 // 获取LoadingProgress的属性 3905 typeNode.getAttribute(node, 'LoadingProgress'); 3906 this!.rootNode!.appendChild(node); 3907 return this.rootNode; 3908 } 3909} 3910 3911@Entry 3912@Component 3913struct Sample { 3914 build() { 3915 Column({ space: 10 }) { 3916 NodeContainer(new MyLoadingProgressNodeController()).margin(5) 3917 }.width('100%').height('100%') 3918 } 3919} 3920``` 3921 3922### Search<sup>12+</sup> 3923 3924type Search = TypedFrameNode<SearchInterface, SearchAttribute> 3925 3926Search类型的FrameNode节点类型。 3927 3928**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3929 3930**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3931 3932| 类型 | 说明 | 3933| ------------------------------------------------------ | ------------------------------------------------------------ | 3934| TypedFrameNode<[SearchInterface](./arkui-ts/ts-basic-components-search.md#接口), [SearchAttribute](./arkui-ts/ts-basic-components-search.md#属性)> | 提供Search类型FrameNode节点。<br/>**说明：**<br/> SearchInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Search组件的构造函数类型。 <br/> SearchAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Search组件的属性设置对象。 | 3935 3936### createNode('Search')<sup>12+</sup> 3937 3938createNode(context: UIContext, nodeType: 'Search'): Search 3939 3940创建Search类型的FrameNode节点。 3941 3942**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3943 3944**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3945 3946**参数：** 3947 3948| 参数名 | 类型 | 必填 | 说明 | 3949| ------------------ | ------------------ | ------------------- | ------------------- | 3950| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 3951| nodeType | 'Search' | 是 | 创建Search类型的FrameNode节点。 | 3952 3953**返回值：** 3954 3955| 类型 | 说明 | 3956| ------------------ | ------------------ | 3957| [Search](#search12) | Search类型的FrameNode节点。 | 3958 3959**示例：** 3960 3961```ts 3962iimport { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 3963 3964class MyNodeController extends NodeController { 3965 makeNode(uiContext: UIContext): FrameNode | null { 3966 let node = new FrameNode(uiContext); 3967 node.commonAttribute; 3968 let col = typeNode.createNode(uiContext, 'Column'); 3969 col.initialize({ space: 5 }); 3970 node.appendChild(col); 3971 // 创建Search 3972 let search = typeNode.createNode(uiContext, 'Search'); 3973 search.initialize({ value: "Search" }) 3974 .searchButton('SEARCH') 3975 .textFont({ size: 14, weight: 400 }) 3976 col.appendChild(search); 3977 return node; 3978 } 3979} 3980 3981@Entry 3982@Component 3983struct FrameNodeTypeTest { 3984 private myNodeController: MyNodeController = new MyNodeController(); 3985 3986 build() { 3987 Column({ space: 5 }) { 3988 Text('Search sample'); 3989 NodeContainer(this.myNodeController); 3990 } 3991 } 3992} 3993``` 3994 3995### Blank<sup>12+</sup> 3996 3997type Blank = TypedFrameNode<BlankInterface, BlankAttribute> 3998 3999Blank类型的FrameNode节点类型。不允许添加子组件。 4000 4001**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4002 4003**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4004 4005| 类型 | 说明 | 4006| ---------------------------------------------------- | ------------------------------------------------------------ | 4007| TypedFrameNode<[BlankInterface](./arkui-ts/ts-basic-components-blank.md#接口), [BlankAttribute](./arkui-ts/ts-basic-components-blank.md#属性)> | 提供Blank类型FrameNode节点。<br/>**说明：**<br/> BlankInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Blank组件的构造函数类型。 <br/> BlankAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Blank组件的属性设置对象。 | 4008 4009### createNode('Blank')<sup>12+</sup> 4010createNode(context: UIContext, nodeType: 'Blank'): Blank 4011 4012创建Blank类型的FrameNode节点。 4013 4014**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4015 4016**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4017 4018**参数：** 4019 4020| 参数名 | 类型 | 必填 | 说明 | 4021| ------------------ | ------------------ | ------------------- | ------------------- | 4022| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 4023| nodeType | 'Blank' | 是 | 创建Blank类型的FrameNode节点。 | 4024 4025**返回值：** 4026 4027| 类型 | 说明 | 4028| ------------------ | ------------------ | 4029| [Blank](#blank12) | Blank类型的FrameNode节点。 | 4030 4031**示例：** 4032 4033```ts 4034import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 4035 4036class MyBlankController extends NodeController { 4037 makeNode(uiContext: UIContext): FrameNode | null { 4038 let node = new FrameNode(uiContext) 4039 node.commonAttribute 4040 let col = typeNode.createNode(uiContext, 'Column') 4041 col.initialize({ space: 5 }) 4042 .width('100%') 4043 .height('100%') 4044 node.appendChild(col) 4045 let blank = typeNode.createNode(uiContext, 'Blank') 4046 blank.initialize() 4047 .width('50%') 4048 .height('50%') 4049 .backgroundColor(Color.Blue) 4050 col.appendChild(blank) 4051 4052 return node; 4053 } 4054} 4055 4056@Entry 4057@Component 4058struct FrameNodeTypeTest { 4059 private myBlankController: MyBlankController = new MyBlankController(); 4060 4061 build() { 4062 Column({ space: 5 }) { 4063 Text('BlankSample') 4064 NodeContainer(this.myBlankController); 4065 4066 }.width('100%') 4067 } 4068} 4069``` 4070 4071### Image<sup>12+</sup> 4072 4073type Image = TypedFrameNode<ImageInterface, ImageAttribute> 4074 4075Image类型的FrameNode节点类型。不允许添加子组件。 4076 4077**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4078 4079**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4080 4081| 类型 | 说明 | 4082| ---------------------------------------------------- | ------------------------------------------------------------ | 4083| TypedFrameNode<[ImageInterface](./arkui-ts/ts-basic-components-image.md#接口), [ImageAttribute](./arkui-ts/ts-basic-components-image.md#属性)> | 提供Image类型FrameNode节点。<br/>**说明：**<br/> ImageInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Image组件的构造函数类型。 <br/> ImageAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Image组件的属性设置对象。 | 4084 4085### createNode('Image')<sup>12+</sup> 4086 4087createNode(context: UIContext, nodeType: 'Image'): Image 4088 4089创建Image类型的FrameNode节点。 4090 4091**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4092 4093**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4094 4095**参数：** 4096 4097| 参数名 | 类型 | 必填 | 说明 | 4098| ------------------ | ------------------ | ------------------- | ------------------- | 4099| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 4100| nodeType | 'Image' | 是 | 创建Image类型的节点。 | 4101 4102**返回值：** 4103 4104| 类型 | 说明 | 4105| ------------------ | ------------------ | 4106| [Image](#image12) | Image类型的FrameNode节点。 | 4107 4108**示例：** 4109 4110```ts 4111import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 4112 4113class MyImageController extends NodeController { 4114 public uiContext: UIContext | null = null; 4115 public rootNode: FrameNode | null = null; 4116 4117 makeNode(uiContext: UIContext): FrameNode | null { 4118 this.uiContext = uiContext; 4119 this.rootNode = new FrameNode(uiContext); 4120 let imageNode = typeNode.createNode(uiContext, 'Image'); 4121 imageNode 4122 // $r('app.media.img')需要替换为开发者所需的图像资源文件。 4123 .initialize($r('app.media.img')) 4124 .width(100) 4125 .height(100) 4126 .fillColor(Color.Red) 4127 .objectFit(ImageFit.Contain) 4128 .renderMode(ImageRenderMode.Template) 4129 .fitOriginalSize(true) 4130 .matchTextDirection(true) 4131 .objectRepeat(ImageRepeat.X) 4132 .autoResize(true) 4133 4134 this!.rootNode!.appendChild(imageNode); 4135 return this.rootNode; 4136 4137 } 4138} 4139 4140@Entry 4141@Component 4142struct Sample { 4143 build() { 4144 Column({ space: 10 }) { 4145 NodeContainer(new MyImageController()).margin(5) 4146 }.width('100%').height('100%') 4147 4148 } 4149} 4150``` 4151 4152### getAttribute('Image')<sup>20+</sup> 4153 4154getAttribute(node: FrameNode, nodeType: 'Image'): ImageAttribute | undefined 4155 4156获取Image节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 4157 4158**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 4159 4160**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4161 4162**参数：** 4163 4164| 参数名 | 类型 | 必填 | 说明 | 4165| ------------------ | ------------------ | ------------------- | ------------------- | 4166| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 4167| nodeType | 'Image' | 是 | 获取Image节点类型的属性。 | 4168 4169**返回值：** 4170 4171| 类型 | 说明 | 4172| ------------------ | ------------------ | 4173| ImageAttribute \| undefined | Image节点类型的属性，若获取失败，则返回undefined。 | 4174 4175**示例：** 4176 4177 4178```ts 4179import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 4180 4181class MyImageController extends NodeController { 4182 public uiContext: UIContext | null = null; 4183 public rootNode: FrameNode | null = null; 4184 4185 makeNode(uiContext: UIContext): FrameNode | null { 4186 this.uiContext = uiContext; 4187 this.rootNode = new FrameNode(uiContext); 4188 let imageNode = typeNode.createNode(uiContext, 'Image'); 4189 imageNode 4190 // $r('app.media.img')需要替换为开发者所需的图像资源文件。 4191 .initialize($r('app.media.img')) 4192 .width(100) 4193 .height(100) 4194 .fillColor(Color.Red) 4195 .objectFit(ImageFit.Contain) 4196 .renderMode(ImageRenderMode.Template) 4197 .fitOriginalSize(true) 4198 .matchTextDirection(true) 4199 .objectRepeat(ImageRepeat.X) 4200 .autoResize(true) 4201 // 获取Image的属性 4202 typeNode.getAttribute(imageNode, 'Image'); 4203 this!.rootNode!.appendChild(imageNode); 4204 return this.rootNode; 4205 4206 } 4207} 4208 4209@Entry 4210@Component 4211struct Sample { 4212 build() { 4213 Column({ space: 10 }) { 4214 NodeContainer(new MyImageController()).margin(5) 4215 }.width('100%').height('100%') 4216 4217 } 4218} 4219``` 4220 4221### List<sup>12+</sup> 4222 4223type List = TypedFrameNode<ListInterface, ListAttribute> 4224 4225List类型的FrameNode节点类型。只允许添加ListItem、ListItemGroup类型子组件。 4226 4227**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4228 4229**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4230 4231| 类型 | 说明 | 4232| -------------------------------------------------- | ------------------------------------------------------------ | 4233| TypedFrameNode<[ListInterface](./arkui-ts/ts-container-list.md#接口), [ListAttribute](./arkui-ts/ts-container-list.md#属性)> | 提供List类型FrameNode节点。<br/>**说明：**<br/> ListInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为List组件的构造函数类型。 <br/> ListAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回List组件的属性设置对象。 | 4234 4235### createNode('List')<sup>12+</sup> 4236createNode(context: UIContext, nodeType: 'List'): List 4237 4238创建List类型的FrameNode节点。 4239 4240**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4241 4242**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4243 4244**参数：** 4245 4246| 参数名 | 类型 | 必填 | 说明 | 4247| ------------------ | ------------------ | ------------------- | ------------------- | 4248| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 4249| nodeType | 'List' | 是 | 创建List类型的节点。 | 4250 4251**返回值：** 4252 4253| 类型 | 说明 | 4254| ------------------ | ------------------ | 4255| [List](#list12) | List类型的FrameNode节点。 | 4256 4257**示例：** 4258 4259```ts 4260import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 4261 4262class MyListController extends NodeController { 4263 public rootNode: FrameNode | null = null; 4264 4265 makeNode(uiContext: UIContext): FrameNode | null { 4266 //创建list节点 4267 this.rootNode = new FrameNode(uiContext); 4268 let listNode = typeNode.createNode(uiContext, 'List'); 4269 listNode.initialize({ space: 3 }).size({ width: '100%', height: '100%' }); 4270 typeNode.getAttribute(listNode, "List")?.friction(0.6); 4271 4272 //在list下创建ListItemGroup节点 4273 let listItemGroupNode = typeNode.createNode(uiContext, 'ListItemGroup'); 4274 listItemGroupNode.initialize({ space: 3 }); 4275 listNode.appendChild(listItemGroupNode); 4276 4277 //在ListItemGroup中放入ListItem节点 4278 let listItemNode1 = typeNode.createNode(uiContext, 'ListItem'); 4279 listItemNode1.initialize({ style: ListItemStyle.NONE }).height(100).borderWidth(1).backgroundColor('#FF00FF'); 4280 let text1 = typeNode.createNode(uiContext, 'Text'); 4281 text1.initialize('ListItem1'); 4282 listItemNode1.appendChild(text1); 4283 listItemGroupNode.appendChild(listItemNode1); 4284 4285 let listItemNode2 = typeNode.createNode(uiContext, 'ListItem'); 4286 listItemNode2.initialize({ style: ListItemStyle.CARD }).borderWidth(1).backgroundColor('#FF00FF'); 4287 typeNode.getAttribute(listItemNode2, "ListItem")?.height(100); 4288 let text2 = typeNode.createNode(uiContext, 'Text'); 4289 text2.initialize('ListItem2'); 4290 listItemNode2.appendChild(text2); 4291 listItemGroupNode.appendChild(listItemNode2); 4292 4293 this!.rootNode!.appendChild(listNode); 4294 return this.rootNode; 4295 } 4296} 4297 4298@Entry 4299@Component 4300struct FrameNodeTypeTest { 4301 private myListController: MyListController = new MyListController(); 4302 4303 build() { 4304 Column({ space: 5 }) { 4305 Text('ListSample') 4306 NodeContainer(this.myListController) 4307 4308 }.width('100%') 4309 } 4310} 4311``` 4312 4313### getEvent('List')<sup>19+</sup> 4314 4315getEvent(node: FrameNode, nodeType: 'List'): UIListEvent | undefined 4316 4317获取List节点中持有的UIListEvent对象，用于设置滚动事件。设置的滚动事件与声明式定义的事件平行；设置的滚动事件不覆盖原有的声明式事件。同时设置两个事件回调的时候，优先回调声明式事件。 4318 4319**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 4320 4321**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4322 4323**参数：** 4324 4325| 参数名 | 类型 | 必填 | 说明 | 4326| ------------------ | ------------------ | ------------------- | ------------------- | 4327| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取事件时所需的目标节点。 | 4328| nodeType | 'List' | 是 | 获取List节点类型的滚动事件。 | 4329 4330**返回值：** 4331 4332| 类型 | 说明 | 4333| ------------------ | ------------------ | 4334| [UIListEvent](./arkui-ts/ts-container-list.md#uilistevent19) \| undefined | List节点类型的滚动事件，若获取失败，则返回undefined。 | 4335 4336**示例：** 4337 4338完整示例请参考[滚动事件示例](#滚动事件示例)。 4339 4340### getAttribute('List')<sup>20+</sup> 4341 4342getAttribute(node: FrameNode, nodeType: 'List'): ListAttribute | undefined 4343 4344获取List节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 4345 4346**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 4347 4348**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4349 4350**参数：** 4351 4352| 参数名 | 类型 | 必填 | 说明 | 4353| ------------------ | ------------------ | ------------------- | ------------------- | 4354| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 4355| nodeType | 'List' | 是 | 获取List节点类型的属性。 | 4356 4357**返回值：** 4358 4359| 类型 | 说明 | 4360| ------------------ | ------------------ | 4361| ListAttribute \| undefined | List节点类型的属性，若获取失败，则返回undefined。 | 4362 4363**示例：** 4364 4365完整示例请参考[createNode('List')](#createnodelist12)的示例。 4366 4367### bindController('List')<sup>20+</sup> 4368 4369bindController(node: FrameNode, controller: Scroller, nodeType: 'List'): void 4370 4371将滚动控制器Scroller绑定到List节点。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则抛出异常。该接口不支持声明式方式创建的节点。 4372 4373**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 4374 4375**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4376 4377**参数：** 4378 4379| 参数名 | 类型 | 必填 | 说明 | 4380| ------------------ | ------------------ | ------------------- | ------------------- | 4381| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 绑定滚动控制器的目标节点。 | 4382| controller | [Scroller](arkui-ts/ts-container-scroll.md#scroller) | 是 | 滚动控制器。 | 4383| nodeType | 'List' | 是 | 绑定滚动控制器的目标节点的节点类型为List。 | 4384 4385**错误码：** 4386 4387以下错误码的详细介绍请参见[自定义节点错误码](./errorcode-node.md)。 4388 4389| 错误码ID | 错误信息 | 4390| -------- | -------------------------------- | 4391| 100023 | Parameter error. Possible causes: 1. The component type of the node is incorrect. 2. The node is null or undefined. 3. The controller is null or undefined. | 4392| 100021 | The FrameNode is not modifiable. | 4393 4394**示例：** 4395 4396<!--code_no_check--> 4397 4398```ts 4399typeNode.bindController(node, scroller, 'List'); 4400``` 4401 4402### ListItem<sup>12+</sup> 4403 4404type ListItem = TypedFrameNode<ListItemInterface, ListItemAttribute> 4405 4406ListItem类型的FrameNode节点类型。 4407 4408**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4409 4410**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4411 4412| 类型 | 说明 | 4413| ---------------------------------------------------------- | ------------------------------------------------------------ | 4414| TypedFrameNode<[ListItemInterface](./arkui-ts/ts-container-listitem.md#接口), [ListItemAttribute](./arkui-ts/ts-container-listitem.md#属性)> | 提供ListItem类型FrameNode节点。<br/>**说明：**<br/> ListItemInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为ListItem组件的构造函数类型。 <br/> ListItemAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回ListItem组件的属性设置对象。 | 4415 4416### createNode('ListItem')<sup>12+</sup> 4417createNode(context: UIContext, nodeType: 'ListItem'): ListItem 4418 4419创建ListItem类型的FrameNode节点。 4420 4421**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4422 4423**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4424 4425**参数：** 4426 4427| 参数名 | 类型 | 必填 | 说明 | 4428| ------------------ | ------------------ | ------------------- | ------------------- | 4429| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 4430| nodeType | 'ListItem' | 是 | 创建ListItem类型的节点。 | 4431 4432**返回值：** 4433 4434| 类型 | 说明 | 4435| ------------------ | ------------------ | 4436| [ListItem](#listitem12) | ListItem类型的FrameNode节点。 | 4437 4438**示例：** 4439 4440参考[createNode('List')](#createnodelist12)示例。 4441 4442### getAttribute('ListItem')<sup>20+</sup> 4443 4444getAttribute(node: FrameNode, nodeType: 'ListItem'): ListItemAttribute | undefined 4445 4446获取ListItem节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 4447 4448**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 4449 4450**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4451 4452**参数：** 4453 4454| 参数名 | 类型 | 必填 | 说明 | 4455| ------------------ | ------------------ | ------------------- | ------------------- | 4456| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 4457| nodeType | 'ListItem' | 是 | 获取ListItem节点类型的属性。 | 4458 4459**返回值：** 4460 4461| 类型 | 说明 | 4462| ------------------ | ------------------ | 4463| ListItemAttribute \| undefined | ListItem节点类型的属性，若获取失败，则返回undefined。 | 4464 4465**示例：** 4466 4467完整示例请参考[createNode('List')](#createnodelist12)的示例。 4468 4469### TextInput<sup>12+</sup> 4470type TextInput = TypedFrameNode<TextInputInterface, TextInputAttribute> 4471 4472TextInput类型的FrameNode节点类型。 4473 4474**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4475 4476**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4477 4478| 类型 | 说明 | 4479| ------------------------------------------------------------ | ------------------------------------------------------------ | 4480| TypedFrameNode<[TextInputInterface](./arkui-ts/ts-basic-components-textinput.md#接口), [TextInputAttribute](./arkui-ts/ts-basic-components-textinput.md#属性)> | 提供TextInput类型FrameNode节点。<br/>**说明：**<br/> TextInputInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为TextInput组件的构造函数类型。 <br/> TextInputAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回TextInput组件的属性设置对象。 | 4481 4482### createNode('TextInput')<sup>12+</sup> 4483 4484createNode(context: UIContext, nodeType: 'TextInput'): TextInput 4485 4486创建TextInput类型的FrameNode节点。 4487 4488**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4489 4490**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4491 4492**参数：** 4493 4494| 参数名 | 类型 | 必填 | 说明 | 4495| ------------------ | ------------------ | ------------------- | ------------------- | 4496| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 4497| nodeType | 'TextInput' | 是 | 创建TextInput类型的节点。 | 4498 4499**返回值：** 4500 4501| 类型 | 说明 | 4502| ------------------ | ------------------ | 4503| [TextInput](#textinput12) | TextInput类型的FrameNode节点。 | 4504 4505**示例：** 4506 4507```ts 4508import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 4509 4510class MyNodeController extends NodeController { 4511 makeNode(uiContext: UIContext): FrameNode | null { 4512 let node = new FrameNode(uiContext); 4513 node.commonAttribute; 4514 let col = typeNode.createNode(uiContext, 'Column'); 4515 col.initialize({ space: 5 }); 4516 node.appendChild(col); 4517 // 创建TextInput 4518 let textInput = typeNode.createNode(uiContext, 'TextInput'); 4519 textInput.initialize({ text: "TextInput" }); 4520 col.appendChild(textInput); 4521 return node; 4522 } 4523} 4524 4525@Entry 4526@Component 4527struct FrameNodeTypeTest { 4528 private myNodeController: MyNodeController = new MyNodeController(); 4529 4530 build() { 4531 Column({ space: 5 }) { 4532 Text('TextInput sample') 4533 NodeContainer(this.myNodeController); 4534 } 4535 } 4536} 4537``` 4538 4539### getAttribute('TextInput')<sup>20+</sup> 4540 4541getAttribute(node: FrameNode, nodeType: 'TextInput'): TextInputAttribute | undefined 4542 4543获取TextInput节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 4544 4545**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 4546 4547**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4548 4549**参数：** 4550 4551| 参数名 | 类型 | 必填 | 说明 | 4552| ------------------ | ------------------ | ------------------- | ------------------- | 4553| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 4554| nodeType | 'TextInput' | 是 | 获取TextInput节点类型的属性。 | 4555 4556**返回值：** 4557 4558| 类型 | 说明 | 4559| ------------------ | ------------------ | 4560| TextInputAttribute \| undefined | TextInput节点类型的属性，若获取失败，则返回undefined。 | 4561 4562**示例：** 4563 4564```ts 4565import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 4566 4567class MyNodeController extends NodeController { 4568 makeNode(uiContext: UIContext): FrameNode | null { 4569 let node = new FrameNode(uiContext); 4570 node.commonAttribute; 4571 let col = typeNode.createNode(uiContext, 'Column'); 4572 col.initialize({ space: 5 }); 4573 node.appendChild(col); 4574 // 创建TextInput 4575 let textInput = typeNode.createNode(uiContext, 'TextInput'); 4576 textInput.initialize({ placeholder: 'TextInput placeholderColor' }); 4577 // 获取TextInput的属性 4578 typeNode.getAttribute(textInput, 'TextInput')?.placeholderColor(Color.Red); 4579 col.appendChild(textInput); 4580 return node; 4581 } 4582} 4583 4584@Entry 4585@Component 4586struct FrameNodeTypeTest { 4587 private myNodeController: MyNodeController = new MyNodeController(); 4588 4589 build() { 4590 Column({ space: 5 }) { 4591 Text('TextInput getAttribute sample'); 4592 NodeContainer(this.myNodeController); 4593 } 4594 } 4595} 4596``` 4597 4598### bindController('TextInput')<sup>20+</sup> 4599bindController(node: FrameNode, controller: TextInputController, nodeType: 'TextInput'): void 4600 4601将输入框控制器TextInputController绑定到TextInput节点。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则抛出异常。该接口不支持声明式方式创建的节点。 4602 4603**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 4604 4605**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4606 4607**参数：** 4608 4609| 参数名 | 类型 | 必填 | 说明 | 4610| ------------------ | ------------------ | ------------------- | ------------------- | 4611| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 绑定输入框控制器的目标节点。 | 4612| controller | [TextInputController](arkui-ts/ts-basic-components-textinput.md#textinputcontroller8) | 是 | 输入框控制器。 | 4613| nodeType | 'TextInput' | 是 | 绑定输入框控制器的目标节点的节点类型为TextInput。 | 4614 4615**错误码：** 4616 4617以下错误码的详细介绍请参见[自定义节点错误码](./errorcode-node.md)。 4618 4619| 错误码ID | 错误信息 | 4620| -------- | -------------------------------- | 4621| 100023 | Parameter error. Possible causes: 1. The component type of the node is incorrect. 2. The node is null or undefined. 3. The controller is null or undefined. | 4622| 100021 | The FrameNode is not modifiable. | 4623 4624**示例：** 4625 4626```ts 4627import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 4628 4629class MyNodeController extends NodeController { 4630 makeNode(uiContext: UIContext): FrameNode | null { 4631 let node = new FrameNode(uiContext); 4632 node.commonAttribute; 4633 let col = typeNode.createNode(uiContext, 'Column'); 4634 col.initialize({ space: 5 }); 4635 node.appendChild(col); 4636 // 创建、初始化TextInput，默认获焦 4637 let textInput = typeNode.createNode(uiContext, 'TextInput'); 4638 textInput.initialize({ text: "TextInput" }) 4639 .defaultFocus(true) 4640 col.appendChild(textInput); 4641 // 绑定TextInputController，设置光标位置 4642 let controller: TextInputController = new TextInputController(); 4643 typeNode.bindController(textInput, controller, 'TextInput'); 4644 controller.caretPosition(3); 4645 return node; 4646 } 4647} 4648 4649@Entry 4650@Component 4651struct FrameNodeTypeTest { 4652 private myNodeController: MyNodeController = new MyNodeController(); 4653 4654 build() { 4655 Column({ space: 5 }) { 4656 Text('TextInput bindController sample'); 4657 NodeContainer(this.myNodeController); 4658 } 4659 } 4660} 4661``` 4662 4663### Button<sup>12+</sup> 4664 4665type Button = TypedFrameNode<ButtonInterface, ButtonAttribute> 4666 4667Button类型的FrameNode节点类型。以子组件模式创建允许添加一个子组件。以label模式创建不可以添加子组件。 4668 4669**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4670 4671**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4672 4673| 类型 | 说明 | 4674| ------------------------------------------------------ | ------------------------------------------------------------ | 4675| TypedFrameNode<[ButtonInterface](./arkui-ts/ts-basic-components-button.md#接口), [ButtonAttribute](./arkui-ts/ts-basic-components-button.md#属性)> | 提供Button类型FrameNode节点。<br/>**说明：**<br/> ButtonInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Button组件的构造函数类型。 <br/> ButtonAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Button组件的属性设置对象。<br/> 接口入参label不为空时，以label模式创建Button组件，以此模式创建无法包含子组件,并且不允许再设置子组件，否则会抛出异常。且label模式和子组件模式在第一次initialize创建之后无法在后续的initialize进行动态修改，如需要包含子组件，第一次initialize时不要设置label参数。<br/> 以子组件模式创建时，只能包含一个子组件，不能设置多个子组件，否则会抛出异常。 | 4676 4677### createNode('Button')<sup>12+</sup> 4678 4679createNode(context: UIContext, nodeType: 'Button'): Button 4680 4681创建Button类型的FrameNode节点。 4682 4683**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4684 4685**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4686 4687**参数：** 4688 4689| 参数名 | 类型 | 必填 | 说明 | 4690| ------------------ | ------------------ | ------------------- | ------------------- | 4691| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 4692| nodeType | 'Button' | 是 | 创建Button类型的节点。 | 4693 4694**返回值：** 4695 4696| 类型 | 说明 | 4697| ------------------ | ------------------ | 4698| [Button](#button12) | Button类型的FrameNode节点。 | 4699 4700**示例：** 4701 4702```ts 4703import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 4704 4705class MyButtonController extends NodeController { 4706 makeNode(uiContext: UIContext): FrameNode | null { 4707 let node = new FrameNode(uiContext) 4708 node.commonAttribute 4709 let col = typeNode.createNode(uiContext, 'Column') 4710 col.initialize({ space: 5 }) 4711 .width('100%') 4712 .height('100%') 4713 node.appendChild(col) 4714 let button = typeNode.createNode(uiContext, 'Button') 4715 button.initialize("This is Button") 4716 .onClick(() => { 4717 uiContext.getPromptAction().showToast({ message: "Button clicked" }) 4718 }) 4719 col.appendChild(button) 4720 4721 return node; 4722 } 4723} 4724 4725@Entry 4726@Component 4727struct FrameNodeTypeTest { 4728 private myButtonController: MyButtonController = new MyButtonController(); 4729 4730 build() { 4731 Column({ space: 5 }) { 4732 Text('ButtonSample') 4733 NodeContainer(this.myButtonController); 4734 4735 }.width('100%') 4736 } 4737} 4738``` 4739 4740### getAttribute('Button')<sup>20+</sup> 4741 4742getAttribute(node: FrameNode, nodeType: 'Button'): ButtonAttribute | undefined 4743 4744获取Button节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 4745 4746**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 4747 4748**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4749 4750**参数：** 4751 4752| 参数名 | 类型 | 必填 | 说明 | 4753| ------------------ | ------------------ | ------------------- | ------------------- | 4754| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 4755| nodeType | 'Button' | 是 | 获取Button节点类型的属性。 | 4756 4757**返回值：** 4758 4759| 类型 | 说明 | 4760| ------------------ | ------------------ | 4761| ButtonAttribute \| undefined | Button节点类型的属性，若获取失败，则返回undefined。 | 4762 4763**示例：** 4764 4765```ts 4766import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 4767 4768class MyButtonController extends NodeController { 4769 makeNode(uiContext: UIContext): FrameNode | null { 4770 let node = new FrameNode(uiContext) 4771 node.commonAttribute 4772 let col = typeNode.createNode(uiContext, 'Column') 4773 col.initialize({ space: 5 }) 4774 .width('100%') 4775 .height('100%') 4776 node.appendChild(col) 4777 let button = typeNode.createNode(uiContext, 'Button') 4778 button.initialize("This is Button") 4779 .onClick(() => { 4780 uiContext.getPromptAction().showToast({ message: "Button clicked" }) 4781 }) 4782 typeNode.getAttribute(button,'Button')?.buttonStyle(ButtonStyleMode.TEXTUAL) 4783 col.appendChild(button) 4784 4785 return node; 4786 } 4787} 4788 4789@Entry 4790@Component 4791struct FrameNodeTypeTest { 4792 private myButtonController: MyButtonController = new MyButtonController(); 4793 4794 build() { 4795 Column({ space: 5 }) { 4796 Text('ButtonSample') 4797 NodeContainer(this.myButtonController); 4798 4799 }.width('100%') 4800 } 4801} 4802``` 4803 4804### ListItemGroup<sup>12+</sup> 4805type ListItemGroup = TypedFrameNode<ListItemGroupInterface, ListItemGroupAttribute> 4806 4807ListItemGroup类型的FrameNode节点类型。只允许添加ListItem类型子组件。 4808 4809**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4810 4811**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4812 4813| 类型 | 说明 | 4814| ------------------------------------------------------------ | ------------------------------------------------------------ | 4815| TypedFrameNode<[ListItemGroupInterface](./arkui-ts/ts-container-listitem.md#接口), [ListItemGroupAttribute](./arkui-ts/ts-container-listitem.md#属性)> | 提供ListItemGroup类型FrameNode节点。<br/>**说明：**<br/> ListItemGroupInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为ListItemGroup组件的构造函数类型。 <br/> ListItemGroupAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回ListItemGroup组件的属性设置对象。 | 4816 4817### createNode('ListItemGroup')<sup>12+</sup> 4818 4819createNode(context: UIContext, nodeType: 'ListItemGroup'): ListItemGroup 4820 4821创建ListItemGroup类型的FrameNode节点。 4822 4823**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4824 4825**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4826 4827**参数：** 4828 4829| 参数名 | 类型 | 必填 | 说明 | 4830| ------------------ | ------------------ | ------------------- | ------------------- | 4831| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 4832| nodeType | 'ListItemGroup' | 是 | 创建ListItemGroup类型的节点。 | 4833 4834**返回值：** 4835 4836| 类型 | 说明 | 4837| ------------------ | ------------------ | 4838| [ListItemGroup](#listitemgroup12) | ListItemGroup类型的FrameNode节点。 | 4839 4840**示例：** 4841 4842参考[createNode('List')](#createnodelist12)示例。 4843 4844### getAttribute('ListItemGroup')<sup>20+</sup> 4845 4846getAttribute(node: FrameNode, nodeType: 'ListItemGroup'): ListItemGroupAttribute | undefined 4847 4848获取ListItemGroup节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 4849 4850**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 4851 4852**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4853 4854**参数：** 4855 4856| 参数名 | 类型 | 必填 | 说明 | 4857| ------------------ | ------------------ | ------------------- | ------------------- | 4858| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 4859| nodeType | 'ListItemGroup' | 是 | 获取ListItemGroup节点类型的属性。 | 4860 4861**返回值：** 4862 4863| 类型 | 说明 | 4864| ------------------ | ------------------ | 4865| ListItemGroupAttribute \| undefined | ListItemGroup节点类型的属性，若获取失败，则返回undefined。 | 4866 4867**示例：** 4868 4869<!--code_no_check--> 4870 4871```ts 4872typeNode.getAttribute(node, 'ListItemGroup'); 4873``` 4874 4875### WaterFlow<sup>12+</sup> 4876 4877type WaterFlow = TypedFrameNode<WaterFlowInterface, WaterFlowAttribute> 4878 4879WaterFlow类型的FrameNode节点类型。只允许添加FlowItem类型子组件。 4880 4881**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4882 4883**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4884 4885| 类型 | 说明 | 4886| ------------------------------------------------------------ | ------------------------------------------------------------ | 4887| TypedFrameNode<[WaterFlowInterface](./arkui-ts/ts-container-waterflow.md#接口), [WaterFlowAttribute](./arkui-ts/ts-container-waterflow.md#属性)> | 提供WaterFlow类型FrameNode节点。<br/>**说明：**<br/> WaterFlowInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为WaterFlow组件的构造函数类型。 <br/> WaterFlowAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回WaterFlow组件的属性设置对象。 | 4888 4889### createNode('WaterFlow')<sup>12+</sup> 4890 4891createNode(context: UIContext, nodeType: 'WaterFlow'): WaterFlow 4892 4893创建WaterFlow类型的FrameNode节点。 4894 4895**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 4896 4897**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4898 4899**参数：** 4900 4901| 参数名 | 类型 | 必填 | 说明 | 4902| ------------------ | ------------------ | ------------------- | ------------------- | 4903| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 4904| nodeType | 'WaterFlow' | 是 | 创建WaterFlow类型的节点。 | 4905 4906**返回值：** 4907 4908| 类型 | 说明 | 4909| ------------------ | ------------------ | 4910| [WaterFlow](#waterflow12) | WaterFlow类型的FrameNode节点。 | 4911 4912**示例：** 4913 4914```ts 4915import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 4916 4917class MyWaterFlowController extends NodeController { 4918 public rootNode: FrameNode | null = null; 4919 private minHeight: number = 80; 4920 private maxHeight: number = 180; 4921 4922 // 计算FlowItem高 4923 private getHeight() { 4924 let ret = Math.floor(Math.random() * this.maxHeight); 4925 return (ret > this.minHeight ? ret : this.minHeight); 4926 } 4927 4928 makeNode(uiContext: UIContext): FrameNode | null { 4929 this.rootNode = new FrameNode(uiContext); 4930 4931 //创建WaterFlow并设置属性 4932 let waterFlowNode = typeNode.createNode(uiContext, 'WaterFlow'); 4933 waterFlowNode.attribute.size({ width: '100%', height: '100%' }) 4934 .columnsTemplate('1fr 1fr') 4935 .columnsGap(10) 4936 .rowsGap(5); 4937 typeNode.getAttribute(waterFlowNode, "WaterFlow")?.friction(0.6); 4938 4939 //创建FlowItem并设置属性 4940 for (let i = 0; i < 20; i++) { 4941 let flowItemNode = typeNode.createNode(uiContext, 'FlowItem'); 4942 flowItemNode.attribute.size({ height: this.getHeight() }); 4943 typeNode.getAttribute(flowItemNode, "FlowItem")?.width('100%'); 4944 waterFlowNode.appendChild(flowItemNode); 4945 4946 let text = typeNode.createNode(uiContext, 'Text'); 4947 text.initialize('N' + i) 4948 .size({ width: '100%', height: '100%' }) 4949 .textAlign(TextAlign.Center) 4950 .backgroundColor(0xF9CF93); 4951 flowItemNode.appendChild(text); 4952 } 4953 4954 this!.rootNode!.appendChild(waterFlowNode); 4955 return this.rootNode; 4956 } 4957} 4958 4959@Entry 4960@Component 4961struct FrameNodeTypeTest { 4962 private myWaterFlowController: MyWaterFlowController = new MyWaterFlowController(); 4963 4964 build() { 4965 Column({ space: 5 }) { 4966 Text('WaterFlowSample') 4967 NodeContainer(this.myWaterFlowController); 4968 4969 }.width('100%') 4970 } 4971} 4972``` 4973 4974### getEvent('WaterFlow')<sup>19+</sup> 4975 4976getEvent(node: FrameNode, nodeType: 'WaterFlow'): UIWaterFlowEvent | undefined 4977 4978获取WaterFlow节点中持有的UIWaterFlowEvent对象，用于设置滚动事件。设置的滚动事件与声明式定义的事件平行；设置的滚动事件不覆盖原有的声明式事件。同时设置两个事件回调的时候，优先回调声明式事件。 4979 4980**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 4981 4982**系统能力：** SystemCapability.ArkUI.ArkUI.Full 4983 4984**参数：** 4985 4986| 参数名 | 类型 | 必填 | 说明 | 4987| ------------------ | ------------------ | ------------------- | ------------------- | 4988| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取事件时所需的目标节点。 | 4989| nodeType | 'WaterFlow' | 是 | 获取WaterFlow节点类型的滚动事件。 | 4990 4991**返回值：** 4992 4993| 类型 | 说明 | 4994| ------------------ | ------------------ | 4995| [UIWaterFlowEvent](./arkui-ts/ts-container-waterflow.md#uiwaterflowevent19) \| undefined | WaterFlow节点类型的滚动事件，若获取失败，则返回undefined。 | 4996 4997**示例：** 4998 4999完整示例请参考[滚动事件示例](#滚动事件示例)。 5000 5001### getAttribute('WaterFlow')<sup>20+</sup> 5002 5003getAttribute(node: FrameNode, nodeType: 'WaterFlow'): WaterFlowAttribute | undefined 5004 5005获取WaterFlow节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 5006 5007**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 5008 5009**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5010 5011**参数：** 5012 5013| 参数名 | 类型 | 必填 | 说明 | 5014| ------------------ | ------------------ | ------------------- | ------------------- | 5015| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 5016| nodeType | 'WaterFlow' | 是 | 获取WaterFlow节点类型的属性。 | 5017 5018**返回值：** 5019 5020| 类型 | 说明 | 5021| ------------------ | ------------------ | 5022| WaterFlowAttribute \| undefined | WaterFlow节点类型的属性，若获取失败，则返回undefined。 | 5023 5024**示例：** 5025 5026完整示例请参考[createNode('WaterFlow')](#createnodewaterflow12)的示例。 5027 5028### bindController('WaterFlow')<sup>20+</sup> 5029 5030bindController(node: FrameNode, controller: Scroller, nodeType: 'WaterFlow'): void 5031 5032将滚动控制器Scroller绑定到WaterFlow节点。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则抛出异常。该接口不支持声明式方式创建的节点。 5033 5034**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 5035 5036**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5037 5038**参数：** 5039 5040| 参数名 | 类型 | 必填 | 说明 | 5041| ------------------ | ------------------ | ------------------- | ------------------- | 5042| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 绑定滚动控制器的目标节点。 | 5043| controller | [Scroller](arkui-ts/ts-container-scroll.md#scroller) | 是 | 滚动控制器。 | 5044| nodeType | 'WaterFlow' | 是 | 绑定滚动控制器的目标节点的节点类型为WaterFlow。 | 5045 5046**错误码：** 5047 5048以下错误码的详细介绍请参见[自定义节点错误码](./errorcode-node.md)。 5049 5050| 错误码ID | 错误信息 | 5051| -------- | -------------------------------- | 5052| 100023 | Parameter error. Possible causes: 1. The component type of the node is incorrect. 2. The node is null or undefined. 3. The controller is null or undefined. | 5053| 100021 | The FrameNode is not modifiable. | 5054 5055**示例：** 5056 5057<!--code_no_check--> 5058 5059```ts 5060typeNode.bindController(node, scroller, 'WaterFlow'); 5061``` 5062 5063### FlowItem<sup>12+</sup> 5064 5065type FlowItem = TypedFrameNode<FlowItemInterface, FlowItemAttribute> 5066 5067FlowItem类型的FrameNode节点类型。允许添加一个子组件。 5068 5069**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 5070 5071**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5072 5073| 类型 | 说明 | 5074| ---------------------------------------------------------- | ------------------------------------------------------------ | 5075| TypedFrameNode<[FlowItemInterface](./arkui-ts/ts-container-flowitem.md#接口), [FlowItemAttribute](./arkui-ts/ts-container-flowitem.md#属性)> | 提供FlowItem类型FrameNode节点。<br/>**说明：**<br/> FlowItemInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为FlowItem组件的构造函数类型。 <br/> FlowItemAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回FlowItem组件的属性设置对象。 | 5076 5077### createNode('FlowItem')<sup>12+</sup> 5078 5079createNode(context: UIContext, nodeType: 'FlowItem'): FlowItem 5080 5081创建FlowItem类型的FrameNode节点。 5082 5083**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 5084 5085**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5086 5087**参数：** 5088 5089| 参数名 | 类型 | 必填 | 说明 | 5090| ------------------ | ------------------ | ------------------- | ------------------- | 5091| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 5092| nodeType | 'FlowItem' | 是 | 创建FlowItem类型的节点。 | 5093 5094**返回值：** 5095 5096| 类型 | 说明 | 5097| ------------------ | ------------------ | 5098| [FlowItem](#flowitem12) | FlowItem类型的FrameNode节点。 | 5099 5100**示例：** 5101 5102参考[createNode('WaterFlow')](#createnodewaterflow12)示例。 5103 5104### getAttribute('FlowItem')<sup>20+</sup> 5105 5106getAttribute(node: FrameNode, nodeType: 'FlowItem'): FlowItemAttribute | undefined 5107 5108获取FlowItem节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 5109 5110**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 5111 5112**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5113 5114**参数：** 5115 5116| 参数名 | 类型 | 必填 | 说明 | 5117| ------------------ | ------------------ | ------------------- | ------------------- | 5118| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 5119| nodeType | 'FlowItem' | 是 | 获取FlowItem节点类型的属性。 | 5120 5121**返回值：** 5122 5123| 类型 | 说明 | 5124| ------------------ | ------------------ | 5125| FlowItemAttribute \| undefined | FlowItem节点类型的属性，若获取失败，则返回undefined。 | 5126 5127**示例：** 5128 5129完整示例请参考[createNode('WaterFlow')](#createnodewaterflow12)的示例。 5130 5131### XComponent<sup>12+</sup> 5132 5133type XComponent = TypedFrameNode<XComponentInterface, XComponentAttribute> 5134 5135XComponent类型的FrameNode节点类型。 5136 5137**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 5138 5139**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5140 5141| 类型 | 说明 | 5142| ------------------------------------------------------------ | ------------------------------------------------------------ | 5143| TypedFrameNode<[XComponentInterface](./arkui-ts/ts-basic-components-xcomponent.md#接口), [XComponentAttribute](./arkui-ts/ts-basic-components-xcomponent.md#属性)> | 提供XComponent类型FrameNode节点。<br/>**说明：**<br/> XComponentInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为XComponent组件的构造函数类型。 <br/> XComponentAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回XComponent组件的属性设置对象。 | 5144 5145### createNode('XComponent')<sup>12+</sup> 5146 5147createNode(context: UIContext, nodeType: 'XComponent'): XComponent 5148 5149创建XComponent类型的FrameNode节点。 5150 5151**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 5152 5153**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5154 5155**参数：** 5156 5157| 参数名 | 类型 | 必填 | 说明 | 5158| ------------------ | ------------------ | ------------------- | ------------------- | 5159| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 5160| nodeType | 'XComponent' | 是 | 创建XComponent类型的节点。 | 5161 5162**返回值：** 5163 5164| 类型 | 说明 | 5165| ------------------ | ------------------ | 5166| [XComponent](#xcomponent12) | XComponent类型的FrameNode节点。 | 5167 5168**示例：** 5169 5170<!--code_no_check--> 5171 5172```ts 5173import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 5174 5175class MyNodeController extends NodeController { 5176 makeNode(uiContext: UIContext): FrameNode | null { 5177 let node = new FrameNode(uiContext); 5178 let col = typeNode.createNode(uiContext, 'Column'); 5179 col.initialize({ space: 5 }) 5180 .width('100%') 5181 .height('100%') 5182 node.appendChild(col); 5183 let xcomponent = typeNode.createNode(uiContext, 'XComponent'); 5184 xcomponent.attribute.backgroundColor(Color.Red); 5185 col.appendChild(xcomponent); 5186 return node; 5187 } 5188} 5189 5190@Entry 5191@Component 5192struct FrameNodeTypeTest { 5193 private myNodeController: MyNodeController = new MyNodeController(); 5194 5195 build() { 5196 Column({ space: 5 }) { 5197 Text('XComponentSample') 5198 NodeContainer(this.myNodeController) 5199 }.width('100%') 5200 } 5201} 5202``` 5203 5204### createNode('XComponent')<sup>12+</sup> 5205 5206createNode(context: UIContext, nodeType: 'XComponent', options: XComponentOptions): XComponent 5207 5208按照options中的配置参数创建XComponent类型的FrameNode节点。 5209 5210**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 5211 5212**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5213 5214**参数：** 5215 5216| 参数名 | 类型 | 必填 | 说明 | 5217| ------------------ | ------------------ | ------------------- | ------------------- | 5218| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 5219| nodeType | 'XComponent' | 是 | 创建XComponent类型的节点。 | 5220| options | [XComponentOptions](./arkui-ts/ts-basic-components-xcomponent.md#xcomponentoptions12) | 是 | 定义XComponent的具体配置参数。 | 5221 5222**返回值：** 5223 5224| 类型 | 说明 | 5225| ------------------ | ------------------ | 5226| [XComponent](#xcomponent12) | XComponent类型的FrameNode节点。 | 5227 5228**示例：** 5229 5230<!--code_no_check--> 5231 5232```ts 5233import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 5234 5235class MyNodeController extends NodeController { 5236 controller: XComponentController = new XComponentController(); 5237 makeNode(uiContext: UIContext): FrameNode | null { 5238 let node = new FrameNode(uiContext); 5239 let col = typeNode.createNode(uiContext, 'Column'); 5240 col.initialize({ space: 5 }) 5241 .width('100%') 5242 .height('100%') 5243 node.appendChild(col); 5244 let options: XComponentOptions = { 5245 type: XComponentType.SURFACE, 5246 controller: this.controller 5247 }; 5248 let xcomponent = typeNode.createNode(uiContext, 'XComponent', options); 5249 xcomponent.attribute.backgroundColor(Color.Red); 5250 col.appendChild(xcomponent); 5251 return node; 5252 } 5253} 5254 5255@Entry 5256@Component 5257struct FrameNodeTypeTest { 5258 private myNodeController: MyNodeController = new MyNodeController(); 5259 5260 build() { 5261 Column({ space: 5 }) { 5262 Text('XComponentSample') 5263 NodeContainer(this.myNodeController) 5264 }.width('100%') 5265 } 5266} 5267``` 5268 5269### createNode('XComponent')<sup>19+</sup> 5270 5271createNode(context: UIContext, nodeType: 'XComponent', parameters: NativeXComponentParameters): XComponent 5272 5273按照parameters中的配置参数创建XComponent类型的FrameNode节点。 5274 5275**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 5276 5277**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5278 5279**参数：** 5280 5281| 参数名 | 类型 | 必填 | 说明 | 5282| ------------------ | ------------------ | ------------------- | ------------------- | 5283| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 5284| nodeType | 'XComponent' | 是 | 创建XComponent类型的节点。 | 5285| parameters | [NativeXComponentParameters](./arkui-ts/ts-basic-components-xcomponent.md#nativexcomponentparameters19) | 是 | 定义XComponent的具体配置参数。 | 5286 5287**返回值：** 5288 5289| 类型 | 说明 | 5290| ------------------ | ------------------ | 5291| [XComponent](#xcomponent12) | XComponent类型的FrameNode节点。 | 5292 5293**示例：** 5294 5295<!--code_no_check--> 5296 5297```ts 5298import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 5299 5300class MyNodeController extends NodeController { 5301 controller: XComponentController = new XComponentController(); 5302 makeNode(uiContext: UIContext): FrameNode | null { 5303 let node = new FrameNode(uiContext); 5304 let col = typeNode.createNode(uiContext, 'Column'); 5305 col.initialize({ space: 5 }) 5306 .width('100%') 5307 .height('100%') 5308 node.appendChild(col); 5309 let parameters: NativeXComponentParameters = { 5310 type: XComponentType.SURFACE 5311 }; 5312 let xcomponent = typeNode.createNode(uiContext, 'XComponent', parameters); 5313 xcomponent.attribute.backgroundColor(Color.Red); 5314 col.appendChild(xcomponent); 5315 return node; 5316 } 5317} 5318 5319@Entry 5320@Component 5321struct FrameNodeTypeTest { 5322 private myNodeController: MyNodeController = new MyNodeController(); 5323 5324 build() { 5325 Column({ space: 5 }) { 5326 Text('XComponentSample') 5327 NodeContainer(this.myNodeController) 5328 }.width('100%') 5329 } 5330} 5331``` 5332 5333### getAttribute('XComponent')<sup>20+</sup> 5334 5335getAttribute(node: FrameNode, nodeType: 'XComponent'): XComponentAttribute | undefined 5336 5337获取XComponent节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 5338 5339**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 5340 5341**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5342 5343**参数：** 5344 5345| 参数名 | 类型 | 必填 | 说明 | 5346| ------------------ | ------------------ | ------------------- | ------------------- | 5347| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 5348| nodeType | 'XComponent' | 是 | 获取XComponent节点类型的属性。 | 5349 5350**返回值：** 5351 5352| 类型 | 说明 | 5353| ------------------ | ------------------ | 5354| XComponentAttribute \| undefined | XComponent节点类型的属性，若获取失败，则返回undefined。 | 5355 5356**示例：** 5357 5358<!--code_no_check--> 5359 5360```ts 5361typeNode.getAttribute(node, 'XComponent'); 5362``` 5363 5364### QRCode<sup>14+</sup> 5365type QRCode = TypedFrameNode<QRCodeInterface, QRCodeAttribute> 5366 5367QRCode类型的FrameNode节点类型。 5368 5369**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5370 5371**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5372 5373| 类型 | 说明 | 5374| ----------------------------- | -------------------- | 5375| TypedFrameNode<[QRCodeInterface](./arkui-ts/ts-basic-components-qrcode.md#接口), [QRCodeAttribute](./arkui-ts/ts-basic-components-qrcode.md#属性)> | 提供QRCode类型FrameNode节点。<br/>**说明：**<br/> QRCodeInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为QRCode组件的构造函数类型。 <br/> QRCodeAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回QRCode组件的属性设置对象。 | 5376 5377### createNode('QRCode')<sup>14+</sup> 5378 5379createNode(context: UIContext, nodeType: 'QRCode'): QRCode 5380 5381创建QRCode类型的FrameNode节点。 5382 5383**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5384 5385**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5386 5387**参数：** 5388 5389| 参数名 | 类型 | 必填 | 说明 | 5390| ------------------ | ------------------ | ------------------- | ------------------- | 5391| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 5392| nodeType | 'QRCode' | 是 | 创建QRCode类型的节点。 | 5393 5394**返回值：** 5395 5396| 类型 | 说明 | 5397| ------------------ | ------------------ | 5398| [QRCode](#qrcode14) | QRCode类型的FrameNode节点。 | 5399 5400**示例：** 5401 5402<!--code_no_check--> 5403 5404```ts 5405typeNode.createNode(uiContext, 'QRCode'); 5406``` 5407 5408### Badge<sup>14+</sup> 5409 5410type Badge = TypedFrameNode<BadgeInterface, BadgeAttribute> 5411 5412Badge类型的FrameNode节点类型。 5413 5414**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5415 5416**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5417 5418| 类型 | 说明 | 5419| ----------------------------- | -------------------- | 5420| TypedFrameNode<[BadgeInterface](./arkui-ts/ts-container-badge.md#接口), [BadgeAttribute](./arkui-ts/ts-container-badge.md#属性)> | 提供Badge类型FrameNode节点。<br/>**说明：**<br/> BadgeInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Badge组件的构造函数类型。 <br/> BadgeAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Badge组件的属性设置对象。 | 5421 5422### createNode('Badge')<sup>14+</sup> 5423 5424createNode(context: UIContext, nodeType: 'Badge'): Badge 5425 5426创建Badge类型的FrameNode节点。 5427 5428**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5429 5430**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5431 5432**参数：** 5433 5434| 参数名 | 类型 | 必填 | 说明 | 5435| ------------------ | ------------------ | ------------------- | ------------------- | 5436| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 5437| nodeType | 'Badge' | 是 | 创建Badge类型的节点。 | 5438 5439**返回值：** 5440 5441| 类型 | 说明 | 5442| ------------------ | ------------------ | 5443| [Badge](#badge14) | Badge类型的FrameNode节点。 | 5444 5445**示例：** 5446 5447<!--code_no_check--> 5448 5449```ts 5450typeNode.createNode(uiContext, 'Badge'); 5451``` 5452 5453### Grid<sup>14+</sup> 5454 5455type Grid = TypedFrameNode<GridInterface, GridAttribute> 5456 5457Grid类型的FrameNode节点类型。 5458 5459**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5460 5461**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5462 5463| 类型 | 说明 | 5464| ----------------------------- | -------------------- | 5465| TypedFrameNode<[GridInterface](./arkui-ts/ts-container-grid.md#接口), [GridAttribute](./arkui-ts/ts-container-grid.md#属性)> | 提供Grid类型FrameNode节点。<br/>**说明：**<br/> GridInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Grid组件的构造函数类型。 <br/> GridAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Grid组件的属性设置对象。 | 5466 5467### createNode('Grid')<sup>14+</sup> 5468 5469createNode(context: UIContext, nodeType: 'Grid'): Grid 5470 5471创建Grid类型的FrameNode节点。 5472 5473**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5474 5475**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5476 5477**参数：** 5478 5479| 参数名 | 类型 | 必填 | 说明 | 5480| ------------------ | ------------------ | ------------------- | ------------------- | 5481| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 5482| nodeType | 'Grid' | 是 | 创建Grid类型的节点。 | 5483 5484**返回值：** 5485 5486| 类型 | 说明 | 5487| ------------------ | ------------------ | 5488| [Grid](#grid14) | Grid类型的FrameNode节点。 | 5489 5490**示例：** 5491 5492```ts 5493import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 5494 5495class MyGridController extends NodeController { 5496 public rootNode: FrameNode | null = null; 5497 private scroller: Scroller = new Scroller(); 5498 5499 makeNode(uiContext: UIContext): FrameNode | null { 5500 this.rootNode = new FrameNode(uiContext); 5501 5502 //创建Grid设置属性 5503 let gridNode = typeNode.createNode(uiContext, 'Grid'); 5504 gridNode.initialize(this.scroller, { regularSize: [1, 1] }) 5505 .size({ width: '90%', height: 300 }) 5506 .columnsTemplate('1fr 1fr 1fr 1fr 1fr') 5507 .rowsTemplate('1fr 1fr 1fr 1fr 1fr') 5508 .columnsGap(10) 5509 .rowsGap(10); 5510 typeNode.getAttribute(gridNode, "Grid")?.friction(0.6); 5511 5512 //创建GridItem并设置属性 5513 for (let i = 0; i < 25; i++) { 5514 let gridItemNode = typeNode.createNode(uiContext, 'GridItem'); 5515 gridItemNode.initialize({ style: GridItemStyle.NONE }).size({ height: '100%' }); 5516 typeNode.getAttribute(gridItemNode, "GridItem")?.width('100%'); 5517 5518 let text = typeNode.createNode(uiContext, 'Text'); 5519 text.initialize((i % 5).toString()) 5520 .size({ width: '100%', height: '100%' }) 5521 .textAlign(TextAlign.Center) 5522 .backgroundColor(0xF9CF93); 5523 gridItemNode.appendChild(text); 5524 gridNode.appendChild(gridItemNode); 5525 } 5526 5527 this!.rootNode!.appendChild(gridNode); 5528 return this.rootNode; 5529 } 5530} 5531 5532@Entry 5533@Component 5534struct FrameNodeTypeTest { 5535 private myGridController: MyGridController = new MyGridController(); 5536 5537 build() { 5538 Column({ space: 5 }) { 5539 Text('GridSample') 5540 NodeContainer(this.myGridController) 5541 5542 }.width('100%') 5543 } 5544} 5545``` 5546 5547### getEvent('Grid')<sup>19+</sup> 5548 5549getEvent(node: FrameNode, nodeType: 'Grid'): UIGridEvent | undefined 5550 5551获取Grid节点中持有的UIGridEvent对象，用于设置滚动事件。设置的滚动事件与声明式定义的事件平行；设置的滚动事件不覆盖原有的声明式事件。同时设置两个事件回调的时候，优先回调声明式事件。 5552 5553**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 5554 5555**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5556 5557**参数：** 5558 5559| 参数名 | 类型 | 必填 | 说明 | 5560| ------------------ | ------------------ | ------------------- | ------------------- | 5561| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取事件时所需的目标节点。 | 5562| nodeType | 'Grid' | 是 | 获取Grid节点类型的滚动事件。 | 5563 5564**返回值：** 5565 5566| 类型 | 说明 | 5567| ------------------ | ------------------ | 5568| [UIGridEvent](./arkui-ts/ts-container-grid.md#uigridevent19) \| undefined | Grid节点类型的滚动事件，若获取失败，则返回undefined。 | 5569 5570**示例：** 5571 5572完整示例请参考[滚动事件示例](#滚动事件示例)。 5573 5574### getAttribute('Grid')<sup>20+</sup> 5575 5576getAttribute(node: FrameNode, nodeType: 'Grid'): GridAttribute | undefined 5577 5578获取Grid节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 5579 5580**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 5581 5582**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5583 5584**参数：** 5585 5586| 参数名 | 类型 | 必填 | 说明 | 5587| ------------------ | ------------------ | ------------------- | ------------------- | 5588| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 5589| nodeType | 'Grid' | 是 | 获取Grid节点类型的属性。 | 5590 5591**返回值：** 5592 5593| 类型 | 说明 | 5594| ------------------ | ------------------ | 5595| GridAttribute \| undefined | Grid节点类型的属性，若获取失败，则返回undefined。 | 5596 5597**示例：** 5598 5599完整示例请参考[createNode('Grid')](#createnodegrid14)的示例。 5600 5601### bindController('Grid')<sup>20+</sup> 5602 5603bindController(node: FrameNode, controller: Scroller, nodeType: 'Grid'): void 5604 5605将滚动控制器Scroller绑定到Grid节点。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则抛出异常。该接口不支持声明式方式创建的节点。 5606 5607**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 5608 5609**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5610 5611**参数：** 5612 5613| 参数名 | 类型 | 必填 | 说明 | 5614| ------------------ | ------------------ | ------------------- | ------------------- | 5615| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 绑定滚动控制器的目标节点。 | 5616| controller | [Scroller](arkui-ts/ts-container-scroll.md#scroller) | 是 | 滚动控制器。 | 5617| nodeType | 'Grid' | 是 | 绑定滚动控制器的目标节点的节点类型为Grid。 | 5618 5619**错误码：** 5620 5621以下错误码的详细介绍请参见[自定义节点错误码](./errorcode-node.md)。 5622 5623| 错误码ID | 错误信息 | 5624| -------- | -------------------------------- | 5625| 100023 | Parameter error. Possible causes: 1. The component type of the node is incorrect. 2. The node is null or undefined. 3. The controller is null or undefined. | 5626| 100021 | The FrameNode is not modifiable. | 5627 5628**示例：** 5629 5630<!--code_no_check--> 5631 5632```ts 5633typeNode.bindController(node, scroller, 'Grid'); 5634``` 5635 5636### GridItem<sup>14+</sup> 5637 5638type GridItem = TypedFrameNode<GridItemInterface, GridItemAttribute> 5639 5640GridItem类型的FrameNode节点类型。 5641 5642**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5643 5644**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5645 5646| 类型 | 说明 | 5647| ----------------------------- | -------------------- | 5648| TypedFrameNode<[GridItemInterface](./arkui-ts/ts-container-griditem.md#接口), [GridItemAttribute](./arkui-ts/ts-container-griditem.md#属性)> | 提供GridItem类型FrameNode节点。<br/>**说明：**<br/> GridItemInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为GridItem组件的构造函数类型。 <br/> GridItemAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回GridItem组件的属性设置对象。 | 5649 5650### createNode('GridItem')<sup>14+</sup> 5651 5652createNode(context: UIContext, nodeType: 'GridItem'): GridItem 5653 5654创建GridItem类型的FrameNode节点。 5655 5656**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5657 5658**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5659 5660**参数：** 5661 5662| 参数名 | 类型 | 必填 | 说明 | 5663| ------------------ | ------------------ | ------------------- | ------------------- | 5664| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 5665| nodeType | 'GridItem' | 是 | 创建GridItem类型的节点。 | 5666 5667**返回值：** 5668 5669| 类型 | 说明 | 5670| ------------------ | ------------------ | 5671| [GridItem](#griditem14) | GridItem类型的FrameNode节点。 | 5672 5673**示例：** 5674 5675参考[createNode('Grid')](#createnodegrid14)示例。 5676 5677### getAttribute('GridItem')<sup>20+</sup> 5678 5679getAttribute(node: FrameNode, nodeType: 'GridItem'): GridItemAttribute | undefined 5680 5681获取GridItem节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 5682 5683**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 5684 5685**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5686 5687**参数：** 5688 5689| 参数名 | 类型 | 必填 | 说明 | 5690| ------------------ | ------------------ | ------------------- | ------------------- | 5691| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 5692| nodeType | 'GridItem' | 是 | 获取GridItem节点类型的属性。 | 5693 5694**返回值：** 5695 5696| 类型 | 说明 | 5697| ------------------ | ------------------ | 5698| GridItemAttribute \| undefined | GridItem节点类型的属性，若获取失败，则返回undefined。 | 5699 5700**示例：** 5701 5702完整示例请参考[createNode('Grid')](#createnodegrid14)的示例。 5703 5704### TextClock<sup>14+</sup> 5705 5706type TextClock = TypedFrameNode<TextClockInterface, TextClockAttribute> 5707 5708TextClock类型的FrameNode节点类型。 5709 5710**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5711 5712**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5713 5714| 类型 | 说明 | 5715| ----------------------------- | -------------------- | 5716| TypedFrameNode<[TextClockInterface](./arkui-ts/ts-basic-components-textclock.md#接口), [TextClockAttribute](./arkui-ts/ts-basic-components-textclock.md#属性)> | 提供TextClock类型FrameNode节点。<br/>**说明：**<br/> TextClockInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为TextClock组件的构造函数类型。 <br/> TextClockAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回TextClock组件的属性设置对象。 | 5717 5718### createNode('TextClock')<sup>14+</sup> 5719 5720createNode(context: UIContext, nodeType: 'TextClock'): TextClock 5721 5722创建TextClock类型的FrameNode节点。 5723 5724**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5725 5726**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5727 5728**参数：** 5729 5730| 参数名 | 类型 | 必填 | 说明 | 5731| ------------------ | ------------------ | ------------------- | ------------------- | 5732| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 5733| nodeType | 'TextClock' | 是 | 创建TextClock类型的节点。 | 5734 5735**返回值：** 5736 5737| 类型 | 说明 | 5738| ------------------ | ------------------ | 5739| [TextClock](#textclock14) | TextClock类型的FrameNode节点。 | 5740 5741**示例：** 5742 5743<!--code_no_check--> 5744 5745```ts 5746typeNode.createNode(uiContext, 'TextClock'); 5747``` 5748 5749### TextTimer<sup>14+</sup> 5750 5751type TextTimer = TypedFrameNode<TextTimerInterface, TextTimerAttribute> 5752 5753TextTimer类型的FrameNode节点类型。 5754 5755**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5756 5757**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5758 5759| 类型 | 说明 | 5760| ----------------------------- | -------------------- | 5761| TypedFrameNode<[TextTimerInterface](./arkui-ts/ts-basic-components-texttimer.md#接口), [TextTimerAttribute](./arkui-ts/ts-basic-components-texttimer.md#属性)> | 提供TextTimer类型FrameNode节点。<br/>**说明：**<br/> TextTimerInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为TextTimer组件的构造函数类型。 <br/> TextTimerAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回TextTimer组件的属性设置对象。 | 5762 5763### createNode('TextTimer')<sup>14+</sup> 5764 5765createNode(context: UIContext, nodeType: 'TextTimer'): TextTimer 5766 5767创建TextTimer类型的FrameNode节点。 5768 5769**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5770 5771**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5772 5773**参数：** 5774 5775| 参数名 | 类型 | 必填 | 说明 | 5776| ------------------ | ------------------ | ------------------- | ------------------- | 5777| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 5778| nodeType | 'TextTimer' | 是 | 创建TextTimer类型的节点。 | 5779 5780**返回值：** 5781 5782| 类型 | 说明 | 5783| ------------------ | ------------------ | 5784| [TextTimer](#texttimer14) | TextTimer类型的FrameNode节点。 | 5785 5786**示例：** 5787 5788<!--code_no_check--> 5789 5790```ts 5791typeNode.createNode(uiContext, 'TextTimer'); 5792``` 5793 5794### Marquee<sup>14+</sup> 5795 5796type Marquee = TypedFrameNode<MarqueeInterface, MarqueeAttribute> 5797 5798Marquee类型的FrameNode节点类型。 5799 5800**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5801 5802**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5803 5804| 类型 | 说明 | 5805| ----------------------------- | -------------------- | 5806| TypedFrameNode<[MarqueeInterface](./arkui-ts/ts-basic-components-marquee.md#接口), [MarqueeAttribute](./arkui-ts/ts-basic-components-marquee.md#属性)> | 提供Marquee类型FrameNode节点。<br/>**说明：**<br/> MarqueeInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Marquee组件的构造函数类型。 <br/> MarqueeAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Marquee组件的属性设置对象。 | 5807 5808### createNode('Marquee')<sup>14+</sup> 5809 5810createNode(context: UIContext, nodeType: 'Marquee'): Marquee 5811 5812创建Marquee类型的FrameNode节点。 5813 5814**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5815 5816**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5817 5818**参数：** 5819 5820| 参数名 | 类型 | 必填 | 说明 | 5821| ------------------ | ------------------ | ------------------- | ------------------- | 5822| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 5823| nodeType | 'Marquee' | 是 | 创建Marquee类型的节点。 | 5824 5825**返回值：** 5826 5827| 类型 | 说明 | 5828| ------------------ | ------------------ | 5829| [Marquee](#marquee14) | Marquee类型的FrameNode节点。 | 5830 5831**示例：** 5832 5833```ts 5834import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 5835 5836class MyNodeController extends NodeController { 5837 makeNode(uiContext: UIContext): FrameNode | null { 5838 let node = new FrameNode(uiContext); 5839 node.commonAttribute; 5840 let col = typeNode.createNode(uiContext, 'Column'); 5841 col.initialize({ space: 5 }) 5842 node.appendChild(col); 5843 // 创建marquee 5844 let marquee = typeNode.createNode(uiContext, 'Marquee'); 5845 marquee.initialize({start:true,src:'Marquee, if need display, src shall be long'}) 5846 .width(100); 5847 col.appendChild(marquee); 5848 return node; 5849 } 5850} 5851 5852@Entry 5853@Component 5854struct FrameNodeTypeTest { 5855 private myNodeController: MyNodeController = new MyNodeController(); 5856 5857 build() { 5858 Column({ space: 5 }) { 5859 Text('Marquee createNode sample'); 5860 NodeContainer(this.myNodeController); 5861 } 5862 } 5863} 5864``` 5865 5866### TextArea<sup>14+</sup> 5867 5868type TextArea = TypedFrameNode<TextAreaInterface, TextAreaAttribute> 5869 5870TextArea类型的FrameNode节点类型。 5871 5872**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5873 5874**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5875 5876| 类型 | 说明 | 5877| ----------------------------- | -------------------- | 5878| TypedFrameNode<[TextAreaInterface](./arkui-ts/ts-basic-components-textarea.md#接口), [TextAreaAttribute](./arkui-ts/ts-basic-components-textarea.md#属性)> | 提供TextArea类型FrameNode节点。<br/>**说明：**<br/> TextAreaInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为TextArea组件的构造函数类型。 <br/> TextAreaAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回TextArea组件的属性设置对象。 | 5879 5880### createNode('TextArea')<sup>14+</sup> 5881 5882createNode(context: UIContext, nodeType: 'TextArea'): TextArea 5883 5884创建TextArea类型的FrameNode节点。 5885 5886**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 5887 5888**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5889 5890**参数：** 5891 5892| 参数名 | 类型 | 必填 | 说明 | 5893| ------------------ | ------------------ | ------------------- | ------------------- | 5894| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 5895| nodeType | 'TextArea' | 是 | 创建TextArea类型的节点。 | 5896 5897**返回值：** 5898 5899| 类型 | 说明 | 5900| ------------------ | ------------------ | 5901| [TextArea](#textarea14) | TextArea类型的FrameNode节点。 | 5902 5903**示例：** 5904 5905```ts 5906import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 5907 5908class MyNodeController extends NodeController { 5909 makeNode(uiContext: UIContext): FrameNode | null { 5910 let node = new FrameNode(uiContext); 5911 node.commonAttribute 5912 let col = typeNode.createNode(uiContext, 'Column'); 5913 col.initialize({ space: 5 }) 5914 node.appendChild(col); 5915 // 创建textArea 5916 let textArea = typeNode.createNode(uiContext, 'TextArea'); 5917 textArea.initialize({ text: "TextArea" }); 5918 col.appendChild(textArea); 5919 return node; 5920 } 5921} 5922 5923@Entry 5924@Component 5925struct FrameNodeTypeTest { 5926 private myNodeController: MyNodeController = new MyNodeController(); 5927 5928 build() { 5929 Column({ space: 5 }) { 5930 Text('TextArea create sample') 5931 NodeContainer(this.myNodeController); 5932 } 5933 } 5934} 5935``` 5936 5937### getAttribute('TextArea')<sup>20+</sup> 5938 5939getAttribute(node: FrameNode, nodeType: 'TextArea'): TextAreaAttribute | undefined 5940 5941获取TextArea节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 5942 5943**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 5944 5945**系统能力：** SystemCapability.ArkUI.ArkUI.Full 5946 5947**参数：** 5948 5949| 参数名 | 类型 | 必填 | 说明 | 5950| ------------------ | ------------------ | ------------------- | ------------------- | 5951| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 5952| nodeType | 'TextArea' | 是 | 获取TextArea节点类型的属性。 | 5953 5954**返回值：** 5955 5956| 类型 | 说明 | 5957| ------------------ | ------------------ | 5958| TextAreaAttribute \| undefined | TextArea节点类型的属性，若获取失败，则返回undefined。 | 5959 5960**示例：** 5961 5962```ts 5963import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 5964 5965class MyNodeController extends NodeController { 5966 makeNode(uiContext: UIContext): FrameNode | null { 5967 let node = new FrameNode(uiContext); 5968 node.commonAttribute; 5969 let col = typeNode.createNode(uiContext, 'Column'); 5970 col.initialize({ space: 5 }); 5971 node.appendChild(col); 5972 // 创建TextArea 5973 let textArea = typeNode.createNode(uiContext, 'TextArea'); 5974 textArea.initialize({ placeholder: 'TextArea placeholderColor' }); 5975 col.appendChild(textArea); 5976 // 获取TextArea节点的属性 5977 typeNode.getAttribute(textArea, 'TextArea')?.placeholderColor(Color.Red); 5978 return node; 5979 } 5980} 5981 5982@Entry 5983@Component 5984struct FrameNodeTypeTest { 5985 private myNodeController: MyNodeController = new MyNodeController(); 5986 5987 build() { 5988 Column({ space: 5 }) { 5989 Text('TextArea getAttribute sample'); 5990 NodeContainer(this.myNodeController); 5991 } 5992 } 5993} 5994``` 5995 5996### bindController('TextArea')<sup>20+</sup> 5997 5998bindController(node: FrameNode, controller: TextAreaController, nodeType: 'TextArea'): void 5999 6000将输入框控制器TextAreaController绑定到TextArea节点。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则抛出异常。该接口不支持声明式方式创建的节点。 6001 6002**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 6003 6004**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6005 6006**参数：** 6007 6008| 参数名 | 类型 | 必填 | 说明 | 6009| ------------------ | ------------------ | ------------------- | ------------------- | 6010| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 绑定输入框控制器的目标节点。 | 6011| controller | [TextAreaController](arkui-ts/ts-basic-components-textarea.md#textareacontroller8) | 是 | 输入框控制器。 | 6012| nodeType | 'TextArea' | 是 | 绑定输入框控制器的目标节点的节点类型为TextArea。 | 6013 6014**错误码：** 6015 6016以下错误码的详细介绍请参见[自定义节点错误码](./errorcode-node.md)。 6017 6018| 错误码ID | 错误信息 | 6019| -------- | -------------------------------- | 6020| 100023 | Parameter error. Possible causes: 1. The component type of the node is incorrect. 2. The node is null or undefined. 3. The controller is null or undefined. | 6021| 100021 | The FrameNode is not modifiable. | 6022 6023**示例：** 6024 6025```ts 6026import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 6027 6028class MyNodeController extends NodeController { 6029 makeNode(uiContext: UIContext): FrameNode | null { 6030 let node = new FrameNode(uiContext); 6031 node.commonAttribute; 6032 let col = typeNode.createNode(uiContext, 'Column'); 6033 col.initialize({ space: 5 }); 6034 node.appendChild(col); 6035 // 创建、初始化TextArea，默认获焦 6036 let textArea = typeNode.createNode(uiContext, 'TextArea'); 6037 textArea.initialize({ text: "TextArea" }) 6038 .defaultFocus(true) 6039 col.appendChild(textArea); 6040 // 绑定TextAreaController，设置光标位置 6041 let controller: TextAreaController = new TextAreaController() 6042 typeNode.bindController(textArea, controller, 'TextArea'); 6043 controller.caretPosition(3); 6044 return node; 6045 } 6046} 6047 6048@Entry 6049@Component 6050struct FrameNodeTypeTest { 6051 private myNodeController: MyNodeController = new MyNodeController(); 6052 6053 build() { 6054 Column({ space: 5 }) { 6055 Text('TextArea bindController sample'); 6056 NodeContainer(this.myNodeController); 6057 } 6058 } 6059} 6060``` 6061 6062### SymbolGlyph<sup>14+</sup> 6063 6064type SymbolGlyph = TypedFrameNode<SymbolGlyphInterface, SymbolGlyphAttribute> 6065 6066SymbolGlyph类型的FrameNode节点类型。 6067 6068**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 6069 6070**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6071 6072| 类型 | 说明 | 6073| ----------------------------- | -------------------- | 6074| TypedFrameNode<[SymbolGlyphInterface](./arkui-ts/ts-basic-components-symbolGlyph.md#接口), [SymbolGlyphAttribute](./arkui-ts/ts-basic-components-symbolGlyph.md#属性)> | 提供SymbolGlyph类型FrameNode节点。<br/>**说明：**<br/> SymbolGlyphInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为SymbolGlyph组件的构造函数类型。 <br/> SymbolGlyphAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回SymbolGlyph组件的属性设置对象。 | 6075 6076### createNode('SymbolGlyph')<sup>14+</sup> 6077 6078createNode(context: UIContext, nodeType: 'SymbolGlyph'): SymbolGlyph 6079 6080创建SymbolGlyph类型的FrameNode节点。 6081 6082**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 6083 6084**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6085 6086**参数：** 6087 6088| 参数名 | 类型 | 必填 | 说明 | 6089| ------------------ | ------------------ | ------------------- | ------------------- | 6090| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 6091| nodeType | 'SymbolGlyph' | 是 | 创建SymbolGlyph类型的节点。 | 6092 6093**返回值：** 6094 6095| 类型 | 说明 | 6096| ------------------ | ------------------ | 6097| [SymbolGlyph](#symbolglyph14) | SymbolGlyph类型的FrameNode节点。 | 6098 6099**示例：** 6100 6101```ts 6102import { FrameNode, NodeController, typeNode } from '@kit.ArkUI'; 6103 6104class MyNodeController extends NodeController { 6105 makeNode(uiContext: UIContext): FrameNode | null { 6106 let node = new FrameNode(uiContext); 6107 node.commonAttribute; 6108 let col = typeNode.createNode(uiContext, 'Column'); 6109 col.initialize({ space: 5 }); 6110 node.appendChild(col); 6111 // 创建SymbolGlyph 6112 let symbolGlyph = typeNode.createNode(uiContext, 'SymbolGlyph'); 6113 symbolGlyph.initialize($r('sys.symbol.ohos_trash')); 6114 col.appendChild(symbolGlyph); 6115 return node; 6116 } 6117} 6118 6119@Entry 6120@Component 6121struct FrameNodeTypeTest { 6122 private myNodeController: MyNodeController = new MyNodeController(); 6123 6124 build() { 6125 Column({ space: 5 }) { 6126 Text('SymbolGlyph sample'); 6127 NodeContainer(this.myNodeController); 6128 } 6129 } 6130} 6131``` 6132 6133### Checkbox<sup>18+</sup> 6134 6135type Checkbox = TypedFrameNode<CheckboxInterface, CheckboxAttribute> 6136 6137Checkbox类型的FrameNode节点类型。 6138 6139**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6140 6141**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6142 6143| 类型 | 说明 | 6144| ----------------------------- | -------------------- | 6145| TypedFrameNode<[CheckboxInterface](./arkui-ts/ts-basic-components-checkbox.md#接口), [CheckboxAttribute](./arkui-ts/ts-basic-components-checkbox.md#属性)> | 提供Checkbox类型FrameNode节点。<br/>**说明：**<br/> CheckboxInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Checkbox组件的构造函数类型。 <br/> CheckboxAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Checkbox组件的属性设置对象。 | 6146 6147### createNode('Checkbox')<sup>18+</sup> 6148 6149createNode(context: UIContext, nodeType: 'Checkbox'): Checkbox 6150 6151创建Checkbox类型的FrameNode节点。 6152 6153**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6154 6155**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6156 6157**参数：** 6158 6159| 参数名 | 类型 | 必填 | 说明 | 6160| ------------------ | ------------------ | ------------------- | ------------------- | 6161| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 6162| nodeType | 'Checkbox' | 是 | 创建Checkbox类型的节点。 | 6163 6164**返回值：** 6165 6166| 类型 | 说明 | 6167| ------------------ | ------------------ | 6168| [Checkbox](#checkbox18) | Checkbox类型的FrameNode节点。 | 6169 6170**示例：** 6171 6172```ts 6173import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 6174 6175class MyCheckboxController extends NodeController { 6176 makeNode(uiContext: UIContext): FrameNode | null { 6177 let node = new FrameNode(uiContext) 6178 node.commonAttribute 6179 let col = typeNode.createNode(uiContext, 'Column') 6180 col.initialize({ space: 5 }) 6181 .width('100%') 6182 .height('100%') 6183 node.appendChild(col) 6184 let checkbox = typeNode.createNode(uiContext, 'Checkbox') 6185 checkbox.initialize({ name: 'checkbox1', group: 'checkboxGroup1' }) 6186 6187 let checkbox1 = typeNode.createNode(uiContext, 'Checkbox') 6188 checkbox1.initialize({ name: 'checkbox2', group: 'checkboxGroup1' }) 6189 6190 col.appendChild(checkbox) 6191 col.appendChild(checkbox1) 6192 return node; 6193 } 6194} 6195 6196@Entry 6197@Component 6198struct FrameNodeTypeTest { 6199 private myCheckboxController: MyCheckboxController = new MyCheckboxController(); 6200 6201 build() { 6202 Column({ space: 5 }) { 6203 Text('CheckboxSample') 6204 NodeContainer(this.myCheckboxController); 6205 }.width('100%') 6206 } 6207} 6208``` 6209 6210### getAttribute('Checkbox')<sup>20+</sup> 6211 6212getAttribute(node: FrameNode, nodeType: 'Checkbox'): CheckboxAttribute | undefined 6213 6214获取Checkbox节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 6215 6216**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 6217 6218**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6219 6220**参数：** 6221 6222| 参数名 | 类型 | 必填 | 说明 | 6223| ------------------ | ------------------ | ------------------- | ------------------- | 6224| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 6225| nodeType | 'Checkbox' | 是 | 获取Checkbox节点类型的属性。 | 6226 6227**返回值：** 6228 6229| 类型 | 说明 | 6230| ------------------ | ------------------ | 6231| CheckboxAttribute \| undefined | Checkbox节点类型的属性，若获取失败，则返回undefined。 | 6232 6233**示例：** 6234 6235```ts 6236import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 6237 6238class MyCheckboxController extends NodeController { 6239 makeNode(uiContext: UIContext): FrameNode | null { 6240 let node = new FrameNode(uiContext) 6241 node.commonAttribute 6242 let col = typeNode.createNode(uiContext, 'Column') 6243 col.initialize({ space: 5 }) 6244 .width('100%') 6245 .height('100%') 6246 node.appendChild(col) 6247 let checkbox = typeNode.createNode(uiContext, 'Checkbox') 6248 checkbox.initialize({ name: 'checkbox1', group: 'checkboxGroup1' }) 6249 6250 let checkbox1 = typeNode.createNode(uiContext, 'Checkbox') 6251 checkbox1.initialize({ name: 'checkbox2', group: 'checkboxGroup1' }) 6252 typeNode.getAttribute(checkbox1,'Checkbox')?.shape(CheckBoxShape.ROUNDED_SQUARE) 6253 col.appendChild(checkbox) 6254 col.appendChild(checkbox1) 6255 return node; 6256 } 6257} 6258 6259@Entry 6260@Component 6261struct FrameNodeTypeTest { 6262 private myCheckboxController: MyCheckboxController = new MyCheckboxController(); 6263 6264 build() { 6265 Column({ space: 5 }) { 6266 Text('CheckboxSample') 6267 NodeContainer(this.myCheckboxController); 6268 }.width('100%') 6269 } 6270} 6271``` 6272 6273### CheckboxGroup<sup>18+</sup> 6274 6275type CheckboxGroup = TypedFrameNode<CheckboxGroupInterface, CheckboxGroupAttribute> 6276 6277CheckboxGroup类型的FrameNode节点类型。 6278 6279**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6280 6281**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6282 6283| 类型 | 说明 | 6284| ----------------------------- | -------------------- | 6285| TypedFrameNode<[CheckboxGroupInterface](./arkui-ts/ts-basic-components-checkboxgroup.md#接口), [CheckboxGroupAttribute](./arkui-ts/ts-basic-components-checkboxgroup.md#属性)> | 提供CheckboxGroup类型FrameNode节点。<br/>**说明：**<br/> CheckboxGroupInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为CheckboxGroup组件的构造函数类型。 <br/> CheckboxGroupAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回CheckboxGroup组件的属性设置对象。 | 6286 6287### createNode('CheckboxGroup')<sup>18+</sup> 6288 6289createNode(context: UIContext, nodeType: 'CheckboxGroup'): CheckboxGroup 6290 6291创建CheckboxGroup类型的FrameNode节点。 6292 6293**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6294 6295**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6296 6297**参数：** 6298 6299| 参数名 | 类型 | 必填 | 说明 | 6300| ------------------ | ------------------ | ------------------- | ------------------- | 6301| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 6302| nodeType | 'CheckboxGroup' | 是 | 创建CheckboxGroup类型的节点。 | 6303 6304**返回值：** 6305 6306| 类型 | 说明 | 6307| ------------------ | ------------------ | 6308| [CheckboxGroup](#checkboxgroup18) | CheckboxGroup类型的FrameNode节点。 | 6309 6310**示例：** 6311 6312```ts 6313import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 6314 6315class MyCheckboxGroupController extends NodeController { 6316 makeNode(uiContext: UIContext): FrameNode | null { 6317 let node = new FrameNode(uiContext) 6318 node.commonAttribute 6319 let col = typeNode.createNode(uiContext, 'Column') 6320 col.initialize({ space: 5 }) 6321 .width('100%') 6322 .height('100%') 6323 node.appendChild(col) 6324 let checkbox = typeNode.createNode(uiContext, 'Checkbox') 6325 checkbox.initialize({ name: 'checkbox1', group: 'checkboxGroup1' }) 6326 6327 let checkbox1 = typeNode.createNode(uiContext, 'Checkbox') 6328 checkbox1.initialize({ name: 'checkbox2', group: 'checkboxGroup1' }) 6329 6330 let checkboxGroup = typeNode.createNode(uiContext, 'CheckboxGroup') 6331 checkboxGroup.initialize({ group: 'checkboxGroup1' }) 6332 6333 col.appendChild(checkbox) 6334 col.appendChild(checkbox1) 6335 col.appendChild(checkboxGroup) 6336 return node; 6337 } 6338} 6339 6340@Entry 6341@Component 6342struct FrameNodeTypeTest { 6343 private myCheckboxGroupController: MyCheckboxGroupController = new MyCheckboxGroupController(); 6344 6345 build() { 6346 Column({ space: 5 }) { 6347 Text('CheckboxGroupSample') 6348 NodeContainer(this.myCheckboxGroupController); 6349 }.width('100%') 6350 } 6351} 6352``` 6353 6354### Rating<sup>18+</sup> 6355 6356type Rating = TypedFrameNode<RatingInterface, RatingAttribute> 6357 6358Rating类型的FrameNode节点类型。 6359 6360**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6361 6362**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6363 6364| 类型 | 说明 | 6365| ----------------------------- | -------------------- | 6366| TypedFrameNode<[RatingInterface](./arkui-ts/ts-basic-components-rating.md#接口), [RatingAttribute](./arkui-ts/ts-basic-components-rating.md#属性)> | 提供Rating类型FrameNode节点。<br/>**说明：**<br/> RatingInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Rating组件的构造函数类型。 <br/> RatingAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Rating组件的属性设置对象。 | 6367 6368### createNode('Rating')<sup>18+</sup> 6369 6370createNode(context: UIContext, nodeType: 'Rating'): Rating 6371 6372创建Rating类型的FrameNode节点。 6373 6374**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6375 6376**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6377 6378**参数：** 6379 6380| 参数名 | 类型 | 必填 | 说明 | 6381| ------------------ | ------------------ | ------------------- | ------------------- | 6382| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 6383| nodeType | 'Rating' | 是 | 创建Rating类型的节点。 | 6384 6385**返回值：** 6386 6387| 类型 | 说明 | 6388| ------------------ | ------------------ | 6389| [Rating](#rating18) | Rating类型的FrameNode节点。 | 6390 6391**示例：** 6392 6393```ts 6394import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 6395 6396class MyRatingController extends NodeController { 6397 makeNode(uiContext: UIContext): FrameNode | null { 6398 let node = new FrameNode(uiContext) 6399 node.commonAttribute 6400 let col = typeNode.createNode(uiContext, 'Column') 6401 col.initialize({ space: 5 }) 6402 .width('100%') 6403 .height('100%') 6404 node.appendChild(col) 6405 let rating = typeNode.createNode(uiContext, 'Rating') 6406 rating.initialize({ rating: 0 }) 6407 col.appendChild(rating) 6408 return node; 6409 } 6410} 6411 6412@Entry 6413@Component 6414struct FrameNodeTypeTest { 6415 private myRatingController: MyRatingController = new MyRatingController(); 6416 6417 build() { 6418 Column({ space: 5 }) { 6419 Text('RatingSample') 6420 6421 NodeContainer(this.myRatingController); 6422 6423 }.width('100%') 6424 } 6425} 6426``` 6427 6428### Radio<sup>18+</sup> 6429 6430type Radio = TypedFrameNode<RadioInterface, RadioAttribute> 6431 6432Radio类型的FrameNode节点类型。 6433 6434**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6435 6436**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6437 6438| 类型 | 说明 | 6439| ----------------------------- | -------------------- | 6440| TypedFrameNode<[RadioInterface](./arkui-ts/ts-basic-components-radio.md#接口), [RadioAttribute](./arkui-ts/ts-basic-components-radio.md#属性)> | 提供Radio类型FrameNode节点。<br/>**说明：**<br/> RadioInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Radio组件的构造函数类型。 <br/> RadioAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Radio组件的属性设置对象。 | 6441 6442### createNode('Radio')<sup>18+</sup> 6443 6444createNode(context: UIContext, nodeType: 'Radio'): Radio 6445 6446创建Radio类型的FrameNode节点。 6447 6448**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6449 6450**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6451 6452**参数：** 6453 6454| 参数名 | 类型 | 必填 | 说明 | 6455| ------------------ | ------------------ | ------------------- | ------------------- | 6456| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 6457| nodeType | 'Radio' | 是 | 创建Radio类型的节点。 | 6458 6459**返回值：** 6460 6461| 类型 | 说明 | 6462| ------------------ | ------------------ | 6463| [Radio](#radio18) | Radio类型的FrameNode节点。 | 6464 6465**示例：** 6466 6467```ts 6468import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 6469 6470class MyRadioController extends NodeController { 6471 makeNode(uiContext: UIContext): FrameNode | null { 6472 let node = new FrameNode(uiContext) 6473 node.commonAttribute 6474 let col = typeNode.createNode(uiContext, 'Column') 6475 col.initialize({ space: 5 }) 6476 .width('100%') 6477 .height('100%') 6478 node.appendChild(col) 6479 let radio1 = typeNode.createNode(uiContext, 'Radio') 6480 radio1.initialize({ value: 'radio1', group: 'radioGroup' }) 6481 6482 let radio2 = typeNode.createNode(uiContext, 'Radio') 6483 radio2.initialize({ value: 'radio2', group: 'radioGroup' }) 6484 6485 col.appendChild(radio1) 6486 col.appendChild(radio2) 6487 return node; 6488 } 6489} 6490 6491@Entry 6492@Component 6493struct FrameNodeTypeTest { 6494 private myRadioController: MyRadioController = new MyRadioController(); 6495 6496 build() { 6497 Column({ space: 5 }) { 6498 Text('RadioSample') 6499 NodeContainer(this.myRadioController); 6500 }.width('100%') 6501 } 6502} 6503``` 6504 6505### getAttribute('Radio')<sup>20+</sup> 6506 6507getAttribute(node: FrameNode, nodeType: 'Radio'): RadioAttribute | undefined 6508 6509获取Radio节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 6510 6511**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 6512 6513**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6514 6515**参数：** 6516 6517| 参数名 | 类型 | 必填 | 说明 | 6518| ------------------ | ------------------ | ------------------- | ------------------- | 6519| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 6520| nodeType | 'Radio' | 是 | 获取Radio节点类型的属性。 | 6521 6522**返回值：** 6523 6524| 类型 | 说明 | 6525| ------------------ | ------------------ | 6526| RadioAttribute \| undefined | Radio节点类型的属性，若获取失败，则返回undefined。 | 6527 6528**示例：** 6529 6530```ts 6531import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 6532 6533class MyRadioController extends NodeController { 6534 makeNode(uiContext: UIContext): FrameNode | null { 6535 let node = new FrameNode(uiContext) 6536 node.commonAttribute 6537 let col = typeNode.createNode(uiContext, 'Column') 6538 col.initialize({ space: 5 }) 6539 .width('100%') 6540 .height('100%') 6541 node.appendChild(col) 6542 let radio1 = typeNode.createNode(uiContext, 'Radio') 6543 radio1.initialize({ value: 'radio1', group: 'radioGroup' }) 6544 typeNode.getAttribute(radio1,'Radio')?.checked(true) 6545 let radio2 = typeNode.createNode(uiContext, 'Radio') 6546 radio2.initialize({ value: 'radio2', group: 'radioGroup' }) 6547 6548 6549 col.appendChild(radio1) 6550 col.appendChild(radio2) 6551 return node; 6552 } 6553} 6554 6555@Entry 6556@Component 6557struct FrameNodeTypeTest { 6558 private myRadioController: MyRadioController = new MyRadioController(); 6559 6560 build() { 6561 Column({ space: 5 }) { 6562 Text('RadioSample') 6563 NodeContainer(this.myRadioController); 6564 }.width('100%') 6565 } 6566} 6567``` 6568 6569### Slider<sup>18+</sup> 6570 6571type Slider = TypedFrameNode<SliderInterface, SliderAttribute> 6572 6573Slider类型的FrameNode节点类型。 6574 6575**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6576 6577**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6578 6579| 类型 | 说明 | 6580| ----------------------------- | -------------------- | 6581| TypedFrameNode<[SliderInterface](./arkui-ts/ts-basic-components-slider.md#接口), [SliderAttribute](./arkui-ts/ts-basic-components-slider.md#属性)> | 提供Slider类型FrameNode节点。<br/>**说明：**<br/> SliderInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Slider组件的构造函数类型。 <br/> SliderAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Slider组件的属性设置对象。 | 6582 6583### createNode('Slider')<sup>18+</sup> 6584 6585createNode(context: UIContext, nodeType: 'Slider'): Slider 6586 6587创建Slider类型的FrameNode节点。 6588 6589**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6590 6591**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6592 6593**参数：** 6594 6595| 参数名 | 类型 | 必填 | 说明 | 6596| ------------------ | ------------------ | ------------------- | ------------------- | 6597| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 6598| nodeType | 'Slider' | 是 | 创建Slider类型的节点。 | 6599 6600**返回值：** 6601 6602| 类型 | 说明 | 6603| ------------------ | ------------------ | 6604| [Slider](#slider18) | Slider类型的FrameNode节点。 | 6605 6606**示例：** 6607 6608```ts 6609import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 6610 6611class MySliderController extends NodeController { 6612 makeNode(uiContext: UIContext): FrameNode | null { 6613 let node = new FrameNode(uiContext) 6614 node.commonAttribute 6615 let col = typeNode.createNode(uiContext, 'Column') 6616 col.initialize({ space: 5 }) 6617 .width('100%') 6618 .height('100%') 6619 node.appendChild(col) 6620 let slider = typeNode.createNode(uiContext, 'Slider') 6621 slider.initialize({value:50}) 6622 col.appendChild(slider) 6623 return node; 6624 } 6625} 6626 6627@Entry 6628@Component 6629struct FrameNodeTypeTest { 6630 private mySliderController: MySliderController = new MySliderController(); 6631 6632 build() { 6633 Column({ space: 5 }) { 6634 Text('SliderSample') 6635 NodeContainer(this.mySliderController); 6636 6637 }.width('100%') 6638 } 6639} 6640``` 6641 6642### getAttribute('Slider')<sup>20+</sup> 6643 6644getAttribute(node: FrameNode, nodeType: 'Slider'): SliderAttribute | undefined 6645 6646获取Slider节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 6647 6648**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 6649 6650**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6651 6652**参数：** 6653 6654| 参数名 | 类型 | 必填 | 说明 | 6655| ------------------ | ------------------ | ------------------- | ------------------- | 6656| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 6657| nodeType | 'Slider' | 是 | 获取Slider节点类型的属性。 | 6658 6659**返回值：** 6660 6661| 类型 | 说明 | 6662| ------------------ | ------------------ | 6663| SliderAttribute \| undefined | Slider节点类型的属性，若获取失败，则返回undefined。 | 6664 6665**示例：** 6666 6667```ts 6668import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 6669 6670class MySliderController extends NodeController { 6671 makeNode(uiContext: UIContext): FrameNode | null { 6672 let node = new FrameNode(uiContext) 6673 node.commonAttribute 6674 let col = typeNode.createNode(uiContext, 'Column') 6675 col.initialize({ space: 5 }) 6676 .width('100%') 6677 .height('100%') 6678 node.appendChild(col) 6679 let slider = typeNode.createNode(uiContext, 'Slider') 6680 slider.initialize({value:50}) 6681 typeNode.getAttribute(slider,'Slider')?.selectedColor(Color.Pink) 6682 col.appendChild(slider) 6683 return node; 6684 } 6685} 6686 6687@Entry 6688@Component 6689struct FrameNodeTypeTest { 6690 private mySliderController: MySliderController = new MySliderController(); 6691 6692 build() { 6693 Column({ space: 5 }) { 6694 Text('SliderSample') 6695 NodeContainer(this.mySliderController); 6696 6697 }.width('100%') 6698 } 6699} 6700``` 6701 6702### Select<sup>18+</sup> 6703 6704type Select = TypedFrameNode<SelectInterface, SelectAttribute> 6705 6706Select类型的FrameNode节点类型。 6707 6708**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6709 6710**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6711 6712| 类型 | 说明 | 6713| ----------------------------- | -------------------- | 6714| TypedFrameNode<[SelectInterface](./arkui-ts/ts-basic-components-select.md#接口), [SelectAttribute](./arkui-ts/ts-basic-components-select.md#属性)> | 提供Select类型FrameNode节点。<br/>**说明：**<br/> SelectInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Select组件的构造函数类型。 <br/> SelectAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Select组件的属性设置对象。 | 6715 6716### createNode('Select')<sup>18+</sup> 6717 6718createNode(context: UIContext, nodeType: 'Select'): Select 6719 6720创建Select类型的FrameNode节点。 6721 6722**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6723 6724**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6725 6726**参数：** 6727 6728| 参数名 | 类型 | 必填 | 说明 | 6729| ------------------ | ------------------ | ------------------- | ------------------- | 6730| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 6731| nodeType | 'Select' | 是 | 创建Select类型的节点。 | 6732 6733**返回值：** 6734 6735| 类型 | 说明 | 6736| ------------------ | ------------------ | 6737| [Select](#select18) | Select类型的FrameNode节点。 | 6738 6739**示例：** 6740 6741```ts 6742import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 6743 6744class MySelectController extends NodeController { 6745 makeNode(uiContext: UIContext): FrameNode | null { 6746 let node = new FrameNode(uiContext) 6747 node.commonAttribute 6748 let col = typeNode.createNode(uiContext, 'Column') 6749 col.initialize({ space: 5 }) 6750 .width('100%') 6751 .height('100%') 6752 node.appendChild(col) 6753 let select = typeNode.createNode(uiContext, 'Select') 6754 select.initialize([{ value: "option one" }, { value: "option two" }, { value: "option three" }]) 6755 col.appendChild(select) 6756 return node; 6757 } 6758} 6759 6760@Entry 6761@Component 6762struct FrameNodeTypeTest { 6763 private mySelectController: MySelectController = new MySelectController(); 6764 6765 build() { 6766 Column({ space: 5 }) { 6767 Text('SelectSample') 6768 NodeContainer(this.mySelectController); 6769 }.width('100%') 6770 } 6771} 6772``` 6773 6774### Toggle<sup>18+</sup> 6775 6776type Toggle = TypedFrameNode<ToggleInterface, ToggleAttribute> 6777 6778Toggle类型的FrameNode节点类型。 6779 6780**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6781 6782**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6783 6784| 类型 | 说明 | 6785| ----------------------------- | -------------------- | 6786| TypedFrameNode<[ToggleInterface](./arkui-ts/ts-basic-components-toggle.md#接口), [ToggleAttribute](./arkui-ts/ts-basic-components-toggle.md#属性)> | 提供Toggle类型FrameNode节点。<br/>**说明：**<br/> ToggleInterface用于[TypedFrameNode](#typedframenode12)的[initialize](#属性)接口的入参，入参为Toggle组件的构造函数类型。 <br/> ToggleAttribute用于TypedFrameNode的[attribute](#属性)接口的返回值，返回Toggle组件的属性设置对象。 | 6787 6788### createNode('Toggle')<sup>18+</sup> 6789 6790createNode(context: UIContext, nodeType: 'Toggle', options?: ToggleOptions): Toggle 6791 6792创建Toggle类型的FrameNode节点。 6793 6794**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 6795 6796**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6797 6798**参数：** 6799 6800| 参数名 | 类型 | 必填 | 说明 | 6801| ------------------ | ------------------ | ------------------- | ------------------- | 6802| context | [UIContext](./arkts-apis-uicontext-uicontext.md) | 是 | 创建对应节点时所需的UI上下文。 | 6803| nodeType | 'Toggle' | 是 | 创建Toggle类型的节点。 | 6804| options | [ToggleOptions](./arkui-ts/ts-basic-components-toggle.md#toggleoptions18对象说明) | 否 | 创建Toggle节点的接口参数，仅可通过ToggleOptions中的type属性设置开关样式。 | 6805 6806**返回值：** 6807 6808| 类型 | 说明 | 6809| ------------------ | ------------------ | 6810| [Toggle](#toggle18) | Toggle类型的FrameNode节点。 | 6811 6812**示例：** 6813 6814```ts 6815import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 6816 6817class MyToggleController extends NodeController { 6818 makeNode(uiContext: UIContext): FrameNode | null { 6819 let node = new FrameNode(uiContext) 6820 node.commonAttribute 6821 let col = typeNode.createNode(uiContext, 'Column') 6822 col.initialize({ space: 5 }) 6823 .width('100%') 6824 .height('100%') 6825 node.appendChild(col) 6826 let toggleSwitch = typeNode.createNode(uiContext, 'Toggle') 6827 toggleSwitch.initialize({ type: ToggleType.Switch }) 6828 col.appendChild(toggleSwitch) 6829 6830 return node; 6831 } 6832} 6833 6834@Entry 6835@Component 6836struct FrameNodeTypeTest { 6837 private myToggleController: MyToggleController = new MyToggleController(); 6838 6839 build() { 6840 Column({ space: 5 }) { 6841 Text('ToggleSample') 6842 NodeContainer(this.myToggleController); 6843 6844 }.width('100%') 6845 } 6846} 6847``` 6848 6849### getAttribute('Toggle')<sup>20+</sup> 6850 6851getAttribute(node: FrameNode, nodeType: 'Toggle'): ToggleAttribute | undefined 6852 6853获取Toggle节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 6854 6855**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 6856 6857**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6858 6859**参数：** 6860 6861| 参数名 | 类型 | 必填 | 说明 | 6862| ------------------ | ------------------ | ------------------- | ------------------- | 6863| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | 6864| nodeType | 'Toggle' | 是 | 获取Toggle节点类型的属性。 | 6865 6866**返回值：** 6867 6868| 类型 | 说明 | 6869| ------------------ | ------------------ | 6870| ToggleAttribute \| undefined | Toggle节点类型的属性，若获取失败，则返回undefined。 | 6871 6872**示例：** 6873 6874```ts 6875import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 6876 6877class MyToggleController extends NodeController { 6878 makeNode(uiContext: UIContext): FrameNode | null { 6879 let node = new FrameNode(uiContext) 6880 node.commonAttribute 6881 let col = typeNode.createNode(uiContext, 'Column') 6882 col.initialize({ space: 5 }) 6883 .width('100%') 6884 .height('100%') 6885 node.appendChild(col) 6886 let toggleSwitch = typeNode.createNode(uiContext, 'Toggle') 6887 toggleSwitch.initialize({ type: ToggleType.Switch }) 6888 typeNode.getAttribute(toggleSwitch,'Toggle')?.selectedColor(Color.Orange) 6889 col.appendChild(toggleSwitch) 6890 return node; 6891 } 6892} 6893 6894@Entry 6895@Component 6896struct FrameNodeTypeTest { 6897 private myToggleController: MyToggleController = new MyToggleController(); 6898 6899 build() { 6900 Column({ space: 5 }) { 6901 Text('ToggleSample') 6902 NodeContainer(this.myToggleController); 6903 6904 }.width('100%') 6905 } 6906} 6907``` 6908 6909## NodeAdapter<sup>12+</sup> 6910 6911NodeAdapter提供FrameNode的数据懒加载能力。 6912 6913> **说明：** 6914> 6915> 入参不能为负数，入参为负数时不做处理。 6916 6917**示例：** 6918 6919请参考[NodeAdapter使用示例](#nodeadapter使用示例)。 6920 6921### constructor<sup>12+</sup> 6922 6923constructor() 6924 6925NodeAdapter的构造函数。 6926 6927**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 6928 6929**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6930 6931### dispose<sup>12+</sup> 6932 6933dispose(): void 6934 6935立即释放当前的NodeAdapter。如果是已绑定的状态，会先进行解绑操作，再释放当前的NodeAdapter。 6936 6937**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 6938 6939**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6940 6941### totalNodeCount<sup>12+</sup> 6942 6943set totalNodeCount(count: number) 6944 6945设置数据节点总数。 6946 6947**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 6948 6949**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6950 6951**参数：** 6952 6953| 参数名 | 类型 | 必填 | 说明 | 6954| ------- | ------------------------------------------------------ | ---- | ---------------- | 6955| count | number | 是 | 数据节点总数。<br/>取值范围：[0, +∞) | 6956 6957get totalNodeCount(): number 6958 6959获取数据节点总数。 6960 6961**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 6962 6963**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6964 6965**返回值：** 6966 6967| 类型 | 说明 | 6968| ----------------- | ------------ | 6969| number | 数据节点总数。<br/>取值范围：[0, +∞) | 6970 6971### reloadAllItems<sup>12+</sup> 6972 6973reloadAllItems(): void 6974 6975重新加载全部数据操作。 6976 6977**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 6978 6979**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6980 6981### reloadItem<sup>12+</sup> 6982 6983reloadItem(start: number, count: number): void 6984 6985从索引值开始重新加载指定数量的节点数据。 6986 6987**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 6988 6989**系统能力：** SystemCapability.ArkUI.ArkUI.Full 6990 6991**参数：** 6992 6993| 参数名 | 类型 | 必填 | 说明 | 6994| ------- | ------------------------------------------------------ | ---- | ---------------- | 6995| start | number | 是 | 重新加载的节点开始索引值。<br/>取值范围：[0, +∞) | 6996| count | number | 是 | 重新加载数据节点的数量。<br/>取值范围：[0, +∞) | 6997 6998### removeItem<sup>12+</sup> 6999 7000removeItem(start: number, count: number): void 7001 7002从索引值开始删除指定数量的节点数据。 7003 7004**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 7005 7006**系统能力：** SystemCapability.ArkUI.ArkUI.Full 7007 7008**参数：** 7009 7010| 参数名 | 类型 | 必填 | 说明 | 7011| ------- | ------------------------------------------------------ | ---- | ---------------- | 7012| start | number | 是 | 删除的节点开始索引值。<br/>取值范围：[0, +∞) | 7013| count | number | 是 | 删除数据节点的数量。<br/>取值范围：[0, +∞) | 7014 7015### insertItem<sup>12+</sup> 7016 7017insertItem(start: number, count: number): void 7018 7019从索引值开始新增指定数量的节点数据。 7020 7021**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 7022 7023**系统能力：** SystemCapability.ArkUI.ArkUI.Full 7024 7025**参数：** 7026 7027| 参数名 | 类型 | 必填 | 说明 | 7028| ------- | ------------------------------------------------------ | ---- | ---------------- | 7029| start | number | 是 | 新增的节点开始索引值。<br/>取值范围：[0, +∞) | 7030| count | number | 是 | 新增数据节点的数量。<br/>取值范围：[0, +∞) | 7031 7032### moveItem<sup>12+</sup> 7033 7034moveItem(from: number, to: number): void 7035 7036将数据从原始索引移动到目的索引。 7037 7038**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 7039 7040**系统能力：** SystemCapability.ArkUI.ArkUI.Full 7041 7042**参数：** 7043 7044| 参数名 | 类型 | 必填 | 说明 | 7045| ------- | ------------------------------------------------------ | ---- | ---------------- | 7046| from | number | 是 | 数据移动的原始索引值。<br/>取值范围：[0, +∞) | 7047| to | number | 是 | 数据移动的目的索引值。<br/>取值范围：[0, +∞) | 7048 7049### getAllAvailableItems<sup>12+</sup> 7050 7051getAllAvailableItems(): Array<FrameNode> 7052 7053获取所有有效数据。 7054 7055**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 7056 7057**系统能力：** SystemCapability.ArkUI.ArkUI.Full 7058 7059**返回值：** 7060 7061| 类型 | 说明 | 7062| ----------------- | ------------ | 7063| Array<FrameNode> | FrameNode数据节点集合。 | 7064 7065### onAttachToNode<sup>12+</sup> 7066 7067onAttachToNode?(target: FrameNode): void 7068 7069FrameNode绑定NodeAdapter时回调。 7070 7071**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 7072 7073**系统能力：** SystemCapability.ArkUI.ArkUI.Full 7074 7075**参数：** 7076 7077| 参数名 | 类型 | 必填 | 说明 | 7078| ------- | ------------------------------------------------------ | ---- | ---------------- | 7079| target | FrameNode | 是 | 绑定NodeAdapter的FrameNode节点。 | 7080 7081### onDetachFromNode<sup>12+</sup> 7082 7083onDetachFromNode?(): void 7084 7085解除绑定时回调。 7086 7087**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 7088 7089**系统能力：** SystemCapability.ArkUI.ArkUI.Full 7090 7091### onGetChildId<sup>12+</sup> 7092 7093onGetChildId?(index: number): number 7094 7095节点首次加载或新节点滑入时回调。用于生成自定义的Id，需要开发者自行保证Id的唯一性。 7096 7097**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 7098 7099**系统能力：** SystemCapability.ArkUI.ArkUI.Full 7100 7101**参数：** 7102 7103| 参数名 | 类型 | 必填 | 说明 | 7104| ------- | ------------------------------------------------------ | ---- | ---------------- | 7105| index | number | 是 | 加载节点索引值。<br/>取值范围：[0, +∞) | 7106 7107**返回值：** 7108 7109| 类型 | 说明 | 7110| ----------------- | ------------ | 7111| number | 返回开发者自定义生成的Id，需要开发者自行保证Id的唯一性。 | 7112 7113### onCreateChild<sup>12+</sup> 7114 7115onCreateChild?(index: number): FrameNode 7116 7117节点首次加载或新节点滑入时回调。建议开发者在添加子组件时，遵循声明式组件中子组件的约束。例如，WaterFlow支持添加FlowItem子节点。 7118 7119**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 7120 7121**系统能力：** SystemCapability.ArkUI.ArkUI.Full 7122 7123**参数：** 7124 7125| 参数名 | 类型 | 必填 | 说明 | 7126| ------- | ------------------------------------------------------ | ---- | ---------------- | 7127| index | number | 是 | 加载节点索引值。<br/>取值范围：[0, +∞) | 7128 7129**返回值：** 7130 7131| 类型 | 说明 | 7132| ----------------- | ------------ | 7133| FrameNode | 返回开发者创建的FrameNode节点。 | 7134 7135### onDisposeChild<sup>12+</sup> 7136 7137onDisposeChild?(id: number, node: FrameNode): void 7138 7139子节点即将销毁时回调。 7140 7141**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 7142 7143**系统能力：** SystemCapability.ArkUI.ArkUI.Full 7144 7145**参数：** 7146 7147| 参数名 | 类型 | 必填 | 说明 | 7148| ------- | ------------------------------------------------------ | ---- | ---------------- | 7149| id | number | 是 | 即将销毁的子节点id。 | 7150| node | FrameNode | 是 | 即将销毁的FrameNode节点。 | 7151 7152### onUpdateChild<sup>12+</sup> 7153 7154onUpdateChild?(id: number, node: FrameNode): void 7155 7156重新加载的数据节点被复用时回调。 7157 7158**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 7159 7160**系统能力：** SystemCapability.ArkUI.ArkUI.Full 7161 7162**参数：** 7163 7164| 参数名 | 类型 | 必填 | 说明 | 7165| ------- | ------------------------------------------------------ | ---- | ---------------- | 7166| id | number | 是 | 复用节点的id。 | 7167| node | FrameNode | 是 | 被复用的FrameNode节点。 | 7168 7169### attachNodeAdapter<sup>12+</sup> 7170 7171static attachNodeAdapter(adapter: NodeAdapter, node: FrameNode): boolean 7172 7173给FrameNode绑定一个NodeAdapter。一个节点只能绑定一个NodeAdapter。已经绑定NodeAdapter的再次绑定会失败并返回false。 7174 7175> **说明：** 7176> 7177> 支持绑定的组件：Column、Row、Stack、GridRow、Flex、Swiper、RelativeContainer、List、ListItemGroup、WaterFlow、Grid。 7178 7179**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 7180 7181**系统能力：** SystemCapability.ArkUI.ArkUI.Full 7182 7183**参数：** 7184 7185| 参数名 | 类型 | 必填 | 说明 | 7186| ------- | ------------------------------------------------------ | ---- | ---------------- | 7187| adapter | [NodeAdapter](#nodeadapter12) | 是 | 定义懒加载的NodeAdapter类。 | 7188| node | FrameNode | 是 | 绑定的FrameNode节点。 | 7189 7190**返回值：** 7191 7192| 类型 | 说明 | 7193| ----------------- | ------------ | 7194| boolean | 绑定结果，返回true绑定成功，false绑定失败。 | 7195 7196### detachNodeAdapter<sup>12+</sup> 7197 7198static detachNodeAdapter(node: FrameNode): void 7199 7200解除绑定操作，解除FrameNode节点绑定的NodeAdapter。 7201 7202**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 7203 7204**系统能力：** SystemCapability.ArkUI.ArkUI.Full 7205 7206**参数：** 7207 7208| 参数名 | 类型 | 必填 | 说明 | 7209| ------- | ------------------------------------------------------ | ---- | ---------------- | 7210| node | FrameNode | 是 | 要解除绑定的FrameNode节点。 | 7211 7212### isDisposed<sup>20+</sup> 7213 7214isDisposed(): boolean 7215 7216查询当前NodeAdapter对象是否已解除与后端实体节点的引用关系。前端节点均绑定有相应的后端实体节点，当节点调用dispose接口解除绑定后，再次调用接口可能会出现crash、返回默认值的情况。由于业务需求，可能存在节点在dispose后仍被调用接口的情况。为此，提供此接口以供开发者在操作节点前检查其有效性，避免潜在风险。 7217 7218**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 7219 7220**系统能力：** SystemCapability.ArkUI.ArkUI.Full 7221 7222**返回值：** 7223 7224| 类型 | 说明 | 7225| ------- | ------------------ | 7226| boolean | 后端实体节点是否解除引用。true为节点已与后端实体节点解除引用，false为节点未与后端实体节点解除引用。 7227 7228**示例：** 7229 7230请参考[检验NodeAdapter是否有效示例](#检验nodeadapter是否有效示例)。 7231 7232## 自定义具体类型节点示例 7233 7234以Text节点为例，创建Text类型节点。 7235 7236```ts 7237import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 7238 7239class MyNodeController extends NodeController { 7240 makeNode(uiContext: UIContext): FrameNode | null { 7241 let node = new FrameNode(uiContext); 7242 node.commonAttribute.width(100) 7243 .height(50) 7244 .borderColor(Color.Gray) 7245 .borderWidth(1) 7246 .margin({ left: 10 }); 7247 let col = typeNode.createNode(uiContext, 'Column'); 7248 col.initialize({ space: 5 }) 7249 .width('100%').height('100%').margin({ top: 5 }); 7250 node.appendChild(col); 7251 let text = typeNode.createNode(uiContext, 'Text'); 7252 text.initialize("Hello").fontColor(Color.Blue).fontSize(14); 7253 col.appendChild(text); 7254 return node; 7255 } 7256} 7257 7258@Entry 7259@Component 7260struct FrameNodeTypeTest { 7261 private myNodeController: MyNodeController = new MyNodeController(); 7262 7263 build() { 7264 Row() { 7265 NodeContainer(this.myNodeController); 7266 } 7267 } 7268} 7269``` 7270 7271 7272 7273## 节点操作示例 7274```ts 7275import { NodeController, FrameNode, UIContext, typeNode } from '@kit.ArkUI'; 7276import { BusinessError } from '@kit.BasicServicesKit'; 7277 7278const TEST_TAG: string = "FrameNode " 7279 7280class MyNodeController extends NodeController { 7281 public frameNode: FrameNode | null = null; 7282 public childList: Array<FrameNode> = new Array<FrameNode>(); 7283 private rootNode: FrameNode | null = null; 7284 private uiContext: UIContext | null = null; 7285 private childrenCount: number = 0; 7286 7287 makeNode(uiContext: UIContext): FrameNode | null { 7288 this.rootNode = new FrameNode(uiContext); 7289 this.uiContext = uiContext; 7290 7291 this.frameNode = new FrameNode(uiContext); 7292 this.frameNode.commonAttribute.backgroundColor(Color.Pink); 7293 this.frameNode.commonAttribute.size({ width: 100, height: 100 }); 7294 this.addCommonEvent(this.frameNode) 7295 this.rootNode.appendChild(this.frameNode); 7296 this.childrenCount = this.childrenCount + 1; 7297 for (let i = 0; i < 10; i++) { 7298 let childNode = new FrameNode(uiContext); 7299 this.childList.push(childNode); 7300 this.frameNode.appendChild(childNode); 7301 } 7302 let stackNode = typeNode.createNode(uiContext, "Stack"); 7303 this.frameNode.appendChild(stackNode); 7304 return this.rootNode; 7305 } 7306 7307 addCommonEvent(frameNode: FrameNode) { 7308 frameNode.commonEvent.setOnClick((event: ClickEvent) => { 7309 console.info(`Click FrameNode: ${JSON.stringify(event)}`) 7310 }) 7311 } 7312 7313 createFrameNode() { 7314 let frameNode = new FrameNode(this.uiContext!); 7315 frameNode.commonAttribute.backgroundColor(Color.Pink); 7316 frameNode.commonAttribute.size({ width: 100, height: 100 }); 7317 frameNode.commonAttribute.position({ x: this.childrenCount * 120, y: 0 }); 7318 7319 return frameNode; 7320 } 7321 7322 appendChild() { 7323 const childNode = this.createFrameNode(); 7324 this.rootNode!.appendChild(childNode); 7325 this.childrenCount = this.childrenCount + 1; 7326 } 7327 7328 insertChildAfter(index: number) { 7329 let insertNode = this.createFrameNode(); 7330 let childNode = this.rootNode!.getChild(index); 7331 this.rootNode!.insertChildAfter(insertNode, childNode); 7332 this.childrenCount = this.childrenCount + 1; 7333 } 7334 7335 removeChild(index: number) { 7336 let childNode = this.rootNode!.getChild(index); 7337 if (childNode == null) { 7338 console.info(`${TEST_TAG} getchild at index {${index}} : fail`); 7339 return; 7340 } 7341 this.rootNode!.removeChild(childNode); 7342 this.childrenCount = this.childrenCount - 1; 7343 } 7344 7345 getChildNumber() { 7346 console.info(TEST_TAG + " getChildNumber " + this.rootNode!.getChildrenCount()) 7347 console.info(TEST_TAG + " children count is " + this.childrenCount); 7348 } 7349 7350 clearChildren() { 7351 this.rootNode!.clearChildren(); 7352 } 7353 7354 searchFrameNode() { 7355 if (this.rootNode!.getFirstChild() === null) { 7356 console.info(TEST_TAG + " the rootNode does not have child node.") 7357 } 7358 if (this.rootNode!.getFirstChild() === this.frameNode) { 7359 console.info(TEST_TAG + 7360 " getFirstChild result: success. The first child of the rootNode is equals to frameNode."); 7361 } else { 7362 console.info(TEST_TAG + 7363 " getFirstChild result: fail. The first child of the rootNode is not equals to frameNode."); 7364 } 7365 if (this.frameNode!.getChild(5) === this.frameNode!.getChild(4)!.getNextSibling()) { 7366 console.info(TEST_TAG + " getNextSibling result: success."); 7367 } else { 7368 console.info(TEST_TAG + " getNextSibling result: fail."); 7369 } 7370 if (this.frameNode!.getChild(3) === this.frameNode!.getChild(4)!.getPreviousSibling()) { 7371 console.info(TEST_TAG + " getPreviousSibling result: success."); 7372 } else { 7373 console.info(TEST_TAG + " getPreviousSibling result: fail."); 7374 } 7375 if (this.rootNode!.getFirstChild() !== null && this.rootNode!.getFirstChild()!.getParent() === this.rootNode) { 7376 console.info(TEST_TAG + " getParent result: success."); 7377 } else { 7378 console.info(TEST_TAG + " getParent result: fail."); 7379 } 7380 if (this.rootNode!.getParent() !== undefined || this.rootNode!.getParent() !== null) { 7381 console.info(TEST_TAG + " get ArkTsNode success.") 7382 console.info(TEST_TAG + " check rootNode whether is modifiable " + this.rootNode!.isModifiable()) 7383 console.info(TEST_TAG + " check getParent whether is modifiable " + this.rootNode!.getParent()!.isModifiable()) 7384 } else { 7385 console.info(TEST_TAG + " get ArkTsNode fail."); 7386 } 7387 } 7388 7389 moveFrameNode() { 7390 const currentNode = this.frameNode!.getChild(10); 7391 try { 7392 currentNode!.moveTo(this.rootNode, 0); 7393 if (this.rootNode!.getChild(0) === currentNode) { 7394 console.info(TEST_TAG + " moveTo result: success."); 7395 } else { 7396 console.info(TEST_TAG + " moveTo result: fail."); 7397 } 7398 } catch (err) { 7399 console.info(TEST_TAG + " " + (err as BusinessError).code + " : " + (err as BusinessError).message); 7400 console.info(TEST_TAG + " moveTo result: fail."); 7401 } 7402 } 7403 7404 getPositionToWindow() { 7405 let positionToWindow = this.rootNode?.getPositionToWindow(); 7406 console.info(TEST_TAG + JSON.stringify(positionToWindow)); 7407 } 7408 7409 getPositionToParent() { 7410 let positionToParent = this.rootNode?.getPositionToParent(); 7411 console.info(TEST_TAG + JSON.stringify(positionToParent)); 7412 } 7413 7414 getPositionToScreen() { 7415 let positionToScreen = this.rootNode?.getPositionToScreen(); 7416 console.info(TEST_TAG + JSON.stringify(positionToScreen)); 7417 } 7418 7419 getGlobalPositionOnDisplay() { 7420 let positionOnGlobalDisplay = this.rootNode?.getGlobalPositionOnDisplay(); 7421 console.info(TEST_TAG + JSON.stringify(positionOnGlobalDisplay)); 7422 } 7423 7424 getPositionToWindowWithTransform() { 7425 let positionToWindowWithTransform = this.rootNode?.getPositionToWindowWithTransform(); 7426 console.info(TEST_TAG + JSON.stringify(positionToWindowWithTransform)); 7427 } 7428 7429 getPositionToParentWithTransform() { 7430 let positionToParentWithTransform = this.rootNode?.getPositionToParentWithTransform(); 7431 console.info(TEST_TAG + JSON.stringify(positionToParentWithTransform)); 7432 } 7433 7434 getPositionToScreenWithTransform() { 7435 let positionToScreenWithTransform = this.rootNode?.getPositionToScreenWithTransform(); 7436 console.info(TEST_TAG + JSON.stringify(positionToScreenWithTransform)); 7437 } 7438 7439 getMeasuredSize() { 7440 let measuredSize = this.frameNode?.getMeasuredSize(); 7441 console.info(TEST_TAG + JSON.stringify(measuredSize)); 7442 } 7443 7444 getLayoutPosition() { 7445 let layoutPosition = this.frameNode?.getLayoutPosition(); 7446 console.info(TEST_TAG + JSON.stringify(layoutPosition)); 7447 } 7448 7449 getUserConfigBorderWidth() { 7450 let userConfigBorderWidth = this.frameNode?.getUserConfigBorderWidth(); 7451 console.info(TEST_TAG + JSON.stringify(userConfigBorderWidth)); 7452 } 7453 7454 getUserConfigPadding() { 7455 let userConfigPadding = this.frameNode?.getUserConfigPadding(); 7456 console.info(TEST_TAG + JSON.stringify(userConfigPadding)); 7457 } 7458 7459 getUserConfigMargin() { 7460 let userConfigMargin = this.frameNode?.getUserConfigMargin(); 7461 console.info(TEST_TAG + JSON.stringify(userConfigMargin)); 7462 } 7463 7464 getUserConfigSize() { 7465 let userConfigSize = this.frameNode?.getUserConfigSize(); 7466 console.info(TEST_TAG + JSON.stringify(userConfigSize)); 7467 } 7468 7469 getId() { 7470 let id = this.frameNode?.getId(); 7471 console.info(TEST_TAG + id); 7472 } 7473 7474 getUniqueId() { 7475 let uniqueId = this.frameNode?.getUniqueId(); 7476 console.info(TEST_TAG + uniqueId); 7477 } 7478 7479 getNodeType() { 7480 let nodeType = this.frameNode?.getNodeType(); 7481 console.info(TEST_TAG + nodeType); 7482 } 7483 7484 getOpacity() { 7485 let opacity = this.frameNode?.getOpacity(); 7486 console.info(TEST_TAG + JSON.stringify(opacity)); 7487 } 7488 7489 isVisible() { 7490 let visible = this.frameNode?.isVisible(); 7491 console.info(TEST_TAG + JSON.stringify(visible)); 7492 } 7493 7494 isClipToFrame() { 7495 let clipToFrame = this.frameNode?.isClipToFrame(); 7496 console.info(TEST_TAG + JSON.stringify(clipToFrame)); 7497 } 7498 7499 isAttached() { 7500 let attached = this.frameNode?.isAttached(); 7501 console.info(TEST_TAG + JSON.stringify(attached)); 7502 } 7503 7504 getInspectorInfo() { 7505 let inspectorInfo = this.frameNode?.getInspectorInfo(); 7506 console.info(TEST_TAG + JSON.stringify(inspectorInfo)); 7507 } 7508 7509 setCrossLanguageOptions() { 7510 console.info(TEST_TAG + " getCrossLanguageOptions " + JSON.stringify(this.frameNode?.getCrossLanguageOptions())); 7511 try { 7512 this.frameNode?.setCrossLanguageOptions({ 7513 attributeSetting: true 7514 }); 7515 console.info(TEST_TAG + " setCrossLanguageOptions success."); 7516 } catch (err) { 7517 console.error(TEST_TAG + " " + (err as BusinessError).code + " : " + (err as BusinessError).message); 7518 console.error(TEST_TAG + " setCrossLanguageOptions fail."); 7519 } 7520 console.info(TEST_TAG + " getCrossLanguageOptions " + JSON.stringify(this.frameNode?.getCrossLanguageOptions())); 7521 } 7522 7523 getInteractionEventBindingInfo() { 7524 let bindingInfo = this.frameNode?.getInteractionEventBindingInfo(EventQueryType.ON_CLICK); 7525 console.info(TEST_TAG + bindingInfo?.baseEventRegistered); 7526 console.info(TEST_TAG + bindingInfo?.nodeEventRegistered); 7527 console.info(TEST_TAG + bindingInfo?.nativeEventRegistered); 7528 console.info(TEST_TAG + bindingInfo?.builtInEventRegistered); 7529 console.info(TEST_TAG + JSON.stringify(bindingInfo)); 7530 } 7531 7532 throwError() { 7533 try { 7534 this.rootNode!.getParent()!.clearChildren(); 7535 } catch (err) { 7536 console.error(TEST_TAG + " " + (err as BusinessError).code + " : " + (err as BusinessError).message); 7537 } 7538 try { 7539 this.rootNode!.getParent()!.appendChild(new FrameNode(this.uiContext)); 7540 } catch (err) { 7541 console.error(TEST_TAG + " " + (err as BusinessError).code + " : " + (err as BusinessError).message); 7542 } 7543 try { 7544 this.rootNode!.getParent()!.removeChild(this.rootNode!.getParent()!.getChild(0)); 7545 } catch (err) { 7546 console.error(TEST_TAG + " " + (err as BusinessError).code + " : " + (err as BusinessError).message); 7547 } 7548 } 7549} 7550 7551@Entry 7552@Component 7553struct Index { 7554 private myNodeController: MyNodeController = new MyNodeController(); 7555 private scroller: Scroller = new Scroller(); 7556 @State index: number = 0; 7557 7558 build() { 7559 Scroll(this.scroller) { 7560 Column({ space: 8 }) { 7561 Column() { 7562 Row() { 7563 Button("ADD") 7564 .onClick(() => { 7565 this.index++; 7566 }) 7567 Button("DEC") 7568 .onClick(() => { 7569 this.index--; 7570 }) 7571 } 7572 7573 Text("Current index is " + this.index) 7574 .textAlign(TextAlign.Center) 7575 .borderRadius(10) 7576 .backgroundColor(0xFFFFFF) 7577 .width('100%') 7578 .fontSize(16) 7579 } 7580 7581 Column() { 7582 Text("This is a NodeContainer.") 7583 .textAlign(TextAlign.Center) 7584 .borderRadius(10) 7585 .backgroundColor(0xFFFFFF) 7586 .width('100%') 7587 .fontSize(16) 7588 NodeContainer(this.myNodeController) 7589 .borderWidth(1) 7590 .width(300) 7591 .height(100) 7592 } 7593 7594 Button("appendChild") 7595 .width(300) 7596 .onClick(() => { 7597 this.myNodeController.appendChild(); 7598 }) 7599 Button("insertChildAfter") 7600 .width(300) 7601 .onClick(() => { 7602 this.myNodeController.insertChildAfter(this.index); 7603 }) 7604 Button("removeChild") 7605 .width(300) 7606 .onClick(() => { 7607 this.myNodeController.removeChild(this.index); 7608 }) 7609 Button("clearChildren") 7610 .width(300) 7611 .onClick(() => { 7612 this.myNodeController.clearChildren(); 7613 }) 7614 Button("getChildNumber") 7615 .width(300) 7616 .onClick(() => { 7617 this.myNodeController.getChildNumber(); 7618 }) 7619 Button("searchFrameNode") 7620 .width(300) 7621 .onClick(() => { 7622 this.myNodeController.searchFrameNode(); 7623 }) 7624 Button("moveFrameNode") 7625 .width(300) 7626 .onClick(() => { 7627 this.myNodeController.moveFrameNode(); 7628 }) 7629 Button("getPositionToWindow") 7630 .width(300) 7631 .onClick(() => { 7632 this.myNodeController.getPositionToWindow(); 7633 }) 7634 Button("getPositionToParent") 7635 .width(300) 7636 .onClick(() => { 7637 this.myNodeController.getPositionToParent(); 7638 }) 7639 Button("getPositionToScreen") 7640 .width(300) 7641 .onClick(() => { 7642 this.myNodeController.getPositionToScreen(); 7643 }) 7644 Button("getGlobalPositionOnDisplay") 7645 .width(300) 7646 .onClick(() => { 7647 this.myNodeController.getGlobalPositionOnDisplay(); 7648 }) 7649 Button("getPositionToParentWithTransform") 7650 .width(300) 7651 .onClick(() => { 7652 this.myNodeController.getPositionToParentWithTransform(); 7653 }) 7654 Button("getPositionToWindowWithTransform") 7655 .width(300) 7656 .onClick(() => { 7657 this.myNodeController.getPositionToWindowWithTransform(); 7658 }) 7659 Button("getPositionToScreenWithTransform") 7660 .width(300) 7661 .onClick(() => { 7662 this.myNodeController.getPositionToScreenWithTransform(); 7663 }) 7664 Button("getMeasuredSize") 7665 .width(300) 7666 .onClick(() => { 7667 this.myNodeController.getMeasuredSize(); 7668 }) 7669 Button("getLayoutPosition") 7670 .width(300) 7671 .onClick(() => { 7672 this.myNodeController.getLayoutPosition(); 7673 }) 7674 Button("getUserConfigBorderWidth") 7675 .width(300) 7676 .onClick(() => { 7677 this.myNodeController.getUserConfigBorderWidth(); 7678 }) 7679 Button("getUserConfigPadding") 7680 .width(300) 7681 .onClick(() => { 7682 this.myNodeController.getUserConfigPadding(); 7683 }) 7684 Button("getUserConfigMargin") 7685 .width(300) 7686 .onClick(() => { 7687 this.myNodeController.getUserConfigMargin(); 7688 }) 7689 Button("getUserConfigSize") 7690 .width(300) 7691 .onClick(() => { 7692 this.myNodeController.getUserConfigSize(); 7693 }) 7694 Button("getId") 7695 .width(300) 7696 .onClick(() => { 7697 this.myNodeController.getId(); 7698 }) 7699 Button("getUniqueId") 7700 .width(300) 7701 .onClick(() => { 7702 this.myNodeController.getUniqueId(); 7703 }) 7704 Button("getNodeType") 7705 .width(300) 7706 .onClick(() => { 7707 this.myNodeController.getNodeType(); 7708 }) 7709 Button("getOpacity") 7710 .width(300) 7711 .onClick(() => { 7712 this.myNodeController.getOpacity(); 7713 }) 7714 Button("isVisible") 7715 .width(300) 7716 .onClick(() => { 7717 this.myNodeController.isVisible(); 7718 }) 7719 Button("isClipToFrame") 7720 .width(300) 7721 .onClick(() => { 7722 this.myNodeController.isClipToFrame(); 7723 }) 7724 Button("isAttached") 7725 .width(300) 7726 .onClick(() => { 7727 this.myNodeController.isAttached(); 7728 }) 7729 Button("getInspectorInfo") 7730 .width(300) 7731 .onClick(() => { 7732 this.myNodeController.getInspectorInfo(); 7733 }) 7734 Button("getCustomProperty") 7735 .width(300) 7736 .onClick(() => { 7737 const uiContext: UIContext = this.getUIContext(); 7738 if (uiContext) { 7739 const node: FrameNode | null = uiContext.getFrameNodeById("Test_Button") || null; 7740 if (node) { 7741 for (let i = 1; i < 4; i++) { 7742 const key = 'customProperty' + i; 7743 const property = node.getCustomProperty(key); 7744 console.info(TEST_TAG + key, JSON.stringify(property)); 7745 } 7746 } 7747 } 7748 }) 7749 .id('Test_Button') 7750 .customProperty('customProperty1', { 7751 'number': 10, 7752 'string': 'this is a string', 7753 'bool': true, 7754 'object': { 7755 'name': 'name', 7756 'value': 100 7757 } 7758 }) 7759 .customProperty('customProperty2', {}) 7760 .customProperty('customProperty2', undefined) 7761 Button("setCrossLanguageOptions") 7762 .width(300) 7763 .onClick(() => { 7764 this.myNodeController.setCrossLanguageOptions(); 7765 }) 7766 Button("getInteractionEventBindingInfo") 7767 .width(300) 7768 .onClick(() => { 7769 this.myNodeController.getInteractionEventBindingInfo(); 7770 }) 7771 Button("throwError") 7772 .width(300) 7773 .onClick(() => { 7774 this.myNodeController.throwError(); 7775 }) 7776 } 7777 .width("100%") 7778 } 7779 .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 7780 } 7781} 7782``` 7783 7784## LazyForEach场景节点操作示例 7785 7786```ts 7787import { NodeController, FrameNode, UIContext, BuilderNode, ExpandMode, LengthUnit } from '@kit.ArkUI'; 7788 7789const TEST_TAG: string = "FrameNode " 7790 7791// BasicDataSource实现了IDataSource接口，用于管理listener监听，以及通知LazyForEach数据更新 7792class BasicDataSource implements IDataSource { 7793 private listeners: DataChangeListener[] = []; 7794 private originDataArray: string[] = []; 7795 7796 public totalCount(): number { 7797 return 0; 7798 } 7799 7800 public getData(index: number): string { 7801 return this.originDataArray[index]; 7802 } 7803 7804 // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听 7805 registerDataChangeListener(listener: DataChangeListener): void { 7806 if (this.listeners.indexOf(listener) < 0) { 7807 console.info('add listener'); 7808 this.listeners.push(listener); 7809 } 7810 } 7811 7812 // 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听 7813 unregisterDataChangeListener(listener: DataChangeListener): void { 7814 const pos = this.listeners.indexOf(listener); 7815 if (pos >= 0) { 7816 console.info('remove listener'); 7817 this.listeners.splice(pos, 1); 7818 } 7819 } 7820 7821 // 通知LazyForEach组件需要重载所有子组件 7822 notifyDataReload(): void { 7823 this.listeners.forEach(listener => { 7824 listener.onDataReloaded(); 7825 }) 7826 } 7827 7828 // 通知LazyForEach组件需要在index对应索引处添加子组件 7829 notifyDataAdd(index: number): void { 7830 this.listeners.forEach(listener => { 7831 listener.onDataAdd(index); 7832 // 写法2：listener.onDatasetChange([{type: DataOperationType.ADD, index: index}]); 7833 }) 7834 } 7835 7836 // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件 7837 notifyDataChange(index: number): void { 7838 this.listeners.forEach(listener => { 7839 listener.onDataChange(index); 7840 // 写法2：listener.onDatasetChange([{type: DataOperationType.CHANGE, index: index}]); 7841 }) 7842 } 7843 7844 // 通知LazyForEach组件需要在index对应索引处删除该子组件 7845 notifyDataDelete(index: number): void { 7846 this.listeners.forEach(listener => { 7847 listener.onDataDelete(index); 7848 // 写法2：listener.onDatasetChange([{type: DataOperationType.DELETE, index: index}]); 7849 }) 7850 } 7851 7852 // 通知LazyForEach组件将from索引和to索引处的子组件进行交换 7853 notifyDataMove(from: number, to: number): void { 7854 this.listeners.forEach(listener => { 7855 listener.onDataMove(from, to); 7856 // 写法2：listener.onDatasetChange( 7857 // [{type: DataOperationType.EXCHANGE, index: {start: from, end: to}}]); 7858 }) 7859 } 7860 7861 notifyDatasetChange(operations: DataOperation[]): void { 7862 this.listeners.forEach(listener => { 7863 listener.onDatasetChange(operations); 7864 }) 7865 } 7866} 7867 7868class MyDataSource extends BasicDataSource { 7869 private dataArray: string[] = [] 7870 7871 public totalCount(): number { 7872 return this.dataArray.length; 7873 } 7874 7875 public getData(index: number): string { 7876 return this.dataArray[index]; 7877 } 7878 7879 public addData(index: number, data: string): void { 7880 this.dataArray.splice(index, 0, data); 7881 this.notifyDataAdd(index); 7882 } 7883 7884 public pushData(data: string): void { 7885 this.dataArray.push(data); 7886 this.notifyDataAdd(this.dataArray.length - 1); 7887 } 7888} 7889 7890class Params { 7891 data: MyDataSource | null = null; 7892 scroller: Scroller | null = null; 7893 constructor(data: MyDataSource, scroller: Scroller) { 7894 this.data = data; 7895 this.scroller = scroller; 7896 } 7897} 7898 7899@Builder 7900function buildData(params: Params) { 7901 List({ scroller: params.scroller }) { 7902 LazyForEach(params.data, (item: string) => { 7903 ListItem() { 7904 Column() { 7905 Text(item) 7906 .fontSize(20) 7907 .onAppear(() => { 7908 console.info(TEST_TAG + " node appear: " + item) 7909 }) 7910 .backgroundColor(Color.Pink) 7911 .margin({ 7912 top: 30, 7913 bottom: 30, 7914 left: 10, 7915 right: 10 7916 }) 7917 } 7918 } 7919 .id(item) 7920 }, (item: string) => item) 7921 } 7922 .cachedCount(5) 7923 .listDirection(Axis.Horizontal) 7924} 7925 7926class MyNodeController extends NodeController { 7927 private rootNode: FrameNode | null = null; 7928 private uiContext: UIContext | null = null; 7929 private data: MyDataSource = new MyDataSource(); 7930 private scroller: Scroller = new Scroller(); 7931 7932 makeNode(uiContext: UIContext): FrameNode | null { 7933 this.uiContext = uiContext; 7934 for (let i = 0; i <= 20; i++) { 7935 this.data.pushData(`N${i}`); 7936 } 7937 const params: Params = new Params(this.data, this.scroller); 7938 const dataNode: BuilderNode<[Params]> = new BuilderNode(uiContext); 7939 dataNode.build(wrapBuilder<[Params]>(buildData), params); 7940 this.rootNode = dataNode.getFrameNode(); 7941 const scrollToIndexOptions: ScrollToIndexOptions = { 7942 extraOffset: { 7943 value: 20, unit: LengthUnit.VP 7944 } 7945 }; 7946 this.scroller.scrollToIndex(6, true, ScrollAlign.START, scrollToIndexOptions); 7947 return this.rootNode; 7948 } 7949 7950 getFirstChildIndexWithoutExpand() { 7951 console.info(`${TEST_TAG} getFirstChildIndexWithoutExpand: ${this.rootNode!.getFirstChildIndexWithoutExpand()}`); 7952 } 7953 7954 getLastChildIndexWithoutExpand() { 7955 console.info(`${TEST_TAG} getLastChildIndexWithoutExpand: ${this.rootNode!.getLastChildIndexWithoutExpand()}`); 7956 } 7957 7958 getChildWithNotExpand() { 7959 const childNode = this.rootNode!.getChild(3, ExpandMode.NOT_EXPAND); 7960 console.info(TEST_TAG + " getChild(3, ExpandMode.NOT_EXPAND): " + childNode!.getId()); 7961 if (childNode!.getId() === "N9") { 7962 console.info(TEST_TAG + " getChild(3, ExpandMode.NOT_EXPAND) result: success."); 7963 } else { 7964 console.info(TEST_TAG + " getChild(3, ExpandMode.NOT_EXPAND) result: fail."); 7965 } 7966 } 7967 7968 getChildWithExpand() { 7969 const childNode = this.rootNode!.getChild(3, ExpandMode.EXPAND); 7970 console.info(TEST_TAG + " getChild(3, ExpandMode.EXPAND): " + childNode!.getId()); 7971 if (childNode!.getId() === "N3") { 7972 console.info(TEST_TAG + " getChild(3, ExpandMode.EXPAND) result: success."); 7973 } else { 7974 console.info(TEST_TAG + " getChild(3, ExpandMode.EXPAND) result: fail."); 7975 } 7976 } 7977 7978 getChildWithLazyExpand() { 7979 const childNode = this.rootNode!.getChild(3, ExpandMode.LAZY_EXPAND); 7980 console.info(TEST_TAG + " getChild(3, ExpandMode.LAZY_EXPAND): " + childNode!.getId()); 7981 if (childNode!.getId() === "N3") { 7982 console.info(TEST_TAG + " getChild(3, ExpandMode.LAZY_EXPAND) result: success."); 7983 } else { 7984 console.info(TEST_TAG + " getChild(3, ExpandMode.LAZY_EXPAND) result: fail."); 7985 } 7986 } 7987} 7988 7989@Entry 7990@Component 7991struct Index { 7992 private myNodeController: MyNodeController = new MyNodeController(); 7993 private scroller: Scroller = new Scroller(); 7994 7995 build() { 7996 Scroll(this.scroller) { 7997 Column({ space: 8 }) { 7998 Column() { 7999 Text("This is a NodeContainer.") 8000 .textAlign(TextAlign.Center) 8001 .borderRadius(10) 8002 .backgroundColor(0xFFFFFF) 8003 .width('100%') 8004 .fontSize(16) 8005 NodeContainer(this.myNodeController) 8006 .borderWidth(1) 8007 .width(300) 8008 .height(100) 8009 } 8010 8011 Button("getFirstChildIndexWithoutExpand") 8012 .width(300) 8013 .onClick(() => { 8014 this.myNodeController.getFirstChildIndexWithoutExpand(); 8015 }) 8016 Button("getLastChildIndexWithoutExpand") 8017 .width(300) 8018 .onClick(() => { 8019 this.myNodeController.getLastChildIndexWithoutExpand(); 8020 }) 8021 Button("getChildWithNotExpand") 8022 .width(300) 8023 .onClick(() => { 8024 this.myNodeController.getChildWithNotExpand(); 8025 }) 8026 Button("getChildWithExpand") 8027 .width(300) 8028 .onClick(() => { 8029 this.myNodeController.getChildWithExpand(); 8030 }) 8031 Button("getChildWithLazyExpand") 8032 .width(300) 8033 .onClick(() => { 8034 this.myNodeController.getChildWithLazyExpand(); 8035 }) 8036 } 8037 .width("100%") 8038 } 8039 .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 8040 } 8041} 8042``` 8043 8044## 基础事件示例 8045```ts 8046import { NodeController, FrameNode } from '@kit.ArkUI'; 8047 8048class MyNodeController extends NodeController { 8049 public rootNode: FrameNode | null = null; 8050 8051 makeNode(uiContext: UIContext): FrameNode | null { 8052 this.rootNode = new FrameNode(uiContext); 8053 this.rootNode.commonAttribute.width(100) 8054 .height(100) 8055 .backgroundColor(Color.Pink); 8056 this.addCommonEvent(this.rootNode); 8057 return this.rootNode; 8058 } 8059 8060 addCommonEvent(frameNode: FrameNode) { 8061 frameNode.commonEvent.setOnHover(((isHover: boolean, event: HoverEvent): void => { 8062 console.info(`isHover FrameNode: ${isHover}`); 8063 console.info(`isHover FrameNode: ${JSON.stringify(event)}`); 8064 event.stopPropagation(); 8065 })) 8066 frameNode.commonEvent.setOnClick((event: ClickEvent) => { 8067 console.info(`Click FrameNode: ${JSON.stringify(event)}`) 8068 }) 8069 frameNode.commonEvent.setOnTouch((event: TouchEvent) => { 8070 console.info(`touch FrameNode: ${JSON.stringify(event)}`) 8071 }) 8072 frameNode.commonEvent.setOnAppear(() => { 8073 console.info(`on Appear FrameNode`) 8074 }) 8075 frameNode.commonEvent.setOnDisappear(() => { 8076 console.info(`onDisAppear FrameNode`) 8077 }) 8078 frameNode.commonEvent.setOnFocus(() => { 8079 console.info(`onFocus FrameNode`) 8080 }) 8081 frameNode.commonEvent.setOnBlur(() => { 8082 console.info(`onBlur FrameNode`) 8083 }) 8084 frameNode.commonEvent.setOnKeyEvent((event: KeyEvent) => { 8085 console.info(`Key FrameNode: ${JSON.stringify(event)}`) 8086 }) 8087 frameNode.commonEvent.setOnMouse((event: MouseEvent) => { 8088 console.info(`Mouse FrameNode: ${JSON.stringify(event)}`) 8089 }) 8090 frameNode.commonEvent.setOnSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 8091 console.info(`onSizeChange FrameNode: oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 8092 }) 8093 } 8094} 8095 8096@Entry 8097@Component 8098struct Index { 8099 @State index: number = 0; 8100 private myNodeController: MyNodeController = new MyNodeController(); 8101 8102 build() { 8103 Column() { 8104 Button("add CommonEvent to Text") 8105 .onClick(() => { 8106 this.myNodeController!.addCommonEvent(this.myNodeController!.rootNode!.getParent()!.getPreviousSibling() !) 8107 }) 8108 Text("this is a Text") 8109 .fontSize(16) 8110 .borderWidth(1) 8111 .onHover(((isHover: boolean, event: HoverEvent): void => { 8112 console.info(`isHover Text: ${isHover}`); 8113 console.info(`isHover Text: ${JSON.stringify(event)}`); 8114 event.stopPropagation(); 8115 })) 8116 .onClick((event: ClickEvent) => { 8117 console.info(`Click Text : ${JSON.stringify(event)}`) 8118 }) 8119 .onTouch((event: TouchEvent) => { 8120 console.info(`touch Text : ${JSON.stringify(event)}`) 8121 }) 8122 .onAppear(() => { 8123 console.info(`on Appear Text`) 8124 }) 8125 .onDisAppear(() => { 8126 console.info(`onDisAppear Text`) 8127 }) 8128 .onFocus(() => { 8129 console.info(`onFocus Text`) 8130 }) 8131 .onBlur(() => { 8132 console.info(`onBlur Text`) 8133 }) 8134 .onKeyEvent((event: KeyEvent) => { 8135 console.info(`Key Text : ${JSON.stringify(event)}`) 8136 }) 8137 .onMouse((event: MouseEvent) => { 8138 console.info(`Mouse Text : ${JSON.stringify(event)}`) 8139 }) 8140 .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 8141 console.info(`onSizeChange Text: oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 8142 }) 8143 NodeContainer(this.myNodeController) 8144 .borderWidth(1) 8145 .width(300) 8146 .height(100) 8147 }.width("100%") 8148 } 8149} 8150``` 8151 8152## LazyForEach场景基础事件使用示例 8153 8154<!--code_no_check--> 8155 8156```ts 8157// index.ets 8158import {Track, TrackManager, TrackNode} from "./track" 8159 8160@Builder 8161function page1() { 8162 Column() { 8163 Text("Page1") 8164 PageList().height("90%") 8165 Button("DumpMessage") 8166 .onClick(() => { 8167 TrackManager.get().dump() 8168 }) 8169 8170 }.width("100%").height("100%") 8171} 8172 8173class BasicDataSource implements IDataSource { 8174 private listeners: DataChangeListener[] = []; 8175 private originDataArray: string[] = []; 8176 8177 public totalCount(): number { 8178 return 0; 8179 } 8180 8181 public getData(index: number): string { 8182 return this.originDataArray[index]; 8183 } 8184 8185 // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听 8186 registerDataChangeListener(listener: DataChangeListener): void { 8187 if (this.listeners.indexOf(listener) < 0) { 8188 console.info('add listener'); 8189 this.listeners.push(listener); 8190 } 8191 } 8192 8193 // 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听 8194 unregisterDataChangeListener(listener: DataChangeListener): void { 8195 const pos = this.listeners.indexOf(listener); 8196 if (pos >= 0) { 8197 console.info('remove listener'); 8198 this.listeners.splice(pos, 1); 8199 } 8200 } 8201 8202 // 通知LazyForEach组件需要重载所有子组件 8203 notifyDataReload(): void { 8204 this.listeners.forEach(listener => { 8205 listener.onDataReloaded(); 8206 }) 8207 } 8208 8209 // 通知LazyForEach组件需要在index对应索引处添加子组件 8210 notifyDataAdd(index: number): void { 8211 this.listeners.forEach(listener => { 8212 listener.onDataAdd(index); 8213 }) 8214 } 8215 8216 // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件 8217 notifyDataChange(index: number): void { 8218 this.listeners.forEach(listener => { 8219 listener.onDataChange(index); 8220 }) 8221 } 8222 8223 // 通知LazyForEach组件需要在index对应索引处删除该子组件 8224 notifyDataDelete(index: number): void { 8225 this.listeners.forEach(listener => { 8226 listener.onDataDelete(index); 8227 }) 8228 } 8229 8230 // 通知LazyForEach组件将from索引和to索引处的子组件进行交换 8231 notifyDataMove(from: number, to: number): void { 8232 this.listeners.forEach(listener => { 8233 listener.onDataMove(from, to); 8234 }) 8235 } 8236} 8237 8238class MyDataSource extends BasicDataSource { 8239 private dataArray: string[] = []; 8240 8241 public totalCount(): number { 8242 return this.dataArray.length; 8243 } 8244 8245 public getData(index: number): string { 8246 return this.dataArray[index]; 8247 } 8248 8249 public addData(index: number, data: string): void { 8250 this.dataArray.splice(index, 0, data); 8251 this.notifyDataAdd(index); 8252 } 8253 8254 public pushData(data: string): void { 8255 this.dataArray.push(data); 8256 this.notifyDataAdd(this.dataArray.length - 1); 8257 } 8258} 8259 8260@Component 8261struct PageList { 8262 private data: MyDataSource = new MyDataSource(); 8263 8264 aboutToAppear() { 8265 for (let i = 0; i <= 100; i++) { 8266 this.data.pushData(`Hello ${i}`) 8267 } 8268 } 8269 8270 build() { 8271 List({ space: 3 }) { 8272 LazyForEach(this.data, (item: string, index: number) => { 8273 ListItem() { 8274 // 通过TrackNode对组件进行封装埋点 8275 TrackNode({track: new Track().tag("xxx"+ item).id(index + 30000)}) { 8276 Row() { 8277 Text(item).fontSize(30) 8278 .onClick(() => { 8279 }) 8280 }.margin({ left: 10, right: 10 }) 8281 } 8282 } 8283 }, (item: string) => item) 8284 }.cachedCount(5) 8285 } 8286} 8287 8288 8289@Entry 8290@Component 8291struct TrackTest { 8292 pageInfos: NavPathStack = new NavPathStack() 8293 build() { 8294 Row() { 8295 TrackNode({ track: new Track().tag("root").id(10000)}) { 8296 page1() 8297 } 8298 } 8299 } 8300 8301 aboutToAppear(): void { 8302 TrackManager.get().startListenClick(this.getUIContext()) 8303 } 8304} 8305``` 8306 8307<!--code_no_check--> 8308 8309```ts 8310// ./track.ets 8311import { FrameNode, Rect } from '@kit.ArkUI'; 8312 8313@Component 8314export struct TrackNode { 8315 @BuilderParam closer: VoidCallback = this.defaultBuilder 8316 track: Track | null = null 8317 trackShadow: TrackShadow = new TrackShadow() 8318 8319 @Builder defaultBuilder() { 8320 } 8321 8322 build() { 8323 this.closer() 8324 } 8325 8326 aboutToAppear(): void { 8327 // 稍后使用onDidBuild 8328 } 8329 8330 aboutToDisappear(): void { 8331 TrackManager.get().removeTrack(this.trackShadow.id) 8332 console.info("Track disappear:" + this.trackShadow.id) 8333 } 8334 8335 onDidBuild(): void { 8336 // 构建埋点的虚拟树，获取的node为当前页面的根节点（用例中为Row）。 8337 let uid = this.getUniqueId() 8338 let node: FrameNode | null = this.getUIContext().getFrameNodeByUniqueId(uid); 8339 console.info("Track onDidBuild node:" + node?.getNodeType()) 8340 if (node === null) { 8341 return 8342 } 8343 this.trackShadow.node = node 8344 this.trackShadow.id = node?.getUniqueId() 8345 this.trackShadow.track = this.track; 8346 TrackManager.get().addTrack(this.trackShadow.id, this.trackShadow) 8347 // 通过setOnVisibleAreaApproximateChange监听记录埋点组件的可视区域。 8348 node?.commonEvent.setOnVisibleAreaApproximateChange( 8349 { ratios: [0, 0.1, 0.2, 0.5, 0.8, 1], expectedUpdateInterval: 500 }, 8350 (ratioInc: boolean, ratio: number) => { 8351 console.info(`Node ${node?.getUniqueId()}:${node?.getNodeType()} is visibleRatio is ${ratio}`); 8352 this.trackShadow.visibleRatio = ratio 8353 }) 8354 8355 let parent: FrameNode | null = node?.getParent() 8356 8357 let attachTrackToParent: (parent: FrameNode | null) => boolean = 8358 (parent: FrameNode | null) => { 8359 while (parent !== null) { 8360 let parentTrack = TrackManager.get().getTrackById(parent.getUniqueId()) 8361 if (parentTrack !== undefined) { 8362 parentTrack.childIds.add(this.trackShadow.id) 8363 this.trackShadow.parentId = parentTrack.id 8364 return true; 8365 } 8366 parent = parent.getParent() 8367 } 8368 return false; 8369 } 8370 let attached = attachTrackToParent(parent); 8371 8372 if (!attached) { 8373 node?.commonEvent.setOnAppear(() => { 8374 let attached = attachTrackToParent(parent); 8375 if (attached) { 8376 console.info("Track lazy attached:" + this.trackShadow.id) 8377 } 8378 }) 8379 } 8380 } 8381} 8382 8383export class Track { 8384 public areaPercent: number = 0 8385 private trackTag: string = "" 8386 private trackId: number = 0 8387 8388 constructor() { 8389 } 8390 8391 tag(newTag: string): Track { 8392 this.trackTag = newTag; 8393 return this; 8394 } 8395 8396 id(newId: number): Track { 8397 this.trackId = newId; 8398 return this; 8399 } 8400} 8401 8402export class TrackShadow { 8403 public node: FrameNode | null = null 8404 public id: number = -1 8405 public track: Track | null = null 8406 public childIds: Set<number> = new Set() 8407 public parentId: number = -1 8408 public visibleRect: Rect = { left: 0, top: 0, right: 0, bottom: 0 } 8409 public area: number = 0 8410 public visibleRatio: number = 0 8411 8412 // 通过全局dump输出埋点树的信息 8413 dump(depth: number = 0): void { 8414 console.info("Track DP:" + depth + " id:" + this.id + " areaPer:" + this.track?.areaPercent + " visibleRatio:" + this.visibleRatio) 8415 this.childIds.forEach((value: number) => { 8416 TrackManager.get().getTrackById(value)?.dump(depth + 1) 8417 }) 8418 } 8419} 8420 8421export class TrackManager { 8422 static instance: TrackManager 8423 private trackMap: Map<number, TrackShadow> = new Map() 8424 private rootTrack: TrackShadow | null = null 8425 8426 static get(): TrackManager { 8427 if (TrackManager.instance !== undefined) { 8428 return TrackManager.instance 8429 } 8430 TrackManager.instance = new TrackManager() 8431 return TrackManager.instance 8432 } 8433 8434 addTrack(id: number, track: TrackShadow) { 8435 if (this.trackMap.size == 0) { 8436 this.rootTrack = track 8437 } 8438 console.info("Track add id:" + id) 8439 this.trackMap.set(id, track) 8440 } 8441 8442 removeTrack(id: number) { 8443 let current = this.getTrackById(id) 8444 if (current !== undefined) { 8445 this.trackMap.delete(id) 8446 let parent = this.getTrackById(current?.parentId) 8447 parent?.childIds.delete(id) 8448 } 8449 } 8450 8451 getTrackById(id: number): TrackShadow | undefined { 8452 return this.trackMap.get(id) 8453 } 8454 8455 startListenClick(context: UIContext) { 8456 // 通过无感监听获取FrameNode查找埋点信息。 8457 context.getUIObserver().on("willClick", (event: ClickEvent, node?: FrameNode) => { 8458 console.info("Track clicked:" + node) 8459 if (node == undefined) { 8460 return 8461 } 8462 let track = this.getTrackById(node.getUniqueId()) 8463 track?.dump(0); 8464 }) 8465 } 8466 8467 updateVisibleInfo(track: TrackShadow): void { 8468 // 更新埋点信息 8469 } 8470 8471 dump(): void { 8472 this.rootTrack?.dump(0) 8473 } 8474} 8475``` 8476## 手势事件示例 8477```ts 8478import { NodeController, FrameNode } from '@kit.ArkUI'; 8479 8480class MyNodeController extends NodeController { 8481 public rootNode: FrameNode | null = null; 8482 8483 makeNode(uiContext: UIContext): FrameNode | null { 8484 this.rootNode = new FrameNode(uiContext); 8485 this.rootNode.commonAttribute.width(100) 8486 .overlay('This is a FrameNode') 8487 .backgroundColor(Color.Pink) 8488 .width('100%') 8489 .height('100%'); 8490 this.addGestureEvent(this.rootNode); 8491 return this.rootNode; 8492 } 8493 8494 addGestureEvent(frameNode: FrameNode) { 8495 frameNode.gestureEvent.addGesture(new PanGestureHandler() 8496 .onActionStart((event: GestureEvent) => { 8497 console.info(`Pan start: ${JSON.stringify(event)}`); 8498 }) 8499 .onActionUpdate((event: GestureEvent) => { 8500 console.info(`Pan update: ${JSON.stringify(event)}`); 8501 }) 8502 .onActionEnd((event: GestureEvent) => { 8503 console.info(`Pan end: ${JSON.stringify(event)}`); 8504 }) 8505 .onActionCancel(() => { 8506 console.info('Pan cancel'); 8507 }) 8508 ) 8509 frameNode.gestureEvent.addGesture(new LongPressGestureHandler() 8510 .onAction((event: GestureEvent) => { 8511 console.info(`Long press action: ${JSON.stringify(event)}`); 8512 }) 8513 .onActionEnd((event: GestureEvent) => { 8514 console.info(`Long press action end: ${JSON.stringify(event)}`); 8515 }) 8516 .onActionCancel(() => { 8517 console.info('Long press cancel'); 8518 }) 8519 ) 8520 frameNode.gestureEvent.addGesture(new TapGestureHandler() 8521 .onAction((event: GestureEvent) => { 8522 console.info(`Tap action: ${JSON.stringify(event)}`); 8523 }) 8524 ) 8525 } 8526} 8527 8528@Entry 8529@Component 8530struct Index { 8531 private myNodeController: MyNodeController = new MyNodeController(); 8532 8533 build() { 8534 Column() { 8535 NodeContainer(this.myNodeController) 8536 .borderWidth(1) 8537 .width(300) 8538 .height(300) 8539 }.width("100%") 8540 } 8541} 8542``` 8543## 节点自定义示例 8544 8545```ts 8546import { UIContext, DrawContext, FrameNode, NodeController, LayoutConstraint, Size, Position } from '@kit.ArkUI'; 8547import { drawing } from '@kit.ArkGraphics2D'; 8548 8549function GetChildLayoutConstraint(constraint: LayoutConstraint, child: FrameNode): LayoutConstraint { 8550 const size = child.getUserConfigSize(); 8551 const width = Math.max( 8552 Math.min(constraint.maxSize.width, size.width.value), 8553 constraint.minSize.width 8554 ); 8555 const height = Math.max( 8556 Math.min(constraint.maxSize.height, size.height.value), 8557 constraint.minSize.height 8558 ); 8559 const finalSize: Size = { width, height }; 8560 const res: LayoutConstraint = { 8561 maxSize: finalSize, 8562 minSize: finalSize, 8563 percentReference: finalSize 8564 }; 8565 8566 return res; 8567} 8568 8569class MyFrameNode extends FrameNode { 8570 public width: number = 10; 8571 private space: number = 1; 8572 8573 onMeasure(constraint: LayoutConstraint): void { 8574 let sizeRes: Size = { width: 100, height: 100 }; 8575 for (let i = 0;i < this.getChildrenCount();i++) { 8576 let child = this.getChild(i); 8577 if (child) { 8578 let childConstraint = GetChildLayoutConstraint(constraint, child); 8579 child.measure(childConstraint); 8580 let size = child.getMeasuredSize(); 8581 sizeRes.height += size.height + this.space; 8582 sizeRes.width = Math.max(sizeRes.width, size.width); 8583 } 8584 } 8585 this.setMeasuredSize(sizeRes); 8586 } 8587 8588 onLayout(position: Position): void { 8589 let y = 0; 8590 for (let i = 0;i < this.getChildrenCount();i++) { 8591 let child = this.getChild(i); 8592 if (child) { 8593 child.layout({ 8594 x: 20, 8595 y: y 8596 }); 8597 y += child.getMeasuredSize().height + this.space; 8598 } 8599 } 8600 this.setLayoutPosition(position); 8601 } 8602 8603 onDraw(context: DrawContext) { 8604 const canvas = context.canvas; 8605 const pen = new drawing.Pen(); 8606 pen.setStrokeWidth(5); 8607 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 8608 canvas.attachPen(pen); 8609 canvas.drawRect({ left: 0, right: this.width, top: 0, bottom: this.width }); 8610 canvas.detachPen(); 8611 } 8612 8613 addWidth() { 8614 this.width += 10; 8615 } 8616} 8617 8618class MyNodeController extends NodeController { 8619 public rootNode: MyFrameNode | null = null; 8620 8621 makeNode(context: UIContext): FrameNode | null { 8622 this.rootNode = new MyFrameNode(context); 8623 this.rootNode?.commonAttribute?.size({ width: 100, height: 100 }).backgroundColor(Color.Green); 8624 return this.rootNode; 8625 } 8626} 8627 8628@Entry 8629@Component 8630struct Index { 8631 private nodeController: MyNodeController = new MyNodeController(); 8632 8633 build() { 8634 Row() { 8635 Column() { 8636 NodeContainer(this.nodeController) 8637 .width('100%') 8638 .height(100) 8639 .backgroundColor('#FFF0F0F0') 8640 Button('Invalidate') 8641 .onClick(() => { 8642 this.nodeController?.rootNode?.addWidth(); 8643 this.nodeController?.rootNode?.invalidate(); 8644 }) 8645 Button('UpdateLayout') 8646 .onClick(() => { 8647 this.nodeController?.rootNode?.setNeedsLayout(); 8648 }) 8649 } 8650 .width('100%') 8651 .height('100%') 8652 } 8653 .height('100%') 8654 } 8655} 8656``` 8657## NodeAdapter使用示例 8658 8659```ts 8660import { FrameNode, NodeController, NodeAdapter, typeNode } from '@kit.ArkUI'; 8661 8662class MyNodeAdapter extends NodeAdapter { 8663 uiContext: UIContext 8664 cachePool: Array<FrameNode> = new Array(); 8665 changed: boolean = false 8666 reloadTimes: number = 0; 8667 data: Array<string> = new Array(); 8668 hostNode?: FrameNode 8669 8670 constructor(uiContext: UIContext, count: number) { 8671 super(); 8672 this.uiContext = uiContext; 8673 this.totalNodeCount = count; 8674 this.loadData(); 8675 } 8676 8677 reloadData(count: number): void { 8678 this.reloadTimes++; 8679 NodeAdapter.attachNodeAdapter(this, this.hostNode); 8680 this.totalNodeCount = count; 8681 this.loadData(); 8682 this.reloadAllItems(); 8683 } 8684 8685 refreshData(): void { 8686 let items = this.getAllAvailableItems() 8687 console.info("UINodeAdapter get All items:" + items.length); 8688 this.reloadAllItems(); 8689 } 8690 8691 detachData(): void { 8692 NodeAdapter.detachNodeAdapter(this.hostNode); 8693 this.reloadTimes = 0; 8694 } 8695 8696 loadData(): void { 8697 for (let i = 0; i < this.totalNodeCount; i++) { 8698 this.data[i] = "Adapter ListItem " + i + " r:" + this.reloadTimes; 8699 } 8700 } 8701 8702 changeData(from: number, count: number): void { 8703 this.changed = !this.changed; 8704 for (let i = 0; i < count; i++) { 8705 let index = i + from; 8706 this.data[index] = "Adapter ListItem " + (this.changed ? "changed:" : "") + index + " r:" + this.reloadTimes; 8707 } 8708 this.reloadItem(from, count); 8709 } 8710 8711 insertData(from: number, count: number): void { 8712 for (let i = 0; i < count; i++) { 8713 let index = i + from; 8714 this.data.splice(index, 0, "Adapter ListItem " + from + "-" + i); 8715 } 8716 this.insertItem(from, count); 8717 this.totalNodeCount += count; 8718 console.info("UINodeAdapter after insert count:" + this.totalNodeCount); 8719 } 8720 8721 removeData(from: number, count: number): void { 8722 let arr = this.data.splice(from, count); 8723 this.removeItem(from, count); 8724 this.totalNodeCount -= arr.length; 8725 console.info("UINodeAdapter after remove count:" + this.totalNodeCount); 8726 } 8727 8728 moveData(from: number, to: number): void { 8729 let tmp = this.data.splice(from, 1); 8730 this.data.splice(to, 0, tmp[0]); 8731 this.moveItem(from, to); 8732 } 8733 8734 onAttachToNode(target: FrameNode): void { 8735 console.info("UINodeAdapter onAttachToNode id:" + target.getUniqueId()); 8736 this.hostNode = target; 8737 } 8738 8739 onDetachFromNode(): void { 8740 console.info("UINodeAdapter onDetachFromNode"); 8741 } 8742 8743 onGetChildId(index: number): number { 8744 console.info("UINodeAdapter onGetChildId:" + index); 8745 return index; 8746 } 8747 8748 onCreateChild(index: number): FrameNode { 8749 console.info("UINodeAdapter onCreateChild:" + index); 8750 if (this.cachePool.length > 0) { 8751 let cacheNode = this.cachePool.pop(); 8752 if (cacheNode !== undefined) { 8753 console.info("UINodeAdapter onCreateChild reused id:" + cacheNode.getUniqueId()); 8754 let text = cacheNode?.getFirstChild(); 8755 let textNode = text as typeNode.Text; 8756 textNode?.initialize(this.data[index]).fontSize(20); 8757 return cacheNode; 8758 } 8759 } 8760 console.info("UINodeAdapter onCreateChild createNew"); 8761 let itemNode = typeNode.createNode(this.uiContext, "ListItem"); 8762 let textNode = typeNode.createNode(this.uiContext, "Text"); 8763 textNode.initialize(this.data[index]).fontSize(20); 8764 itemNode.appendChild(textNode); 8765 return itemNode; 8766 } 8767 8768 onDisposeChild(id: number, node: FrameNode): void { 8769 console.info("UINodeAdapter onDisposeChild:" + id); 8770 if (this.cachePool.length < 10) { 8771 if (!this.cachePool.includes(node)) { 8772 console.info("UINodeAdapter caching node id:" + node.getUniqueId()); 8773 this.cachePool.push(node); 8774 } 8775 } else { 8776 node.dispose(); 8777 } 8778 } 8779 8780 onUpdateChild(id: number, node: FrameNode): void { 8781 let index = id; 8782 let text = node.getFirstChild(); 8783 let textNode = text as typeNode.Text; 8784 textNode?.initialize(this.data[index]).fontSize(20); 8785 } 8786} 8787 8788class MyNodeAdapterController extends NodeController { 8789 rootNode: FrameNode | null = null; 8790 nodeAdapter: MyNodeAdapter | null = null; 8791 8792 makeNode(uiContext: UIContext): FrameNode | null { 8793 this.rootNode = new FrameNode(uiContext); 8794 let listNode = typeNode.createNode(uiContext, "List"); 8795 listNode.initialize({ space: 3 }).borderWidth(2).borderColor(Color.Black); 8796 this.rootNode.appendChild(listNode); 8797 this.nodeAdapter = new MyNodeAdapter(uiContext, 100); 8798 NodeAdapter.attachNodeAdapter(this.nodeAdapter, listNode); 8799 return this.rootNode; 8800 } 8801} 8802 8803@Entry 8804@Component 8805struct ListNodeTest { 8806 adapterController: MyNodeAdapterController = new MyNodeAdapterController(); 8807 8808 build() { 8809 Column() { 8810 Text("ListNode Adapter"); 8811 NodeContainer(this.adapterController) 8812 .width(300).height(300) 8813 .borderWidth(1).borderColor(Color.Black); 8814 Row() { 8815 Button("Reload") 8816 .onClick(() => { 8817 this.adapterController.nodeAdapter?.reloadData(50); 8818 }) 8819 Button("Change") 8820 .onClick(() => { 8821 this.adapterController.nodeAdapter?.changeData(5, 10) 8822 }) 8823 Button("Insert") 8824 .onClick(() => { 8825 this.adapterController.nodeAdapter?.insertData(10, 10); 8826 }) 8827 } 8828 8829 Row() { 8830 Button("Remove") 8831 .onClick(() => { 8832 this.adapterController.nodeAdapter?.removeData(10, 10); 8833 }) 8834 Button("Move") 8835 .onClick(() => { 8836 this.adapterController.nodeAdapter?.moveData(2, 5); 8837 }) 8838 Button("Refresh") 8839 .onClick(() => { 8840 this.adapterController.nodeAdapter?.refreshData(); 8841 }) 8842 Button("Detach") 8843 .onClick(() => { 8844 this.adapterController.nodeAdapter?.detachData(); 8845 }) 8846 } 8847 }.borderWidth(1) 8848 .width("100%") 8849 } 8850} 8851 8852``` 8853 8854## 节点复用回收使用示例 8855 8856```ts 8857import { NodeController, BuilderNode, FrameNode, UIContext } from '@kit.ArkUI'; 8858 8859class Params { 8860 text: string = "this is a text" 8861} 8862 8863@Builder 8864function buttonBuilder(params: Params) { 8865 Column() { 8866 Button(params.text) 8867 .fontSize(20) 8868 .borderRadius(8) 8869 .borderWidth(2) 8870 .backgroundColor(Color.Grey) 8871 } 8872} 8873 8874class MyNodeController extends NodeController { 8875 private buttonNode: BuilderNode<[Params]> | null = null; 8876 private rootNode: FrameNode | null = null; 8877 private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder); 8878 8879 makeNode(uiContext: UIContext): FrameNode { 8880 if (this.rootNode == null) { 8881 this.rootNode = new FrameNode(uiContext); 8882 this.buttonNode = new BuilderNode(uiContext); 8883 this.buttonNode.build(this.wrapBuilder, { text: "This is a Button" }); 8884 this.rootNode.appendChild(this.buttonNode.getFrameNode()); 8885 } 8886 return this.rootNode; 8887 } 8888 8889 onAttach(): void { 8890 console.info("myButton on attach"); 8891 } 8892 8893 onDetach(): void { 8894 console.info("myButton on detach"); 8895 } 8896 8897 // onBind时，子节点已经重新上树，此时调用reuse，保证子组件的能重新被复用。 8898 onBind(containerId: number): void { 8899 // 该方法触发子组件复用，全局复用场景下，复用FrameNode后端资源。 8900 this.rootNode?.reuse(); 8901 console.info("myButton reuse"); 8902 } 8903 8904 // onUnbind时，子节点已经完全下树，此时调用recycle，保证子组件的能完全被回收。 8905 onUnbind(containerId: number): void { 8906 // 该方法触发子组件的回收，全局复用场景下，回收FrameNode后端资源用于重新利用。 8907 this.rootNode?.recycle(); 8908 console.info("myButton recycle"); 8909 } 8910 8911 getButtonNode(): BuilderNode<[Params]> | null { 8912 return this.buttonNode; 8913 } 8914 8915 getFrameNode(): FrameNode | null { 8916 return this.rootNode; 8917 } 8918} 8919 8920@Entry 8921@Component 8922struct Index { 8923 @State buttonShow: boolean = true 8924 @State buttonIndex: number = 0 8925 public buttonController: MyNodeController = new MyNodeController(); 8926 private buttonNull: null = null; 8927 private buttonControllerArray: Array<MyNodeController | null> = [this.buttonController, this.buttonNull] 8928 8929 build() { 8930 Column() { 8931 Row() { 8932 Button("Bind/Unbind") 8933 .onClick(() => { 8934 this.buttonIndex++; 8935 }).margin(5) 8936 Button("onAttach/onDetach") 8937 .onClick(() => { 8938 this.buttonShow = !this.buttonShow 8939 }).margin(5) 8940 } 8941 if (this.buttonShow) { 8942 NodeContainer(this.buttonControllerArray[this.buttonIndex % this.buttonControllerArray.length]) 8943 } 8944 } 8945 .padding({ left: 35, right: 35 }) 8946 .width("100%") 8947 .height("100%") 8948 } 8949} 8950 8951``` 8952 8953## 组件设置和删除多态样式状态示例 8954 8955```ts 8956import { NodeController, FrameNode, typeNode, UIState } from '@kit.ArkUI'; 8957 8958class MyNodeController extends NodeController { 8959 private isEnable: boolean = true; 8960 private theStatesToBeSupported = UIState.NORMAL | UIState.PRESSED | UIState.FOCUSED | UIState.DISABLED | UIState.SELECTED; 8961 8962 makeNode(uiContext: UIContext): FrameNode | null { 8963 //创建并组织节点关系 8964 let node = new FrameNode(uiContext); 8965 node.commonAttribute.width('100%') 8966 .height('100%') 8967 .borderColor(Color.Gray) 8968 .borderWidth(1) 8969 .margin({ left: 10 }) 8970 8971 let column = typeNode.createNode(uiContext, 'Column'); 8972 column.initialize({ space: 20 }) 8973 .width('100%') 8974 .height('100%') 8975 node.appendChild(column); 8976 8977 let styleText = typeNode.createNode(uiContext, 'Text'); 8978 styleText.initialize("StyleTarget") 8979 .width('50%') 8980 .height('5%') 8981 .margin({ top: 5, bottom:5 }) 8982 .fontSize(14) 8983 .fontColor(Color.White) 8984 .textAlign(TextAlign.Center) 8985 .backgroundColor(Color.Green) 8986 .borderWidth(2) 8987 .borderColor(Color.Black) 8988 .focusable(true) 8989 8990 //为Text组件添加多态样式处理能力 8991 styleText.addSupportedUIStates(this.theStatesToBeSupported, (node: FrameNode, currentState: number) => { 8992 if (currentState == UIState.NORMAL) { //判断是否normal要使用等于 8993 //normal状态，刷normal的UI效果 8994 console.info('Callback UIState.NORMAL') 8995 node.commonAttribute.backgroundColor(Color.Green) 8996 node.commonAttribute.borderWidth(2) 8997 node.commonAttribute.borderColor(Color.Black) 8998 } 8999 if ((currentState & UIState.PRESSED) == UIState.PRESSED) { 9000 //press状态，刷press的UI效果 9001 console.info('Callback UIState.PRESSED') 9002 node.commonAttribute.backgroundColor(Color.Brown) 9003 } 9004 if ((currentState & UIState.FOCUSED) == UIState.FOCUSED) { 9005 //focused状态，刷focused的UI效果 9006 console.info('Callback UIState.FOCUSED') 9007 node.commonAttribute.borderWidth(5) 9008 node.commonAttribute.borderColor(Color.Yellow) 9009 } 9010 if ((currentState & UIState.DISABLED) == UIState.DISABLED) { 9011 //disabled状态，刷disabled的UI效果 9012 console.info('Callback UIState.DISABLED') 9013 node.commonAttribute.backgroundColor(Color.Gray) 9014 node.commonAttribute.borderWidth(0) 9015 } 9016 if ((currentState & UIState.SELECTED) == UIState.SELECTED) { 9017 //selected状态，刷selected的UI效果 9018 console.info('Callback UIState.SELECTED') 9019 node.commonAttribute.backgroundColor(Color.Pink) 9020 } 9021 }, false) 9022 9023 column.appendChild(styleText); 9024 9025 //为Text组件删除多态样式处理能力 9026 let buttonRemove = typeNode.createNode(uiContext, 'Button'); 9027 buttonRemove.initialize("RemoveUIStatus") 9028 .width('50%') 9029 .height('5%') 9030 .fontSize(14) 9031 .margin({ top: 5, bottom:5 }) 9032 .onClick(() => { 9033 styleText.removeSupportedUIStates(this.theStatesToBeSupported); 9034 }); 9035 column.appendChild(buttonRemove); 9036 9037 //改变多态样式目标节点的使能状态 9038 let buttonEnable = typeNode.createNode(uiContext, 'Button'); 9039 buttonEnable.initialize("DisableText") 9040 .width('50%') 9041 .height('5%') 9042 .fontSize(14) 9043 .margin({ top: 5, bottom:5 }) 9044 .onClick(() => { 9045 this.isEnable = !this.isEnable; 9046 buttonEnable.initialize(this.isEnable ? 'DisableText' : 'EnableText'); 9047 styleText.attribute.enabled(this.isEnable) 9048 }); 9049 column.appendChild(buttonEnable); 9050 return node; 9051 } 9052} 9053 9054@Entry 9055@Component 9056struct FrameNodeTypeTest { 9057 private myNodeController: MyNodeController = new MyNodeController(); 9058 build() { 9059 Row() { 9060 NodeContainer(this.myNodeController); 9061 } 9062 } 9063} 9064``` 9065 9066## 动画创建与取消示例 9067 9068该示例说明在FrameNode上[createAnimation](#createanimation20)、[cancelAnimations](#cancelanimations20)、[getNodePropertyValue](#getnodepropertyvalue20)接口的用法。 9069 9070``` ts 9071import { FrameNode, NodeController, UIContext } from '@kit.ArkUI'; 9072class MyNodeController extends NodeController { 9073 private rootNode: FrameNode | null = null; 9074 private isRunning: boolean = false; // 表示节点上动画是否在运行 9075 private startInitAnimation() { 9076 if (this.rootNode) { 9077 let result: boolean = this.rootNode.createAnimation(AnimationPropertyType.ROTATION, [0, 0, 0], [0, 0, 360], 9078 {duration: 3000, curve: Curve.Linear, iterations: -1});// 创建动画，第一次创建时显式指定初值，旋转角从[0,0,0]变成[0,0,360]，无限循环 9079 if (result) { 9080 this.isRunning = true; 9081 } else { 9082 console.warn('create rotation animation failed'); 9083 } 9084 } 9085 } 9086 cancelAnimation(cnt: number) { 9087 if (this.rootNode && this.isRunning) { 9088 let result: boolean = this.rootNode.cancelAnimations([AnimationPropertyType.ROTATION]); 9089 if (result) { 9090 this.isRunning = false; 9091 } else { 9092 console.warn('cancel rotation animation failed'); 9093 if (cnt < 2) { // cnt为尝试取消的次数 9094 // 如果取消失败，500ms后再次尝试取消 9095 setTimeout(() => { 9096 this.cancelAnimation(cnt + 1); 9097 }, 500); 9098 } 9099 } 9100 } 9101 } 9102 continueAnimation() { 9103 if (this.rootNode && !this.isRunning) { 9104 let currentProperty: number[] = this.rootNode.getNodePropertyValue(AnimationPropertyType.ROTATION);// 获取当前节点上的旋转属性终值 9105 if (currentProperty.length == 3) { // 获取属性正常，旋转属性对应的数组长度为3，分别是x、y、z方向的旋转角 9106 let endValue: number[]; 9107 let startValue: number[] | undefined = undefined; 9108 if (currentProperty[2] >= 360) { 9109 startValue = [currentProperty[0], currentProperty[1], currentProperty[2] - 360]; // 当旋转属性过大时使z方向少转360度，避免z方向角度由于多次启停动画一直增加 9110 endValue = [currentProperty[0], currentProperty[1], currentProperty[2]]; 9111 } else { 9112 endValue = [currentProperty[0], currentProperty[1], currentProperty[2] + 360]; // 此时旋转属性小于360度，可以从上次旋转角再多旋转一圈 9113 } 9114 let result: boolean = this.rootNode.createAnimation(AnimationPropertyType.ROTATION, startValue, endValue, {duration: 3000, curve: Curve.Linear, iterations: -1}); 9115 console.info(`create rotation animation from ${startValue? String(startValue[2]): "undefined"} to ${endValue[2]}`); 9116 if (result) { 9117 this.isRunning = true; 9118 } else { 9119 console.warn('create rotation animation failed when continue'); 9120 } 9121 } 9122 } 9123 } 9124 9125 makeNode(uiContext: UIContext): FrameNode | null { 9126 if (this.rootNode) { 9127 return this.rootNode; 9128 } 9129 this.rootNode = new FrameNode(uiContext); 9130 this.rootNode.commonAttribute.width(100).height(100).backgroundColor(Color.Blue);//设置节点属性 9131 this.startInitAnimation(); 9132 this.rootNode.commonEvent.setOnClick(()=>{ 9133 if (this.isRunning) { 9134 this.cancelAnimation(1); 9135 } else { 9136 this.continueAnimation(); 9137 } 9138 }); 9139 return this.rootNode; 9140 } 9141} 9142@Entry 9143@Component 9144struct CreateAnimationExample { 9145 private myNodeController: MyNodeController = new MyNodeController(); 9146 9147 build() { 9148 Column() { 9149 NodeContainer(this.myNodeController) 9150 }.width('100%').padding({top: 50}) 9151 } 9152} 9153``` 9154 9155 9156 9157## 滚动事件示例 9158 9159```ts 9160import { NodeController, FrameNode, typeNode } from '@kit.ArkUI'; 9161 9162class MyNodeController extends NodeController { 9163 public rootNode: FrameNode | null = null; 9164 9165 makeNode(uiContext: UIContext): FrameNode | null { 9166 this.rootNode = new FrameNode(uiContext); 9167 this.rootNode.commonAttribute.width(100) 9168 return this.rootNode; 9169 } 9170 9171 addCommonEvent(frameNode: FrameNode) { 9172 let gridEvent: UIGridEvent | undefined = typeNode.getEvent(frameNode, "Grid"); 9173 gridEvent?.setOnWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { 9174 console.info(`onWillScroll scrollOffset = ${scrollOffset}, scrollState = ${scrollState}, scrollSource = ${scrollSource}`) 9175 }) 9176 gridEvent?.setOnDidScroll((scrollOffset: number, scrollState: ScrollState) => { 9177 console.info(`onDidScroll scrollOffset = ${scrollOffset}, scrollState = ${scrollState}`) 9178 }) 9179 gridEvent?.setOnReachStart(() => { 9180 console.info(`onReachStart`) 9181 }) 9182 gridEvent?.setOnReachEnd(() => { 9183 console.info(`onReachEnd`) 9184 }) 9185 gridEvent?.setOnScrollStart(() => { 9186 console.info(`onScrollStart`) 9187 }) 9188 gridEvent?.setOnScrollStop(() => { 9189 console.info(`onScrollStop`) 9190 }) 9191 gridEvent?.setOnScrollFrameBegin((offset: number, state: ScrollState) => { 9192 console.info(`onScrollFrameBegin offset = ${offset}, state = ${state}`) 9193 return undefined; 9194 }) 9195 gridEvent?.setOnScrollIndex((first: number, last: number) => { 9196 console.info(`onScrollIndex start = ${first}, end = ${last}`) 9197 }) 9198 } 9199} 9200 9201@Entry 9202@Component 9203struct Index { 9204 @State index: number = 0; 9205 private myNodeController: MyNodeController = new MyNodeController(); 9206 @State numbers: string[] = [] 9207 9208 aboutToAppear() { 9209 for (let i = 0; i < 5; i++) { 9210 for (let j = 0; j < 5; j++) { 9211 this.numbers.push(j.toString()); 9212 } 9213 } 9214 } 9215 9216 build() { 9217 Column() { 9218 Button("add CommonEvent to Grid") 9219 .onClick(() => { 9220 this.myNodeController!.addCommonEvent(this.myNodeController!.rootNode!.getParent()!.getPreviousSibling()!) 9221 }) 9222 Grid() { 9223 ForEach(this.numbers, (day: string, index: number) => { 9224 GridItem() { 9225 Text(day) 9226 .fontSize(16) 9227 .backgroundColor(0xF9CF93) 9228 .width('100%') 9229 .height(80) 9230 .textAlign(TextAlign.Center) 9231 } 9232 }, (day: string, index: number) => index.toString() + day) 9233 } 9234 .columnsTemplate('1fr 1fr 1fr 1fr 1fr') 9235 .columnsGap(10) 9236 .rowsGap(10) 9237 .enableScrollInteraction(true) 9238 .width('90%') 9239 .backgroundColor(0xFAEEE0) 9240 .height(300) 9241 NodeContainer(this.myNodeController) 9242 }.width("100%") 9243 } 9244} 9245``` 9246 9247## 检验FrameNode是否有效示例 9248 9249该示例演示了FrameNode释放节点前后分别使用isDisposed接口验证节点的状态，释放节点前节点调用isDisposed接口返回true，释放节点后节点调用isDisposed接口返回false。 9250 9251```ts 9252import { NodeController, FrameNode, BuilderNode } from '@kit.ArkUI'; 9253 9254@Component 9255struct TestComponent { 9256 build() { 9257 Column() { 9258 Text('This is a BuilderNode.') 9259 .fontSize(25) 9260 .fontWeight(FontWeight.Bold) 9261 } 9262 .width('100%') 9263 .height(30) 9264 .backgroundColor(Color.Gray) 9265 } 9266 9267 aboutToAppear() { 9268 console.error('aboutToAppear'); 9269 } 9270 9271 aboutToDisappear() { 9272 console.error('aboutToDisappear'); 9273 } 9274} 9275 9276@Builder 9277function buildComponent() { 9278 TestComponent() 9279} 9280 9281class MyNodeController extends NodeController { 9282 private rootNode: FrameNode | null = null; 9283 private builderNode: BuilderNode<[]> | null = null; 9284 9285 makeNode(uiContext: UIContext): FrameNode | null { 9286 this.rootNode = new FrameNode(uiContext); 9287 this.builderNode = new BuilderNode(uiContext, { selfIdealSize: { width: 200, height: 100 } }); 9288 this.builderNode.build(new WrappedBuilder(buildComponent)); 9289 9290 const rootRenderNode = this.rootNode.getRenderNode(); 9291 if (rootRenderNode !== null) { 9292 rootRenderNode.size = { width: 300, height: 300 }; 9293 rootRenderNode.backgroundColor = 0xffd5d5d5; 9294 rootRenderNode.appendChild(this.builderNode!.getFrameNode()!.getRenderNode()); 9295 } 9296 9297 return this.rootNode; 9298 } 9299 9300 disposeFrameNode() { 9301 if (this.rootNode !== null && this.builderNode !== null) { 9302 this.rootNode.removeChild(this.builderNode.getFrameNode()); 9303 this.builderNode.dispose(); 9304 9305 this.rootNode.dispose(); 9306 } 9307 } 9308 9309 isDisposed() : string { 9310 if (this.rootNode !== null) { 9311 if (this.rootNode.isDisposed()) { 9312 return 'frameNode isDisposed is true'; 9313 } 9314 else { 9315 return 'frameNode isDisposed is false'; 9316 } 9317 } 9318 return 'frameNode is null'; 9319 } 9320 9321 removeBuilderNode() { 9322 const rootRenderNode = this.rootNode!.getRenderNode(); 9323 if (rootRenderNode !== null && this.builderNode !== null && this.builderNode.getFrameNode() !== null) { 9324 rootRenderNode.removeChild(this.builderNode!.getFrameNode()!.getRenderNode()); 9325 } 9326 } 9327} 9328 9329@Entry 9330@Component 9331struct Index { 9332 @State text: string = '' 9333 private myNodeController: MyNodeController = new MyNodeController(); 9334 9335 build() { 9336 Column({ space: 4 }) { 9337 NodeContainer(this.myNodeController) 9338 Button('FrameNode dispose') 9339 .onClick(() => { 9340 this.myNodeController.disposeFrameNode(); 9341 this.text = ''; 9342 }) 9343 .width(200) 9344 .height(50) 9345 Button('FrameNode isDisposed') 9346 .onClick(() => { 9347 this.text = this.myNodeController.isDisposed(); 9348 }) 9349 .width(200) 9350 .height(50) 9351 Text(this.text) 9352 .fontSize(25) 9353 } 9354 .width('100%') 9355 .height('100%') 9356 } 9357} 9358``` 9359 9360 9361 9362## 检验NodeAdapter是否有效示例 9363 9364该示例演示了NodeAdapter释放节点前后分别使用isDisposed接口验证节点的状态，释放节点前节点调用isDisposed接口返回true，释放节点后节点调用isDisposed接口返回false。 9365 9366```ts 9367import { FrameNode, NodeController, NodeAdapter, typeNode } from '@kit.ArkUI'; 9368 9369class MyNodeAdapter extends NodeAdapter { 9370 uiContext: UIContext 9371 cachePool: Array<FrameNode> = new Array(); 9372 changed: boolean = false 9373 reloadTimes: number = 0; 9374 data: Array<string> = new Array(); 9375 hostNode?: FrameNode 9376 9377 constructor(uiContext: UIContext, count: number) { 9378 super(); 9379 this.uiContext = uiContext; 9380 this.totalNodeCount = count; 9381 this.loadData(); 9382 } 9383 9384 loadData(): void { 9385 for (let i = 0; i < this.totalNodeCount; i++) { 9386 this.data[i] = "Adapter ListItem " + i + " r:" + this.reloadTimes; 9387 } 9388 } 9389 9390 onCreateChild(index: number): FrameNode { 9391 console.info("UINodeAdapter onCreateChild:" + index); 9392 if (this.cachePool.length > 0) { 9393 let cacheNode = this.cachePool.pop(); 9394 if (cacheNode !== undefined) { 9395 console.info("UINodeAdapter onCreateChild reused id:" + cacheNode.getUniqueId()); 9396 let text = cacheNode?.getFirstChild(); 9397 let textNode = text as typeNode.Text; 9398 textNode?.initialize(this.data[index]).fontSize(20); 9399 return cacheNode; 9400 } 9401 } 9402 console.info("UINodeAdapter onCreateChild createNew"); 9403 let itemNode = typeNode.createNode(this.uiContext, "ListItem"); 9404 let textNode = typeNode.createNode(this.uiContext, "Text"); 9405 textNode.initialize(this.data[index]).fontSize(20); 9406 itemNode.appendChild(textNode); 9407 return itemNode; 9408 } 9409} 9410 9411class MyNodeAdapterController extends NodeController { 9412 rootNode: FrameNode | null = null; 9413 nodeAdapter: MyNodeAdapter | null = null; 9414 9415 makeNode(uiContext: UIContext): FrameNode | null { 9416 this.rootNode = new FrameNode(uiContext); 9417 let listNode = typeNode.createNode(uiContext, "List"); 9418 listNode.initialize({ space: 3 }).borderColor(Color.Black); 9419 this.rootNode.appendChild(listNode); 9420 this.nodeAdapter = new MyNodeAdapter(uiContext, 20); 9421 NodeAdapter.attachNodeAdapter(this.nodeAdapter, listNode); 9422 return this.rootNode; 9423 } 9424 9425 dispose() { 9426 if (this.nodeAdapter !== null) { 9427 this.nodeAdapter.dispose(); 9428 } 9429 } 9430 9431 isDisposed() : string { 9432 if (this.nodeAdapter !== null) { 9433 if (this.nodeAdapter.isDisposed()) { 9434 return 'nodeAdapter isDisposed is true'; 9435 } 9436 else { 9437 return 'nodeAdapter isDisposed is false'; 9438 } 9439 } 9440 return 'nodeAdapter is null'; 9441 } 9442} 9443 9444@Entry 9445@Component 9446struct ListNodeTest { 9447 @State text: string = '' 9448 adapterController: MyNodeAdapterController = new MyNodeAdapterController(); 9449 9450 build() { 9451 Column() { 9452 Text("ListNode Adapter"); 9453 NodeContainer(this.adapterController) 9454 .width(300).height(300) 9455 .borderWidth(1).borderColor(Color.Black); 9456 Button("NodeAdapter dispose") 9457 .onClick(() => { 9458 this.adapterController.dispose(); 9459 this.text = ''; 9460 }) 9461 .width(200) 9462 .height(50) 9463 .margin({ top: 10, bottom: 10 }) 9464 Button("NodeAdapter isDisposed") 9465 .onClick(() => { 9466 this.text = this.adapterController.isDisposed(); 9467 }) 9468 .width(200) 9469 .height(50) 9470 Text(this.text) 9471 .fontSize(25) 9472 } 9473 .width("100%") 9474 } 9475} 9476``` 9477 9478 9479 9480## 获取根节点示例 9481 9482该示例演示了如何通过FrameNode的[getParent](#getparent12)接口获取当前页面根节点。 9483 9484```ts 9485@Component 9486struct ChildView { 9487 @State message: string = 'Hello World'; 9488 9489 build() { 9490 RelativeContainer() { 9491 Text(this.message) 9492 .id('HelloWorld') 9493 .fontSize($r('app.float.page_text_font_size')) 9494 .fontWeight(FontWeight.Bold) 9495 .alignRules({ 9496 center: { anchor: '__container__', align: VerticalAlign.Center }, 9497 middle: { anchor: '__container__', align: HorizontalAlign.Center } 9498 }) 9499 .onClick(() => { 9500 // 通过id查询获得Text节点的FrameNode对象。不建议设置多个相同的id的节点。 9501 let node = this.getUIContext().getFrameNodeById("HelloWorld"); 9502 console.info(`Find HelloWorld Tag:${node!.getNodeType()} id:${node!.getUniqueId()}`); 9503 // 通过while循环遍历查询页面的根节点。如果当前节点为自定义组件，则会继续遍历其父节点。 9504 while (node && node.getParent() && node.getParent()!.getUniqueId() > 0) { 9505 node = node.getParent(); 9506 console.info(`Find FrameNode Tag:${node!.getNodeType()} id:${node!.getUniqueId()}`); 9507 } 9508 }) 9509 } 9510 .height('100%') 9511 .width('100%') 9512 } 9513} 9514 9515@Entry 9516@Component 9517struct Index { 9518 @State message: string = 'Hello World'; 9519 9520 build() { 9521 RelativeContainer() { 9522 ChildView({ message: this.message }) 9523 .height('100%') 9524 .width('100%') 9525 } 9526 .height('100%') 9527 .width('100%') 9528 } 9529} 9530```
