鸿蒙OpenHarmony【模态转场设置之半模态转场】ArkTS组件通用属性

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

说明

从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

不支持路由跳转。

bindSheet

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

给组件绑定半模态页面,点击后显示模态页面。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
isShow Optional 是否显示半模态页面。从API version 10开始,该参数支持[$$]双向绑定变量。
builder [CustomBuilder] 配置半模态页面内容。
options [SheetOptions] 配置半模态页面的可选属性。

说明

  1. 在非双向绑定情况下,以拖拽方式关闭半模态页面不会改变isShow参数的值。

  2. 为了使isShow参数值与半模态界面的状态同步,建议使用[$$]双向绑定isShow参数。

  3. 在半模态单挡位向上拖拽或是多挡位上滑换挡情况下,内容在拖拽结束或换挡结束后更新显示区域。

  4. 半模态是一个严格和宿主节点绑定在一起的弹窗。若是想实现类似“页面显示的瞬间就弹出半模态”的效果,请确认宿主节点是否已挂载上树。若宿主节点还没上树就将isShow置为true,半模态将不生效。建议使用[onAppear]函数,确保在宿主节点挂载后再显示半模态。

    尤其是 [SheetMode] = EMBEDDED 时,除宿主节点外,还需确保对应的页面节点成功挂载。

  5. 半模态页面的离场动效不支持打断,动效执行期间无法响应其他手势动作。目前离场动效使用[弹簧曲线],该动画曲线存在视觉上并不明显的拖尾动画。因此,在半模态退出时,视觉上半模态页面已经消失,但此时动效可能还未结束,若想再次点击拉起半模态页面则不会响应。需要等动效完全结束后,才可以再次拉起。

SheetOptions

继承自[BindOptions]。

名称 类型 必填 描述
height [SheetSize] [Length]
detents11+ [([SheetSize] [Length]), ( [SheetSize] [Length])?, ([SheetSize]
preferType11+ [SheetType] 半模态页面的样式。**说明:**半模态在不同屏幕宽度所支持的显示类型:1. 宽度 < 600vp:底部。2. 600vp <= 宽度 < 840vp:底部、居中。3. 宽度 >= 840vp:底部、居中、跟手。元服务API: 从API version 12开始,该接口支持在元服务中使用。
showClose11+ boolean [Resource]
dragBar boolean 是否显示控制条。**说明:**半模态面板的detents属性设置多个不同高度并且设置生效时,默认显示控制条。否则不显示控制条。元服务API: 从API version 11开始,该接口支持在元服务中使用。
blurStyle11+ [BlurStyle] 半模态面板的模糊背景。默认无模糊背景。元服务API: 从API version 12开始,该接口支持在元服务中使用。
maskColor [ResourceColor] 半模态页面的背景蒙层颜色。元服务API: 从API version 11开始,该接口支持在元服务中使用。
title11+ [SheetTitleOptions] [CustomBuilder]
enableOutsideInteractive11+ boolean 半模态所在页面是否允许交互。**说明:**设置为true时允许交互,不显示蒙层;设置为false时不允许交互,显示蒙层;若不进行设置,默认底部弹窗与居中弹窗不允许交互,跟手弹窗允许交互。当设置为true时,maskColor设置无效。元服务API: 从API version 12开始,该接口支持在元服务中使用。
shouldDismiss11+ (sheetDismiss: [SheetDismiss]) => void 半模态页面交互式关闭回调函数。**说明:**当用户执行下拉关闭/back事件/点击蒙层关闭/关闭按钮关闭交互操作时,如果注册该回调函
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值