HarmonyOS 鸿蒙Next 自定义命令式弹框

HarmonyOS 鸿蒙Next 自定义命令式弹框

主要通过ComponentContent类和uiContext.getPromptAction().openCustomDialog实现。 具体代码如下：

    const uiContext = await this.getUIContext()
    const closeOnBack = options.closeOnBack ?? true
    const onWillDismiss = options.onWillDismiss;
    const onDidDisappear = options.onDidDisappear;
    const id = options.id ? options.id : new BaseSingleDialog().id;
    const componentContent = new ComponentContent(uiContext,
      wrapperBuilder, attachProperty(options, {
        onWillDismiss: (dismiss: DismissDialogAction) => {
          if (dismiss.reason === DismissReason.PRESS_BACK && !closeOnBack) {
            return;
          }
          onWillDismiss ? onWillDismiss(dismiss) : dismiss.dismiss()
        },
        onDidDisappear: () => {
          // 及时移除销毁实例
          const removeInfo = MBaseDialogApi.dialogs.find(_ => _.id === id);
          if (removeInfo) {
            MBaseDialogApi.removeDialog(removeInfo.id);
            removeInfo.componentContent && removeInfo.componentContent.dispose()
          }
          onDidDisappear?.()
        }
      }))
    uiContext.getPromptAction().openCustomDialog(componentContent, options)

自定义内容依靠的WrappedBuilder类，比如：

 const componentContent = new ComponentContent(uiContext,wrapBuilder(CustomDialogBuilder))


@Builder
export function CustomDialogBuilder(options: CustomOptions) {
  CustomDialogView({ options, builder: options.builder })
}

@Component
struct CustomDialogView {
  @Prop options: CustomOptions;
  @BuilderParam builder?: () => void;

  build() {
    Column() {
      this.builder?.()
    }
    .height(this.options.height)
    .width(this.options.width)
  }
}

具体代码示例可参考仓库源代码