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

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

介绍

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

实现自定义弹窗封装源码链接

效果预览

使用说明

实现了隐私弹窗不关闭，点击Button后弹出的隐私弹窗点击弹窗外其他位置均不会使弹窗关闭，只有点击同意或不同意才会关闭弹窗。 实现了半模态弹窗与半模态弹窗动态。

实现思路

切换页面不消失弹窗

@Component
export struct PrivacyDialog {

  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Center }) {
        Column() {
        }
        .width('100%')
        .height('100%')
        .backgroundColor('rgba(0,0,0,0.5)')
        .transition(
          TransitionEffect.OPACITY.animation({
            duration: 300,
            curve: Curve.Friction
          })
        )
        .onClick(() => {
          AppRouter.pop();
        })

        Column() {
          Text('弹窗')
            .fontColor(Color.White)
          Button('新页面', { stateEffect: true, type: ButtonType.Capsule })
            .onClick(() => {
              AppRouter.push('privacyPage')
            })
        }
        .width('50%')
        .height('30%')
        .backgroundColor(Color.Blue)
        .transition(
          TransitionEffect.scale({ x: 0, y: 0 }).animation({
            duration: 300,
            curve: Curve.Friction
          })
        )
      }
      .width('100%')
      .height('100%')
    }
    .mode(NavDestinationMode.DIALOG)
    .hideTitleBar(true)
  }
}