鸿蒙：绑定半模态页面（bindSheet）

我们还是和之前一样，参考官方文档做修改：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-sheet-page#%E4%BA%8C%E6%AC%A1%E7%A1%AE%E8%AE%A4%E8%83%BD%E5%8A%9Bhttps://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-sheet-page#%E4%BA%8C%E6%AC%A1%E7%A1%AE%E8%AE%A4%E8%83%BD%E5%8A%9B这里就不多说，还是比较简单的，我就直接把运行效果和代码放在下面了：

Index.ets

@Entry
@Component
struct Index {
  @State isShow: Boolean = false;

  @Builder
  myBuilder() {
    Column() {
      Text("这是半模态的内容区域")
        .fontColor(Color.Black)
        .fontSize(30)
        .fontWeight(FontWeight.Medium)
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }

  // 弹窗提示
  dialog(DismissSheetAction: DismissSheetAction) {
    // 第二步：确认二次回调交互能力，此处用AlertDialog提示 "是否需要关闭半模态"
    this.getUIContext().showAlertDialog(
      {
        message: '是否选择关闭半模态',
        autoCancel: true,
        alignment: DialogAlignment.Bottom,
        gridCount: 4,
        offset: { dx: 0, dy: -20 },
        primaryButton: {
          value: '取消',
          action: () => {
            console.info('Callback when the cancel button is clicked');
          }
        },
        secondaryButton: {
          enabled: true,
          defaultFocus: true,
          style: DialogButtonStyle.HIGHLIGHT,
          value: '确认',
          // 第三步：确认关闭半模态逻辑所在，此处为AlertDialog的Button回调
          action: () => {
            // 第四步：上述第三步逻辑触发的时候，调用dismiss()关闭半模态
            DismissSheetAction.dismiss();
            console.info('Callback when the ok button is clicked');
          }
        },
        cancel: () => {
          console.info('AlertDialog Closed callbacks');
        }
      }
    )
  }

  build() {
    Button("打开半模态")
      .onClick(() => {
        this.isShow = true
      })
      .margin(120)
      .bindSheet($$this.isShow, this.myBuilder(), {
        height: SheetSize.MEDIUM,
        blurStyle: BlurStyle.Thick,
        dragBar: true,
        detents: [SheetSize.MEDIUM, SheetSize.LARGE],
        title: { title: "这是一个半模态的标题", subtitle: "这是一个半模态的副标题" },
        enableOutsideInteractive: false,
        onWillDismiss: ((DismissSheetAction: DismissSheetAction) => {
          this.dialog(DismissSheetAction)
        })
      })
  }
}