#鸿蒙通关秘籍#怎样在鸿蒙系统中实现模态页面的上下切换过渡效果？

// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
  @State isShow:boolean = false

  @Builder myBuilder() {
    Column() {
      Button("关闭模态")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Button("开启模态")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindContentCover(this.isShow, this.myBuilder(), {
          modalTransition: ModalTransition.DEFAULT, 
          backgroundColor: Color.Pink, 
          onWillAppear: () => {console.log("BindContentCover onWillAppear.")}, 
          onAppear: () => {console.log("BindContentCover onAppear.")}, 
          onWillDisappear: () => {console.log("BindContentCover onWillDisappear.")}, 
          onDisappear: () => {console.log("BindContentCover onDisappear.")}
        })
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.