OpenHarmony实战开发-如何实现模态转场

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

表1 模态转场接口

使用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)
        })
      }
      .padding({
   
    top: 20, bottom: 20 })

      Text('确认')
        .width('90%')
        .height(40)
        .textAlign(TextAlign.Center)
        .borderRadius(10)
        .fontColor(Color.White)
        .backgroundColor(0x007dfe)
        .onClick(() => {
   
   
          this.isPresent = !this.isPresent