鸿蒙HarmonyOS NEXT实战（5.0）ArkUI开发＞模态转场方式

 鸿蒙HarmonyOS NEXT开发实战往期文章必看（持续更新......）

HarmonyOS NEXT应用开发性能实践总结

HarmonyOS NEXT应用开发案例实践总结合集

最新版！“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到精通）

非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！

---

模态转场是新的界面覆盖在旧的界面上，旧的界面不消失的一种转场方式。

表1 模态转场接口

接口	说明	使用场景
bindContentCover	弹出全屏的模态组件。	用于自定义全屏的模态展示界面，结合转场动画和共享元素动画可实现复杂转场动画效果，如缩略图片点击后查看大图。
bindSheet	弹出半模态组件。	用于半模态展示界面，如分享框。
bindMenu	弹出菜单，点击组件后弹出。	需要Menu菜单的场景，如一般应用的“+”号键。
bindContextMenu	弹出菜单，长按或者右键点击后弹出。	长按浮起效果，一般结合拖拽框架使用，如桌面图标长按浮起。
bindPopup	弹出Popup弹框。	Popup弹框场景，如点击后对某个组件进行临时说明。
if	通过if新增或删除组件。	用来在某个状态下临时显示一个界面，这种方式的返回导航需要由开发者监听接口实现。

使用bindContentCover构建全屏模态转场效果

bindContentCover接口用于为组件绑定全屏模态页面，在组件出现和消失时可通过设置转场参数ModalTransition添加过渡动效。

1. 定义全屏模态转场效果bindContentCover。

2. 定义模态展示界面。

   // 通过@Builder构建模态展示界面
   @Builder MyBuilder() {
     Column() {
       Text('my model view')
     }
     // 通过转场动画实现出现消失转场动画效果，transition需要加在builder下的第一个组件 
     .transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) }))
   }
   ts

3. 通过模态接口调起模态展示界面，通过转场动画或者共享元素动画去实现对应的动画效果。

   // 模态转场控制变量
   @State isPresent: boolean = false;
   
   Button('Click to present model view')
     // 通过选定的模态接口，绑定模态展示界面，ModalTransition是内置的ContentCover转场动画类型，这里选择None代表系统不加默认动画，通过onDisappear控制状态变量变换
     .bindContentCover(this.isPresent, this.MyBuilder(), {
               modalTransition: ModalTransition.NONE,
               onDisappear: () => {
                 this.isPresent = !this.isPresent;
               }
             })
     .onClick(() => {
       // 改变状态变量，显示模态界面
       this.isPresent = !this.isPresent;
     })
   ts

完整示例代码和效果如下。

import curves from '@ohos.curves';

interface PersonList {
  name: string,
  cardnum: string
}

@Entry
@Component
struct BindContentCoverDemo {
  private personList: Array<PersonList> = [
    { name: '王**', cardnum: '1234***********789' },