diff --git a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md index 4658060f9b8423565ab21841466f130102cbb56b..da24821769d6d6c8527d9bcaceed66788f39ad74 100644 --- a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md +++ b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md @@ -55,7 +55,9 @@ import { BuilderNode, RenderOptions, NodeRenderType } from "@kit.ArkUI"; ## BuilderNode -class BuilderNode\ +ArkTS1.1: class BuilderNode\ + +ArkTS1.2: class BuilderNode\ BuilderNode支持通过无状态的UI方法[@Builder](../../quick-start/arkts-builder.md)生成组件树，并持有组件树的根节点。不支持定义为状态变量。BuilderNode中持有的FrameNode仅用于将该BuilderNode作为子节点挂载到其他FrameNode上。对BuilderNode持有的FrameNode进行属性设置与子节点操作可能会产生未定义行为，因此不建议通过BuilderNode的[getFrameNode](#getframenode)方法和[FrameNode](js-apis-arkui-frameNode.md#framenode)的[getRenderNode](js-apis-arkui-frameNode.md#getrendernode)方法获取RenderNode，并通过[RenderNode](js-apis-arkui-renderNode.md#rendernode)的接口对其进行属性设置与子节点操作。 @@ -83,7 +85,9 @@ constructor(uiContext: UIContext, options?: RenderOptions) ### build -build(builder: WrappedBuilder\, arg?: Object): void +ArkTS1.1: build(builder: WrappedBuilder\, arg?: Object): void + +ArkTS1.2: build(builder: WrappedBuilder\<@Builder (t: T)=>void >, arg: T): void 依照传入的对象创建组件树，并持有组件树的根节点。无状态的UI方法[@Builder](../../quick-start/arkts-builder.md)最多拥有一个根节点。 支持自定义组件。不支持自定义组件使用[@Reusable](../../quick-start/arkts-create-custom-components.md#自定义组件的基本结构)、[@Link](../../quick-start/arkts-link.md)、[@Provide](../../quick-start/arkts-provide-and-consume.md)、[@Consume](../../quick-start/arkts-provide-and-consume.md)等装饰器，来同步BuilderNode挂载的页面与BuilderNode中自定义组件的状态。 @@ -105,8 +109,8 @@ build(builder: WrappedBuilder\, arg?: Object): void | 参数名 | 类型 | 必填 | 说明 | | ------- | --------------------------------------------------------------- | ---- | -------------------------------------------------------------------------------------- | -| builder | [WrappedBuilder\](../../quick-start/arkts-wrapBuilder.md) | 是 | 创建对应节点树的时候所需的无状态UI方法[@Builder](../../quick-start/arkts-builder.md)。 | -| arg | Object | 否 | builder的入参。当前仅支持一个入参，且入参对象类型与@Builder定义的入参类型保持一致。 | +| builder | ArkTS1.1：[WrappedBuilder\](../../quick-start/arkts-wrapBuilder.md)
ArkTS1.2：[WrappedBuilder\<@Builder (t: T)=>void>](../../quick-start/arkts-wrapBuilder.md) | 是 | 创建对应节点树的时候所需的无状态UI方法[@Builder](../../quick-start/arkts-builder.md)。 | +| arg | ArkTS1.1：Object
ArkTS1.2：T | ArkTS1.1：否
ArkTS1.2：是 | builder的入参。当前仅支持一个入参，且入参对象类型与@Builder定义的入参类型保持一致。 | ### BuildOptions12+ @@ -119,11 +123,13 @@ build的可选参数。 | 名称 | 类型 | 必填 | 说明 | | ------------- | -------------------------------------- | ---- | ------------------------------------------------------------ | -| nestingBuilderSupported |boolean | 否 | 是否支持Builder嵌套Builder进行使用。其中，false表示Builder使用的入参一致，true表示Builder使用的入参不一致。默认值:false。 | +| nestingBuilderSupported |boolean | 否 | ArkTS1.1：是否支持Builder嵌套Builder进行使用。其中，false表示Builder使用的入参一致，true表示Builder使用的入参不一致。默认值：false
ArkTs1.2：该值无效，默认支持@Builder参数不一致，且行为与@Builder的行为保持一致。 | ### build12+ -build(builder: WrappedBuilder\, arg: Object, options: [BuildOptions](#buildoptions12)): void +ArkTS1.1: build(builder: WrappedBuilder\, arg: Object, options: BuildOptions): void + +ArkTS1.2: build(builder: WrappedBuilder\<<@Builder (t: T)=>void>, arg: T , options: BuildOptions): void 依照传入的对象创建组件树，并持有组件树的根节点。无状态的UI方法[@Builder](../../quick-start/arkts-builder.md)最多拥有一个根节点。 支持自定义组件。不支持使用自定义组件使用[@Reusable](../../quick-start/arkts-create-custom-components.md#自定义组件的基本结构)、[@Link](../../quick-start/arkts-link.md)、[@Provide](../../quick-start/arkts-provide-and-consume.md)、[@Consume](../../quick-start/arkts-provide-and-consume.md)等装饰器用于当前页面与自定义组件的状态同步。 @@ -143,11 +149,13 @@ build(builder: WrappedBuilder\, arg: Object, options: [BuildOptions](#buil | 参数名 | 类型 | 必填 | 说明 | | ------- | --------------------------------------------------------------- | ---- | -------------------------------------------------------------------------------------- | -| builder | [WrappedBuilder\](../../quick-start/arkts-wrapBuilder.md) | 是 | 创建对应节点树的时候所需的无状态UI方法[@Builder](../../quick-start/arkts-builder.md)。 | -| arg | Object | 是 | builder的入参。当前仅支持一个入参，且入参对象类型与@Builder定义的入参类型保持一致。 | +| builder | ArkTS1.1：[WrappedBuilder\](../../quick-start/arkts-wrapBuilder.md)
ArkTS1.2：[WrappedBuilder\<@Builder (t: T)=>void>](../../quick-start/arkts-wrapBuilder.md) | 是 | 创建对应节点树的时候所需的无状态UI方法[@Builder](../../quick-start/arkts-builder.md)。 | +| arg | ArkTS1.1：Object
ArkTS1.2：T | 是 | builder的入参。当前仅支持一个入参，且入参对象类型与@Builder定义的入参类型保持一致。 | | options | BuildOptions | 是 | build的配置参数，判断是否支持@Builder中嵌套@Builder的行为。 | + **示例：** +ArkTS1.1示例: ```ts import { BuilderNode, NodeContent } from "@kit.ArkUI"; @@ -207,6 +215,138 @@ struct Index { } ``` +ArkTS1.2示例: +```ts +import { + Text, + Column, + Component, + Button, + ClickEvent, + UIContext, + Builder, + Entry, + ContentSlot, + Row, + wrapBuilder， + State +} from "@kit.ArkUI" +import { + NodeContent, + BuilderNode, + FrameNode +} from "@ohos.arkui.node" + +class ParamsInterface { + text?: string; +} + +@Builder +function buildText(params: ParamsInterface) { + Column() { + Text(params.text) + .fontSize(50) + } +} + +@Entry +@Component +struct Index { + @State message: string = "HELLO" + private content: NodeContent = new NodeContent(); + + build() { + Row() { + Column() { + Button('addBuilderNode') + .onClick((clickEvent:ClickEvent) => { + let buildNode = new BuilderNode(this.getUIContext()); + buildNode.build(wrapBuilder(buildText), { text: this.message } as ParamsInterface); + this.content.addFrameNode(buildNode.getFrameNode()!); + }) + ContentSlot(this.content) + } + .width('100%') + } + .height('100%') + } +} +``` + +### build20+ + + build(builder: WrappedBuilder<@Builder ()=>void>): void; + +> **说明** +> +> @Builder进行创建和更新的规格参考[@Builder](../../quick-start/arkts-builder.md)。 + +**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**ArkTS版本：** 该接口仅适用于ArkTS1.2。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | --------------------------------------------------------------- | ---- | -------------------------------------------------------------------------------------- | +| builder | WrappedBuilder<@Builder ()=>void>) | 是 | 创建对应节点树的时候所需的无状态UI方法[@Builder](../../quick-start/arkts-builder.md)。 | + +**示例1：** +ArkTS1.2示例: +```ts +import { + Text, + Column, + Component, + Button, + ClickEvent, + UIContext, + Builder, + Entry, + ContentSlot, + Row, + wrapBuilder， + State +} from "@kit.ArkUI" +import { + NodeContent, + BuilderNode, + FrameNode +} from "@ohos.arkui.node" + +@Builder +function buildText() { + Column() { + Text("buildText") + .fontSize(50) + } +} + +@Entry +@Component +struct Index { + @State message: string = "HELLO" + private content: NodeContent = new NodeContent(); + + build() { + Row() { + Column() { + Button('addBuilderNode') + .onClick((clickEvent:ClickEvent) => { + let buildNode = new BuilderNode(this.getUIContext()); + buildNode.build(wrapBuilder(buildText)); + this.content.addFrameNode(buildNode.getFrameNode()!); + }) + ContentSlot(this.content) + } + .width('100%') + } + .height('100%') + } +} +``` ### getFrameNode @@ -430,7 +570,9 @@ struct Index { ### update -update(arg: Object): void +ArkTS1.1: update(arg: Object): void + +ArkTS1.2: update(arg: T): void 根据提供的参数更新BuilderNode，该参数为[build](#build)方法调用时传入的参数类型相同。对自定义组件进行update的时候需要在自定义组件中使用的变量定义为@Prop类型。 @@ -442,7 +584,7 @@ update(arg: Object): void | 参数名 | 类型 | 必填 | 说明 | | ------ | ------ | ---- | ------------------------------------------------------------------------ | -| arg | Object | 是 | 用于更新BuilderNode的参数，和[build](#build)调用时传入的参数类型一致。 | +| arg | AkrTs1.1：Object
ArkTs1.2：T | 是 | 用于更新BuilderNode的参数，和[build](#build)调用时传入的参数类型一致。 | **示例：** ```ts