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) }))
}

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;
  })

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

import curves from '@ohos.curves';

interface PersonList {
  name: string,
  cardnum: string
}

@Entry
@Component
struct BindContentCoverDemo {
  private personList: Array<PersonList> = [
    { name: '王**', cardnum: '1234***********789' },
    { name: '宋*', cardnum: '2345***********789' },
    { name: '许**', cardnum: '3456***********789' },
    { name: '唐*', cardnum: '4567***********789' }
  ];
  // 第一步：定义全屏模态转场效果bindContentCover
  // 模态转场控制变量
  @State isPresent: boolean = false;

  // 第二步：定义模态展示界面
  // 通过@Builder构建模态展示界面
  @Builder
  MyBuilder() {
    Column() {
      Row() {
        Text('选择乘车人')
          .fontSize(20)
          .fontColor(Color.White)
          .width('100%')
          .textAlign(TextAlign.Center)
          .padding({ top: 30, bottom: 15 })
      }
      .backgroundColor(0x007dfe)

      Row() {
        Text('+ 添加乘车人')
          .fontSize(16)
          .fontColor(0x333333)
          .margin({ top: 10 })
          .padding({ top: 20, bottom: 20 })
          .width('92%')
          .borderRadius(10)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.White)
      }

      Column() {
        ForEach(this.personList, (item: PersonList, index: number) => {
          Row() {
            Column() {
              if (index % 2 == 0) {
                Column()
                  .width(20)
                  .height(20)
                  .border({ width: 1, color: 0x007dfe })
                  .backgroundColor(0x007dfe)
              } else {
                Column()
                  .width(20)
                  .height(20)
                  .border({ width: 1, color: 0x007dfe })
              }
            }
            .width('20%')

            Column() {
              Text(item.name)
                .fontColor(0x333333)
                .fontSize(18)
              Text(item.cardnum)
                .fontColor(0x666666)
                .fontSize(14)
            }
            .width('60%')
            .alignItems(HorizontalAlign.Start)

            Column() {
              Text('编辑')
                .fontColor(0x007dfe)
                .fontSize(16)
            }
            .width('20%')
          }
          .padding({ top: 10, bottom: 10 })
          .border({ width: { bottom: 1 }, color: 0xf1f1f1 })
          .width('92%')
          .backgroundColor(Color.White)
        })
      }