HarmonyOS NEXT实战：半模态

Question

[##HarmonyOS Next实战##HarmonyOS SDK应用服务##教育##]

核心概念：

半模态页面（bindSheet）默认是模态形式的非全屏弹窗式交互页面，允许部分底层父视图可见，帮助用户在与半模态交互时保留其父视图环境。

半模态页面适用于展示简单的任务或信息面板，例如，个人信息、文本简介、分享面板、创建日程、添加内容等。若需展示可能影响父视图的半模态页面，半模态支持配置为非模态交互形式。

半模态在不同宽度的设备上存在不同的形态能力，开发者对不同宽度的设备上有不同的形态诉求请参考(preferType)属性。可以使用bindSheet构建半模态转场效果，详见模态转场。对于复杂或者冗长的用户流程，建议考虑其他的转场方式替代半模态。如全模态转场和Navigation转场。

使用约束

半模态内嵌UIExtension时，不支持再在UIExtension内拉起半模态/弹窗。
若无二次确认或者自定义关闭行为的场景，不建议使用shouldDismiss/onWillDismiss接口。

通过bindSheet属性为组件绑定半模态页面，在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。接口：

bindSheet(isShow: Optional, builder: CustomBuilder, options?: SheetOptions): T

给组件绑定半模态页面，点击后显示模态页面。
isShow：是否显示半模态页面。true：显示半模态页面。false：隐藏半模态页面。从API version 10开始，该参数支持$$双向绑定变量。从API version 18开始，该参数支持!!双向绑定变量。
builder：配置半模态页面内容。
options：配置半模态页面的可选属性。

说明：

在非双向绑定情况下，以拖拽方式关闭半模态页面不会改变isShow参数的值。
为了使isShow参数值与半模态界面的状态同步，建议使用$$双向绑定isShow参数。从API version 18开始，该参数支持!!双向绑定变量。
在半模态单挡位向上拖拽或是多挡位上滑换挡情况下，内容在拖拽结束或换挡结束后更新显示区域。
半模态是一个严格和宿主节点绑定在一起的弹窗。
半模态页面的离场动效不支持打断，动效执行期间无法响应其他手势动作。

实战示例代码

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct BindSheetPage {
  @State isShowSheet: boolean = false;

  build() {
    Column({ space: 6 }) {
      Text('BindSheetPage')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
      Button('showBindSheet')
        .onClick(() => {
          this.isShowSheet = !this.isShowSheet;
        })
    }
    .height('100%')
    .width('100%')
    .bindSheet($$this.isShowSheet, this.SheetBuilder(), {
      detents: [SheetSize.MEDIUM, SheetSize.LARGE, 600],
      preferType: SheetType.BOTTOM,
      title: { title: '上拉弹窗' },
    })
  }

  @Builder
  SheetBuilder() {
    Column({ space: 6 }) {
      Button('hello')
        .onClick(() => {
          promptAction.showToast({
            message: 'hello',
            duration: 2000
          })
        })
      Button('close')
        .onClick(() => {
          this.isShowSheet = false
        })
    }
    .width('100%').height('100%')
  }
}