本文原创发布在华为开发者社区，更多鸿蒙场景化示例请见华为开发者联盟官网“行业实践与常见问题”专题页。

介绍

本示例提供promptAction全局弹窗，主要功能是创建，拦截监听，设置弹窗样式、弹出动画。

基于promptAction实现全局弹窗源码链接

效果预览

使用说明

• 创建自定义弹窗
• 弹窗拦截并监听事件
• 自定义弹窗动画1，渐隐渐显
• 自定义弹窗动画2，底部升起，下落消失，左进右出。

实现思路

1. 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见UIContext说明。建议在无UI界面的场景外，均使用UIContext中的弹窗方法。通过使用UIContext中的getPromptAction方法获取当前UI上下文关联的PromptAction对象。设置CustomDialogOptions自定义弹窗内容，可以设置弹窗对齐方式、相对位置，模态、遮蔽层、回调以及过渡效果。

    .onClick(() => {
      let uiContext = this.getUIContext();
      let promptAction = uiContext.getPromptAction();
      let contentNode =
      new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message));
      try {
      promptAction.openCustomDialog(contentNode, {
        keyboardAvoidMode: KeyboardAvoidMode.NONE,
        alignment: DialogAlignment.Default,
        showInSubWindow: false,
        autoCancel: true,
        offset: { dx: 35, dy: 5 },
      })
      } catch (error) {
      let message = (error as BusinessError).message;
      let code = (error as BusinessError).code;
      }
    })

2. onWillDismiss交互式关闭回调函数。当用户执行点击遮障层关闭、左滑/右滑、三键back、键盘ESC关闭交互操作时，如果注册该回调函数，则不会立刻关闭弹窗。在回调函数中可以通过reason得到阻拦关闭弹窗的操作类型，从而根据原因选择是否能关闭弹窗。本示例设置阻拦点击遮罩层关闭弹窗操作，左右滑back依然可以退出。

  promptAction.openCustomDialog(contentNode,
    {
      keyboardAvoidMode: KeyboardAvoidMode.NONE,
      alignment: DialogAlignment.Default,
      showInSubWindow: false,
      autoCancel: true,
      onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
        if (dismissDialogAction.reason !== 1) {
            dismissDialogAction.dismiss();
        }
    }
  });

3. transition属性设置弹窗显示和退出的过渡效果。如果不设置，则使用默认的显示/退出动效，即为渐隐渐显。

  promptAction.openCustomDialog(contentNode, {
    keyboardAvoidMode: KeyboardAvoidMode.NONE,
    alignment: DialogAlignment.Default,
    showInSubWindow: false,
    isModal: false,
    autoCancel: true,
    // 定义进场出场转场动画效果
    transition: TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.START),
    TransitionEffect.move(TransitionEdge.END)).animation({ duration: 500 })
  });