实现自定义弹窗鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例基于Navigation实现以下四种自定义弹窗。

1. 用户隐私协议弹窗
2. 切换页面弹窗不消失
3. 半模态弹窗
4. 动态半模态弹窗

实现自定义弹窗源码链接

效果预览

使用说明

1. 点击“隐私协议”按钮，会从下往上弹出用户隐私协议。
2. 点击“切换页面弹窗不消失”按钮，会弹出弹窗，点击弹窗上的“新页面”按钮，切换到新的页面。
3. 点击“半模态弹窗”，跳到新页面，点击“打开弹窗”，弹出半屏弹窗。点击“新弹窗”按钮，弹出全屏弹窗。
4. 点击“半模态弹窗”，跳到新页面，点击“打开弹窗”，弹出半屏弹窗，长按弹窗可进行拖动。

实现思路

基于Navigation.Dialog的透明页面特性，可以用于实现弹窗效果，而且Navigation.Dialog存在于路由栈中，天然可以实现切换页面弹窗不消失。

实现弹窗自定义动画

通过.transition属性分别实现背景和内容的转场动画，实现弹窗从下往上的抽屉式弹出以及关闭时从上往下收回。在弹窗内容的Column容器中传入WrappedBuilder来实现动态的自定义弹窗内容。核心代码如下。

.transition(
          TransitionEffect.scale({ x: 0, y: 0 }).animation({
            duration: 300,
            curve: Curve.Friction
          })
        )
1.
2.
3.
4.
5.
6.

自定义弹窗组件

先定义路由工具类AppRouter，并创建路由栈NavPathStack。在根页面中注册NavPathStack。定义弹窗选项类AppDialogOption，弹窗样式类AppDialogStyle，并创建自定义弹窗组件DefaultDialog。页面与弹窗，弹窗与弹窗之间主要通过路由跳转NavPathStack.pushPathByName传递参数。

点击不同按钮时，调用AppRouter.openDialog方法打开对应的自定义弹窗。核心代码如下，源码参考AppRouter.ets

public static openDialog(name: string, params?: RouterParams): void {
    AppRouter.instance.pathStack.pushPath({
      name: name, param: params, onPop: (data: PopInfo) => {
        if (params?.onPop) {
          params.onPop!(data);
        }
      }
    });
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.