关于鸿蒙的知识点——模态转场

1. 模态转场

以下是模态转场的基本使用场景

全模态 半模态

2. 模态转场的基本属性

bindSheet	isShow: boolean,builder: CustomBuilder,options?: SheetOptions	给组件绑定半模态页面，点击后显示模态页面。isShow: 是否显示半模态页面。从API version 10开始，该参数支持$$双向绑定变量builder: 配置半模态页面内容。options: 配置半模态页面的可选属性。

3. 模态转场的两个分类

3.1. 半模态转场

半模态顾名思义，就是半屏的模态效果(图 2)

@Entry
  @Component
  struct SheetTransitionExample1 {
    // 1. 定义控制变量
    @State isShow: boolean = false

    // 2.自定义内容
    @Builder
    myBuilder() {
       // 结构略
    }

    build() {
      Column() {
        Button(`显示半模态`)
          //  3.绑定半模态框
          .bindSheet(this.isShow, this.myBuilder())
          .onClick(() => {
            // 4.控制显示
            this.isShow = true
          })
      }
    }
  }

名称	参数	参数描述
bindSheet	isShow: boolean,builder: CustomBuilder,options?: SheetOptions	给组件绑定半模态页面，点击后显示模态页面。isShow: 是否显示半模态页面。从API version 10开始，该参数支持$$双向绑定变量builder: 配置半模态页面内容。options: 配置半模态页面的可选属性。

3.2 显示状态双向绑定

上一节的代码有个小问题，如果通过那个关闭按钮来关闭模态会出现无法开启的情况

官方给出了解决方案:

说明

在非双向绑定情况下，以拖拽方式关闭半模态页面不会改变isShow参数的值。

为了使isShow参数值与半模态界面的状态同步，建议使用$$双向绑定isShow参数。

3.3 全屏模态

刚刚是半模态，接下来咱们来看看全屏模态

名称	参数	参数描述
bindContentCover	isShow: boolean,builder: CustomBuilder,options?: ContentCoverOptions	给组件绑定全屏模态页面，点击后显示模态页面。模态页面内容自定义，显示方式可设置无动画过渡，上下切换过渡以及透明渐变过渡方式。isShow: 是否显示全屏模态页面。从API version 10开始，该参数支持$$双向绑定变量builder: 配置全屏模态页面内容。options: 配置全屏模态页面的可选属性(详细可以参考文档，用的不多)

// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
  // 定义控制显示的变量
  @State isShow: boolean = false

  // 全屏模态的 Builder
  @Builder
  myBuilder() {
    Column() {
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#0094ff')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Button(`显示全屏模态${this.isShow}`)
        .fontSize(20)
        .margin(10)
        // 绑定并控制显示
        .bindContentCover(this.isShow, this.myBuilder())
        .onClick(() => {
          this.isShow = true
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

4. 实现模态转场的完整代码和效果图

@Entry
@Component
struct AnLi {
  @State isShow :boolean = true
  @Builder
  fn(){
    Column({space:15 }){
      Row(){
        Text('分享给好友')
          .fontSize(20)
          .fontWeight(500)
          .layoutWeight(1)
          .textAlign(TextAlign.Center)

        Image($r('app.media.ic_public_cancel'))
          .width(20)
          .height(20)
          .onClick(()=>{
            this.isShow = false

          })
      }
      .padding(20)
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

      Row(){
        Column({space:10}){

          Image($r('app.media.ic_share_wechat'))
            .width(40)

          Text('微信')
            .fontSize(10)

        }
        Column({space:10}){

          Image($r('app.media.ic_share_wechat'))
            .width(40)

          Text('微信')
            .fontSize(10)

        }
        Column({space:10}){

          Image($r('app.media.ic_share_wechat'))
            .width(40)

          Text('微信')
            .fontSize(10)

        }
        Column({space:10}){

          Image($r('app.media.ic_share_wechat'))
            .width(40)

          Text('微信')
            .fontSize(10)

        }
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)

    }
    .margin({bottom:50})
    .width('100%')

  }

  build() {
    Column(){
      Button('点击')

        .onClick(()=>{

          this.isShow = true
        })

    }
    .bindSheet($$this.isShow,this.fn(),{
      showClose:false,
      height:SheetSize.FIT_CONTENT,
      dragBar:true,
      detents:[SheetSize.FIT_CONTENT,SheetSize.MEDIUM]

    })
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
  }
}

动画演示