HarmonyOS鸿蒙Next中如何实现一个自定义CustomDialogControllerOptions的builder方法？

HarmonyOS鸿蒙Next中如何实现一个自定义CustomDialogControllerOptions的builder方法？ 系统提供的自定义弹窗参数里有一个： builder: any;

通过它传入一个自定义的弹窗组件，使用例子：
 

dialogController: CustomDialogController = new CustomDialogController({
  builder: CustomeInfoDialog({ param1: '参数1', param2: '参数2' })
})

通过dialogController可以弹出自定义弹窗CustomeInfoDialog，以及所使用的param1、 param2两个参数。

问题：
我现在想写一个类似于CustomDialogController的控制器，里面也可以传递一个builder，去加载自定义弹窗，我该如何实现？

我知道一种弹出自定义弹窗的实现方式：

export class CustomeDialog {
static open(params: ParamsInterface){//ParamsInterface，是一些自定义参数
        let uiContext: UIContext | undefined = AppStorage.get(LOCAL_UI_CONTEXT);
        let contentNode: ComponentContent<ParamsInterface> | undefined = undefined
        let toastParams = new ParamsInterfaceClass(params)//一个interface转成class
        contentNode = new ComponentContent(uiContext!, wrapBuilder(CustomeDialogBuilder), toastParams);
        if(uiContext){
            try {
                //打开自定义弹窗，但是这里的参数只能是我定义好的。没办法像系统的可以直接调对应的弹窗传递param1、 param2
                uiContext.getPromptAction().openCustomDialog(contentNode, {
                    }
                })
            } catch (e) {
                console.error(e)
            }
        }
    }
}

@Builder
function CustomeDialogBuilder(params?: ParamsInterface) {}

更多关于HarmonyOS鸿蒙Next中如何实现一个自定义CustomDialogControllerOptions的builder方法？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，通过CustomDialogController的构造方法传入CustomDialogControllerOptions对象，并在其中定义builder方法。示例代码：

let controller = new CustomDialogController({
  builder: CustomDialogExample({}),
  // 其他可选配置
});

其中CustomDialogExample为自定义弹窗组件。builder方法需返回一个@CustomDialog装饰的组件。

更多关于HarmonyOS鸿蒙Next中如何实现一个自定义CustomDialogControllerOptions的builder方法？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


要实现自定义的CustomDialogControllerOptions的builder方法，你可以通过封装一个类来管理弹窗的创建和参数传递。以下是一个示例实现：

export class CustomDialogController {
  private builder: any;
  private params: any;

  constructor(options: { builder: any, params?: any }) {
    this.builder = options.builder;
    this.params = options.params;
  }

  openDialog(): void {
    let uiContext: UIContext | undefined = AppStorage.get(LOCAL_UI_CONTEXT);
    if (uiContext) {
      try {
        const contentNode = new ComponentContent(uiContext, wrapBuilder(this.builder), this.params);
        uiContext.getPromptAction().openCustomDialog(contentNode, {});
      } catch (e) {
        console.error(e);
      }
    }
  }
}

// 使用示例
const myDialogController = new CustomDialogController({
  builder: CustomeInfoDialog,
  params: { param1: '参数1', param2: '参数2' }
});

myDialogController.openDialog();

这种方式允许你通过构造函数传递builder和参数，并在需要时调用openDialog方法显示弹窗。参数会通过ComponentContent传递给builder函数。

回到顶部