鸿蒙模态转场

第五章

5.1半模态转场

.bindSheet(isShow: boolean,builder: CustomBuilder,options?: SheetOptions)
1.isShow用于显示半模态是否显示
2.builder用来表示@Builder自定义组件
3.options指半模态页面的可选属性

可选属性：

height（控制半模态的高度） dragBar（控制是否显示控制条）
showClose（控制是否显示关闭图标） detents（控制半模态高度的档位）

@Entry
@Component
struct Page {
  @State isShow: boolean = false

  @Builder
  sheetBuilder() {
    Column() {
      Row() {
        Text('分享给好友')
          .fontSize(15)
          .width('100%')
          .textAlign(TextAlign.Center)
        Image($r('app.media.ic_public_cancel'))
          .width(25)
          .fillColor('#c0c0c0')
          .onClick(() => {
            this.isShow = false
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ right: 40, top: 15, bottom: 5 })

      Row() {
        Column({ space: 10 }) {
          Image($r('app.media.ic_share_pyq'))
            .width(50)
          Text('朋友圈')
            .fontSize(14)
        }

        Column({ space: 10 }) {
          Image($r('app.media.ic_share_wechat'))
            .width(50)
          Text('微信')
            .fontSize(14)
        }

        Column({ space: 10 }) {
          Image($r('app.media.ic_share_url'))
            .width(50)
          Text('复制链接')
            .fontSize(14)
        }

        Column({ space: 10 }) {
          Image($r('app.media.ic_share_sina'))
            .width(50)
          Text('微博')
            .fontSize(14)
        }
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
    }
    .padding({ bottom: 50 })
  }

  build() {
    Column() {
      Button('按钮')
        .bindSheet($$this.isShow, this.sheetBuilder(), {//$$双向绑定以拖拽方式关闭半模态页面改变isShow参数的值
          height: SheetSize.FIT_CONTENT,
          showClose: false,
          detents: [200, 400, 600],
          dragBar: true
        })
        .onClick(() => {
          this.isShow = true
        })
    }
    .height('100%')
    .width('100%')
  }
}

5.2全屏模态

.bindContentCover(isShow: boolean,builder: CustomBuilder,options?: SheetOptions) 1.isShow用于显示半模态是否显示
2.builder用来表示@Builder自定义组件
3.options指半模态页面的可选属性

@Entry
@Component
struct Page {
  @State isShow: boolean = false

  @Builder
  sheetBuilder() {
    Column() {
      Row() {
        Text('分享给好友')
          .fontSize(15)
          .width('100%')
          .textAlign(TextAlign.Center)
        Image($r('app.media.ic_public_cancel'))
          .width(25)
          .fillColor('#c0c0c0')
          .onClick(() => {
            this.isShow = false
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ right: 40, top: 15, bottom: 5 })

      Row() {
        Column({ space: 10 }) {
          Image($r('app.media.ic_share_pyq'))
            .width(50)
          Text('朋友圈')
            .fontSize(14)
        }

        Column({ space: 10 }) {
          Image($r('app.media.ic_share_wechat'))
            .width(50)
          Text('微信')
            .fontSize(14)
        }

        Column({ space: 10 }) {
          Image($r('app.media.ic_share_url'))
            .width(50)
          Text('复制链接')
            .fontSize(14)
        }

        Column({ space: 10 }) {
          Image($r('app.media.ic_share_sina'))
            .width(50)
          Text('微博')
            .fontSize(14)
        }
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
    }
    .padding({ bottom: 50 })
  }

  build() {
    Column() {
      Button('按钮')
        .bindContentCover($$this.isShow, this.sheetBuilder(), {})
        .onClick(() => {
          this.isShow = true
        })
    }
    .height('100%')
    .width('100%')
  }
}