鸿蒙开发中的又一种弹窗形式--半模态弹窗原创精华

幽蓝计划

发布于 2025-7-27 16:12

浏览

0收藏

之前分享过鸿蒙开发中的多种弹窗方式，包括依赖页面自定义弹窗CustomDialogController ，不依赖UI的弹窗PromptAction。

今天跟大家分享另一种形式的弹窗，半模态弹窗。先看一下弹窗效果：

鸿蒙开发中的又一种弹窗形式--半模态弹窗-鸿蒙开发者社区

它是一种更加丝滑的弹窗方式，适合需要在弹窗中进行一些操作的场景。下面为大家介绍半模态弹窗的使用方式。

半模态弹窗需要使用bindSheet属性绑定在组件上，然后通过传入参数变量控制显示和隐藏。

bindSheet的参数分为3部分，isShow用来控制显示和隐藏，builder用来定义UI和内容，options用来定义弹窗的属性。

下面为大家演示半模态弹窗的基本使用方式：

@State isShow: boolean = false;

@Builder
myBuilder() {
  Column() {
    Button("content1")
      .margin(10)
      .fontSize(20)

    Button("content2")
      .margin(10)
      .fontSize(20)
  }
  .width('100%')
}

Text(this.message)
  .id('HelloWorld')
  .fontSize($r('app.float.page_text_font_size'))
  .fontWeight(FontWeight.Bold)
  .onClick(() => {
    this.isShow = true
  })
  .bindSheet($$this.isShow, this.myBuilder(), {
    title:{title:'标题'},
    showClose:true,
    height: SheetSize.MEDIUM,
    detents: [SheetSize.MEDIUM, SheetSize.LARGE],
    backgroundColor: Color.White,
    dragBar:true,
    onWillAppear: () => {
      console.log("BindSheet onWillAppear.");
    },
    onAppear: () => {
      console.log("BindSheet onAppear.");
    },
    onWillDisappear: () => {
      console.log("BindSheet onWillDisappear.");
    },
    onDisappear: () => {
      console.log("BindSheet onDisappear.");
    }
  })

以下是options中的常用属性：

title：弹窗的标题
showClose：是否展示关闭按钮
height：弹窗高度
detents：弹窗的高度档位列表
backgroundColor：背景色
maskColor：蒙层颜色
dragBar：是否显示拖拽条，只有弹窗设置了多个档位时，拖住条才能显示
shouldDismiss：弹窗关闭的回调函数

半模态弹窗还有一些生命周期函数，比如onWillAppear、onAppear、onWillDisappear、onDisappear等。

另外，定位弹窗的高度和档位时，你可以传入数字类型的高度，也可以使用枚举类型SheetSize提供的几个固定值，包括SheetSize.MEDIUM、SheetSize.LARGE和FIT_CONTENT。

以上就是半模态弹窗的相关内容，感谢阅读。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

HarmonyOS

标签

鸿蒙开发