HarmonyOS wrapBuilder\(xxx\).builder\(xxx\)函数存在疑问？

Question

示例代码如下：

@Builder
function text<T extends Object>(params: Options<T>) {
  Column() {
      if (params.builder) {
        if (params.builderArgs) {
          params.builder.builder(params.builderArgs)
        } else {
          params.builder.builder()
        }
      }
    }
}


export namespace alert {
export interface Options<T extends Object> {
    builder?: WrappedBuilder<T[]>
    builderArgs?: T
  }

  export function show<T extends Object>(options: Options<T>,cotext: UIContext): string {
    const prompt = context.getPromptAction()
    const componentNode = new ComponentContent<BuildStandardParams<T>>(context,wrapBuilder(standardAlert), options,{nestingBuilderSupported: true})
    prompt.openCustomDialog(componentNode)
  }
}

//// index.ets
build() {
    Column() {
      RelativeContainer() {
        Text(this.message)
          .id('HelloWorld')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            middle: { anchor: '__container__', align: HorizontalAlign.Center }
          })
          .onClick(() => {
            alert.show({
              builder: wrapBuilder(text),
              builderArgs: '我是自定义内容
            })
          })
      }
      .layoutWeight(1)
      .width('100%')
    }
    .height('100%')
    .width('100%')
  }
}

@Builder
function text(message: string) {
  Text('带参数的builder' + message)
}

问题： params.builder.builder(params.builderArgs)

当这一句进行渲染时，渲染出的文本结果是

带参数的builder[Object object]，经查验该Object对象为传入Options类型的params整个对象

请问这句代码是否有不妥之处，应如何修改

而在index的build中间使用：wrapBuilder(text).builder('内容')却是是可以正确渲染

Answer 1

wrapBuilder方法只能传入全局@Builder方法，传参可以看下：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-wrapbuilder-V5\#限制条件

您的demo我这里修改了下可以参考一下

import { ComponentContent, LengthMetrics } from '@kit.ArkUI';

@Builder
function MyBuilder(valueList: string[], size: number) {
  ForEach(valueList,(value:string,index)=>{
    Text(value)
      .fontSize(size)
  })

}

@Entry
@ComponentV2
struct Index {
  @Local message: string = 'Hello World';

  build() {
    Column() {
      RelativeContainer() {
        Text(this.message)
          .id('HelloWorld')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            middle: { anchor: '__container__', align: HorizontalAlign.Center }
          })
          .onClick(() => {
            dialog.show({
              title: '我是标题',
              message: '我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容',
              builder: wrapBuilder(MyBuilder),
              builderArgs: ['我是自定义内容'],
              onDismiss: () => {
                console.log('弹窗将要消失')
              }
            },this.getUIContext())
          })
      }
      .layoutWeight(1)
      .width('100%')
    }
    .height('100%')
    .width('100%')
  }



}

export namespace dialog {

  export function show<T extends Object>(options: Options<T>,context: UIContext) {
    const prompt = context.getPromptAction()
    const componentNode = new ComponentContent<Options<T>>(context,wrapBuilder(standardDialog), options,{nestingBuilderSupported: true})
    prompt.openCustomDialog(componentNode,{
      onWillDismiss: (action) => {
        if (options.autoCancel ?? true) {
          action.dismiss()
        }
      },
      onWillDisappear: () => {
        if (options.onDismiss) {
          options.onDismiss()
        }
      }
    })
  }

  export interface Options<T extends Object> {
    autoCancel?: boolean
    title?: ResourceStr
    message?: ResourceStr
    builder?: WrappedBuilder<[string[],number]>
    builderArgs?: string[]
    onDismiss?: () => void
  }

}

@Builder
function standardDialog<T extends Object>(params: dialog.Options<T>) {
  Column({space: 20}){
    if (params.title) {
      Text(params.title)
        .maxLines(1)
        .fontWeight(FontWeight.Bold)
        .fontSize(18)
        .textOverflow({overflow: TextOverflow.Ellipsis})
        .flexShrink(0)
    }
    if (params.message) {
      Scroll() {
        Text(params.message)
          .wordBreak(WordBreak.BREAK_WORD)
          .lineSpacing(LengthMetrics.vp(5))
          .fontSize(15)
      }
      .flexShrink(1)
      .height('auto')
      .scrollBar(BarState.Off)
      .padding(0)
    }
    if (params.builder) {
      if (params.builderArgs) {
        params.builder.builder(params.builderArgs, 20)
      }
    }
  }
  .padding({left: 16,right: 16, top: 24,bottom: 20})
  .width('100%')
  .backgroundColor(Color.White)
  .flexShrink(1)
  .borderRadius(8)
  .onClick(() => {})
  .width('70%')
  .constraintSize({
    maxWidth: 300,
  })
  .justifyContent(FlexAlign.Center)
  .onClick(() => {

  })
}