【鸿蒙ArkUI实战开发】基于bindSheet的半模态弹窗

bindSheet半模态转场基本介绍

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

可以通过设置height属性来实现自定义高度；也可以通过设置height属性的SheetSize枚举类型，默认是LARGE。

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

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

@Entry

@Component

struct Index {

@State isShow: boolean = false;

@Builder

myBuilder() {

...

... //半模态弹窗页面内容

}

build() {

Row() {

Column() {

...

... //通过事件打开半模态弹窗

}

.bindSheet($$this.isShow, this.myBuilder(), {

backgroundColor: Color.Gray,

blurStyle: BlurStyle.Thick,

})

}

}

}

场景描述

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

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

方案描述

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

半模态bindSheet属性dragBar控制条添加了对手势的判断，在上滑，下滑或者点击控制条时，不会关闭面板。

说明：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,

blurSt