# PersistentPopup

**Repository Path**: scenario-samples/persistent-popup

## Basic Information

- **Project Name**: PersistentPopup
- **Description**: 【鸿蒙 Harmony Next 示例 代码】本示例基于Navigation.Dialog的特性，实现切换页面时自定义弹窗不消失。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-10
- **Last Updated**: 2025-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 切换页面弹窗不消失案例

## 介绍

本示例基于Navigation.Dialog的特性，实现切换页面时自定义弹窗不消失。


## 效果预览

<div >    
<img src="screenshots/image.gif" height = "400" alt="图片名称"  />
</div>

## 约束与限制
DevEco Studio版本：DevEco Studio 5.0.1 Release及以上。

HarmonyOS SDK版本：HarmonyOS 5.0.1 Release SDK及以上。

设备类型：华为手机。

HarmonyOS系统：HarmonyOS 5.0.1 Release及以上。


## 实现思路

实现弹窗随页面切换不消失效果

```typescript
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('')
      })
  }
  .width('50%')
    .height('30%')
    .backgroundColor(Color.Blue)
    .transition(
      TransitionEffect.scale({ x: 0, y: 0 }).animation({
        duration: 300,
        curve: Curve.Friction
      })
    )
}
.width('100%')
  .height('100%')
```



## 工程目录

   ```markdown
   entry/src/main/ets/
   |---cases                                 
   |   |---navDialog                         // 自定义弹窗组件 
   |   |   |---CaseDialog.ets
   |   |   |---PrivacyDialog.ets
   |---common
   |   |---CommonConstants.ets
   |---entryability
   |   |---EntryAbility.ets
   |---pages
   |   |---index.ets                          // 页面入口
   |---router
   |   |---AppRouter.ets                      // 路由工具类
   |---util                                   
   |   |---AppDialog.ets                      // 封装弹窗控制器，定义弹窗UI组件    
   ```


## 参考文档

[切换页面弹窗不消失](https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-custome-dialog-development-practice-V5#section690764913302)


## ChangeLog

| 修改内容 |   时间    |
|:----:|:-------:|
| 首次提交 | 2025.03 |



## 一份简单的问卷反馈

亲爱的Harmony Next开发者，您好！<br>
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)

<div style="text-align: left;">