当前位置：首页 > news >正文

鸿蒙：绑定半模态页面（bindSheet）

news 2025/9/9 6:33:42

我们还是和之前一样，参考官方文档做修改：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-sheet-page#%E4%BA%8C%E6%AC%A1%E7%A1%AE%E8%AE%A4%E8%83%BD%E5%8A%9Bhttps://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-sheet-page#%E4%BA%8C%E6%AC%A1%E7%A1%AE%E8%AE%A4%E8%83%BD%E5%8A%9B这里就不多说，还是比较简单的，我就直接把运行效果和代码放在下面了：

Index.ets

@Entry
@Component
struct Index {@State isShow: Boolean = false;@BuildermyBuilder() {Column() {Text("这是半模态的内容区域").fontColor(Color.Black).fontSize(30).fontWeight(FontWeight.Medium)}.width("100%").height("100%").justifyContent(FlexAlign.Center)}// 弹窗提示dialog(DismissSheetAction: DismissSheetAction) {// 第二步：确认二次回调交互能力，此处用AlertDialog提示 "是否需要关闭半模态"this.getUIContext().showAlertDialog({message: '是否选择关闭半模态',autoCancel: true,alignment: DialogAlignment.Bottom,gridCount: 4,offset: { dx: 0, dy: -20 },primaryButton: {value: '取消',action: () => {console.info('Callback when the cancel button is clicked');}},secondaryButton: {enabled: true,defaultFocus: true,style: DialogButtonStyle.HIGHLIGHT,value: '确认',// 第三步：确认关闭半模态逻辑所在，此处为AlertDialog的Button回调action: () => {// 第四步：上述第三步逻辑触发的时候，调用dismiss()关闭半模态DismissSheetAction.dismiss();console.info('Callback when the ok button is clicked');}},cancel: () => {console.info('AlertDialog Closed callbacks');}})}build() {Button("打开半模态").onClick(() => {this.isShow = true}).margin(120).bindSheet($$this.isShow, this.myBuilder(), {height: SheetSize.MEDIUM,blurStyle: BlurStyle.Thick,dragBar: true,detents: [SheetSize.MEDIUM, SheetSize.LARGE],title: { title: "这是一个半模态的标题", subtitle: "这是一个半模态的副标题" },enableOutsideInteractive: false,onWillDismiss: ((DismissSheetAction: DismissSheetAction) => {this.dialog(DismissSheetAction)})})}
}