鸿蒙Harmony应用开发—ArkTS声明式开发（模态转场设置：半模态转场）

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

说明：

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

不支持路由跳转。

bindSheet

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

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

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

参数：

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

说明：

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

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

SheetOptions

继承自BindOptions。

名称	类型	必填	描述
height	SheetSize \| Length	否	半模态高度，默认是LARGE。说明：底部弹窗竖屏时，当设置sheetDetents时，该属性设置无效。底部弹窗竖屏时，最大高度为距离信号栏8vp。底部弹窗横屏时，该属性设置无效，高度为距离屏幕顶部8vp。居中弹窗和跟手弹窗设置类型为SheetSize.LARGE和SheetSize.MUDIUM无效，显示默认高度560vp。居中弹窗和跟手弹窗最小高度为320vp，最大高度为窗口短边的90%。当使用Length设置的高度和使用SheetSize.FIT_CONTENT自适应的高度大于最大高度，则显示最大高度，小于最小高度，则显示最小高度。
detents11+	[(SheetSize \| Length), ( SheetSize \| Length)?, (SheetSize \| Length)?]	否	半模态页面的切换高度档位。说明：底部弹窗竖屏生效，元组中第一个高度为初始高度。面板可跟手滑动切换档位，松手后是否滑动至目标档位有两个判断条件：速度和距离。速度超过阈值，则执行滑动至与手速方向一致的目标档位；速度小于阈值，则引入距离判断条件，当位移距离>当前位置与目标位置的1/2，滑动至与手速方向一致的目标档位，位移距离当前位置与目标位置的1/2，返回至当前档位。速度阈值：1000，距离阈值：50%。
preferType11+	SheetType.CENTER \| SheetType.POPUP	否	半模态页面的样式。说明： preferType不可设置为SheetType.BOTTOM。
showClose11+	boolean \| Resource	否	是否显示关闭图标，默认显示。说明： Resource需要为boolean类型。
dragBar	boolean	否	是否显示控制条。说明：半模态面板的dentents属性设置多个不同高度并且设置生效时，默认显示控制条。否则不显示控制条。
backgroundColor	ResourceColor	否	半模态页面的背板颜色。
blurStyle11+	BlurStyle	否	半模态面板的模糊背景。默认无模糊背景。
maskColor	ResourceColor	否	半模态页面的背景蒙层颜色。
title11+	SheetTitleOptions \| CustomBuilder	否	半模态面板的标题。
enableOutsideInteractive11+	boolean	否	半模态所在页面是否允许交互。说明：设置为true时允许交互，不显示蒙层；设置为false时不允许交互，显示蒙层；若不进行设置，默认底部弹窗与居中弹窗不允许交互，跟手弹窗允许交互。当设置为true时，maskColor设置无效。
onAppear	() => void	否	半模态页面显示回调函数。
onDisappear	() => void	否	半模态页面回退回调函数。
shouldDismiss11+	(sheetDismiss: SheetDismiss) => void	否	半模态页面交互式关闭回调函数。说明：当用户执行下拉关闭/back事件/点击蒙层关闭/关闭按钮关闭交互操作时，如果注册该回调函数，则不会立刻关闭。

SheetSize枚举说明

名称	参数描述
MEDIUM	指定半模态高度为屏幕高度一半。
LARGE	指定半模态高度几乎为屏幕高度。
FIT_CONTENT11+	指定半模态高度为适应内容的高度。

BindOptions

名称	类型	必填	说明
backgroundColor	ResourceColor	否	半模态页面的背板颜色。
onAppear	() => void	否	半模态页面显示回调函数。
onDisappear	() => void	否	半模态页面回退回调函数。

SheetType11+枚举说明

名称	参数描述
BOTTOM	底部弹窗。
CENTER	居中弹窗。
POPUP	跟手弹窗。跟手弹窗面板不支持跟手滑动，下滑面板不关闭。

SheetDismiss11+

名称	类型	必填	描述
dismiss	() => void	是	半模态面板关闭回调函数。开发者需要退出时调用，不需要退出时无需调用。

SheetTitleOptions11+

名称	类型	必填	描述
title	ResourceStr	是	半模态面板的主标题。
subtitle	ResourceStr	否	半模态面板的副标题。

示例1

// xxx.ets
@Entry
@Component
struct SheetTransitionExample {
  @State isShow:boolean = false
  @State isShow2:boolean = false
  @State sheetHeight:number = 300;
  @State showDragBar:boolean = true;

  @Builder myBuilder() {
    Column() {
      Button("change height")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.sheetHeight = 500;
        })

      Button("Set Illegal height")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.sheetHeight = -1;
        })

      Button("close dragBar")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.showDragBar = false;
        })

      Button("close modal 1")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar, backgroundColor: Color.Green, onAppear: () => {console.log("BindSheet onAppear.")}, onDisappear: () => {console.log("BindSheet onDisappear.")}})
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

zh-cn_sheet

示例2

// xxx.ets
@Entry
@Component
struct SheetTransitionExample {
  @State isShow:boolean = false
  @Builder myBuilder() {
    Column() {
      Button("content1")
        .margin(10)
        .fontSize(20)

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

  build() {
    Column() {
      Button("transition modal 1")
        .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:true,
          title:{title:"title", subtitle:"subtitle"},
          preferType: SheetType.CENTER,
          shouldDismiss:((sheetDismiss: SheetDismiss)=> {
            console.log("bind sheet shouldDismiss")
            sheetDismiss.dismiss()
          })
        })
    }
    .justifyContent(FlexAlign.Start)
    .width('100%')
    .height('100%')
  }
}

zh-cn_sheet

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料