HarmonyOS 鸿蒙Next中半模态转场的基本使用

HarmonyOS 鸿蒙Next中半模态转场的基本使用

@Entry
@Component
struct Page01_bindSheet {
  // 1. 定义状态变量，boolean
  @State isShow: boolean = false
  build() {
    Column() {
      Text('半模态转场')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Button('显示半模态')
        // 3. 绑定半模态 bindSheet
        .bindSheet(this.isShow, this.sheetBuilder())
        .onClick(() => {
          // 4. 修改状态变量，控制显示
          this.isShow = true
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
  // 2.通过 Builder 定义结构
  @Builder
  sheetBuilder() {
    Column() {
    }
    .backgroundColor(Color.Pink)
    .width('100%')
    .height('100%')
  }
}