前言
代码案例基于Api13。
在前边的文章中，关于wrapBuilder传递参数我们有过概述，无论是定义在局部还是全局，传递参数都是非常的简单，直接调用builder函数即可，简单案例如下所示：
@Builder function TextView(value: string) { Text(value) } @Entry @Component struct Index { textBuilder: WrappedBuilder<[string]> = wrapBuilder(TextView) build() { Column() { this.textBuilder.builder("我是传递的参数") }.width("100%") .height("100%") .justifyContent(FlexAlign.Center) } }
以上的参数，是在UI视图中传递的，传递参数是非常的简单，但是，如果不在UI视图中呢？这就是我最近遇到的问题，团队中使用了我自定义的任意位置的dialog，和下图的dialog类似，有一个需求是，message不是简单的文字，有可能是图文，有可能是富文本，也有可能是其他的展示，这种情况在接收一个文字或者其它类型就显得不够灵活了，所以，我直接把message这个组件暴露了出去，由调用者传递。
这样就解决了message丰富多样的情况，毕竟组件是调用者传递的，虽然效果实现了，但是又提了问题：
“我这个message，是根据逻辑进行展示的，比如为true展示这个，false就展示另一个，数据如何传递过去呢？”
“……呃，要求那么多，那算了，你自己定义吧”，当然了，这只是自己的心声，实际情况，还是点头说，好的，马上解决。
基本案例
案例，这里我简化了，主要是定义了一个弹窗工具类。
import { ComponentContent } from "@kit.ArkUI" import { DialogAttribute } from "./DialogAttribute" export class DialogUtils { private constructor() { } private static mDialogUtils: DialogUtils public static get() { if (DialogUtils.mDialogUtils == undefined) { DialogUtils.mDialogUtils = new DialogUtils() } return DialogUtils.mDialogUtils } showDialog(context: UIContext, dialogAttribute?: DialogAttribute) { if (dialogAttribute == undefined) { dialogAttribute = new DialogAttribute() } this.show(context, dialogAttribute) } private show(context: UIContext, object: Object) { let dView = wrapBuilder<Object[]>(dialogView) let dialogContent: ComponentContent<Object> = new ComponentContent(context, dView, object) context.getPromptAction().openCustomDialog(dialogContent) } } @Builder function dialogView(dialogAttribute?: DialogAttribute) { Column() { Text(dialogAttribute?.title) .fontSize(16) .fontWeight(FontWeight.Bold) .margin({ top: 10 }) //message是一个组件视图 if (dialogAttribute?.messageView != undefined) { dialogAttribute?.messageView.builder() } Row() { Text("取消") .height(40) .textAlign(TextAlign.Center) .layoutWeight(1) Text("确定") .height(40) .layoutWeight(1) .textAlign(TextAlign.Center) }.width("100%") }.width("80%") .backgroundColor(Color.White) .borderRadius(10) }
在实际的开发中，很多的内容都是动态可变的，也需要把这些属性暴露出去，这里我简单定义了一个属性文件，在实际的开发中，会有很多的属性，这里，我简单的定义了两个，主要是用于测试。
export class DialogAttribute { title?: messageView?: WrappedBuilder<Object[]> }
直接调用：
import { DialogUtils } from './DialogUtils' @Builder function messageView() { Text("简单测试") .margin({ top: 20, bottom: 20 }) } @Entry @Component struct Index { build() { Column() { Button("点击") .onClick(() => { DialogUtils.get() .showDialog(this.getUIContext(), { title: "我是dialog弹窗", messageView: wrapBuilder(messageView) }) }) }.width("100%") .height("100%") .justifyContent(FlexAlign.Center) } }
通过以上的案例，我们就简单搞了一个自定义弹窗，点击按钮之后，就会弹出一个弹窗，支持message消息自定义组件，实现任意的效果。
话说回来，我如何在全局的@Builder里接收参数呢？也就是下面的位置中：
@Builder function messageView() { Text("简单测试") .margin({ top: 20, bottom: 20 }) }
传递参数
方式一，中间中转
所谓中间中转，我们可以在一个类中，定义一个变量，用于接收传递的数据，这是最简单的，这边传递的时候赋值，那边使用的时候取出。
定义赋值变量：
private mParams?: Object private setData(params?: Object) { this.mParams = params } getData(): Object | undefined { return this.mParams }
接收数据的时候，进行赋值
showDialog(context: UIContext, dialogAttribute?: DialogAttribute) { if (dialogAttribute == undefined) { dialogAttribute = new DialogAttribute() } //设置数据 this.setData(dialogAttribute.messageData) this.show(context, dialogAttribute) }
使用：
@Builder function messageView() { //这里接收传递的参数 Text(DialogUtils.get().getData()?.toString()) .margin({ top: 20, bottom: 20 }) }
有一点需要知道，那就是如果多个弹窗共用，赋值变量是单列或者静态的时候，在dialog销毁的时候记得恢复原值。
方式二，直接接收
因为把wrapBuilder传递给了ComponentContent对象职中，在wrapBuilder中使用wrapBuilder时，发现会直接携带参数，我们直接使用即可。
let dView = wrapBuilder<Object[]>(dialogView) let dialogContent: ComponentContent<Object> = new ComponentContent(context, dView, object) context.getPromptAction().openCustomDialog(dialogContent)
定义接收参数
在属性定义文件中，定义我们需要接收的数据，由于数据的类型不确定，这里我们可以直接定义为一个Object。
传递数据
DialogUtils.get() .showDialog(this.getUIContext(), { title: "我是dialog弹窗", messageView: wrapBuilder(messageView), messageData: "简单传递一个字符串" })
直接接收传递的对象，获取到指定的字段参数即可。
@Builder function messageView(attr: DialogAttribute) { //这里接收传递的参数 Text(attr.messageData?.toString()) .margin({ top: 20, bottom: 20 }) }
相关总结
本文，主要简单了介绍了一下，非UI使用的情况下，wrapBuilder传递数据问题，除了以上的方式之外，还有其它的方式可以实现，在实际的开发中，还是具体问题具体分析。
