HarmonyOS开发之基于bindSheet的半模态弹窗

随着HarmonyOS NEXT的发展，越来越多的开发者开始关注并使用其提供的新特性。其中，bindSheet作为创建半模态弹窗的一种方式，因其灵活性和易用性而受到欢迎。本文将详细介绍如何利用bindSheet属性创建半模态弹窗，并探讨两个具体的应用场景。

半模态转场基本介绍

bindSheet属性允许为组件绑定一个半模态页面，该页面会在组件插入时展示。通过设置height属性，你可以自定义半模态的大小，或者选择预设的枚举值如SheetSize.MEDIUM、SheetSize.LARGE或SheetSize.FIT_CONTENT以适应不同需求。

MEDIUM	指定半模态高度为屏幕高度一半。
LARGE	指定半模态高度几乎为屏幕高度。
FIT_CONTENT11+	指定半模态高度为适应内容的高度。

核心API

• bindSheet(isShow: boolean, builder: CustomBuilder, options?: SheetOptions)

• isShow: 控制半模态是否显示。
• builder: 定义半模态弹窗的内容。
• options: 包含半模态弹窗的各种配置选项，如背景颜色、模糊样式、是否显示关闭按钮等。

场景一：基于bindSheet半模态弹窗dragBar控制条对手势的判断

在某些情况下，用户可能需要拖动半模态弹窗来调整其位置或大小。bindSheet属性通过dragBar控制条提供了对这些手势的支持。默认情况下，当用户上滑、下滑或点击控制条时，面板不会自动关闭。

核心代码示例：

@Entry
@Component
struct bindsheet {
  @State isShow: boolean = false;

  @Builder
  myBuilder() {
    Column() {
      Text('Hello Word')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin(10);
    }
  }

  build() {
    Row() {
      Column() {
        Button("打开bindsheet弹窗")
          .onClick(() => {
            this.isShow = true;
          })
          .fontSize(20)
          .margin(10);
      }.width("100%")
       .height("100%")
       .bindSheet($$this.isShow, this.myBuilder(), {
         detents: [SheetSize.MEDIUM, SheetSize.LARGE, 200],
         backgroundColor: Color.White,
         blurStyle: BlurStyle.Thick,
         showClose: false,
         dragBar: true, // 默认显示控制条
       });
    }.width("100%")
     .backgroundColor("#ff578ddd");
  }
}

场景二：基于bindSheet半模态弹窗系统提供的能力（关闭图标和点击蒙层）和自定义的能力来关闭弹窗

除了通过手势控制外，用户还可以通过点击蒙层或关闭图标来关闭半模态弹窗。bindSheet提供了相应的配置选项来实现这一功能。

核心代码示例：

@Entry
@Component
struct bindsheet {
  @State isShow: boolean = false;
  @State showDragBar: boolean = true;

  @Builder
  myBuilder() {
    Column() {
      Button("关闭关闭按钮")
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          this.showDragBar = false;
        });

      Button("打开关闭按钮")
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          this.showDragBar = true;
        });

      Button("关闭弹窗")
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          this.isShow = false;
        });
    }.width('100%')
     .height('100%');
  }

  build() {
    Column() {
      Button("打开弹窗")
        .onClick(() => {
          this.isShow = true;
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.myBuilder(), {
          detents: [SheetSize.MEDIUM, SheetSize.LARGE, 200],
          backgroundColor: Color.Gray,
          blurStyle: BlurStyle.Thick,
          showClose: this.showDragBar,
          enableOutsideInteractive: false, // 不允许交互，显示蒙层
          preferType: SheetType.CENTER,
          shouldDismiss: ((sheetDismiss: SheetDismiss) => {
            console.log("bind sheet shouldDismiss");
            sheetDismiss.dismiss();
          });
        });
    }.justifyContent(FlexAlign.Start)
     .backgroundColor("#ff578ddd")
     .width('100%')
     .height('100%');
  }
}

以上示例展示了如何使用bindSheet创建具有手势控制和自定义关闭行为的半模态弹窗。通过这些功能，开发者可以为用户提供更加丰富和灵活的交互体验。希望这篇文章能够帮助到正在探索HarmonyOS NEXT特性的你。