模态转场

模态转场

模态转场分为半模态和全模态，常见应用在分享界面，在页面中弹出。

1.半模态

最常见的半模态，基本所有应用都会有这恶方面的应用

1.1.名称及结构

需要配合@Buider,来进行书写

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

1.2.双向绑定

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

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

.bindSheet($$this.isShow,this.sheetBuilder())

如果没有双向绑定的情况下，只能提供开关一次循环，没有返回值

1.3可选属性sheetOptions

可以通过参数来进行控制半模态的一些属性

.height 半模态高度

.dragBar 是否显示控制条，默认显示。

.detents 半模态页面的切换高度档位。

showClose是否显示关闭图标

1.4.全模态显示

与半模态不同，是一整个页面的模态，常应用到快递填写地址等

bindContentCover

参数

isShow: boolean,

builder: CustomBuilder,

options?: ContentCoverOptions

全模态需要自定义属性，没有初始值

@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%')
  }
}