鸿蒙 Next 底部弹框绑定半模态页面（bindSheet）

作者：auhgnixgnahz

2025-06-23
北京
本文字数：1400 字
阅读完需：约 5 分钟

半模态页面（bindSheet） 默认是模态形式的非全屏弹窗式交互页面，允许部分底层父视图可见，帮助用户在与半模态交互时保留其父视图环境。

如果 sheet 布局是个 list 可滑动布局，需要先了解一下嵌套滚动

NestedScrollMode

SELF_ONLY 只自身滚动，不与父组件联动。

SELF_FIRST 自身先滚动，自身滚动到边缘以后父组件滚动。

PARENT_FIRST 父组件先滚动，父组件滚动到边缘以后自身滚动。

PARALLEL 自身和父组件同时滚动。

import { OpenCustomDialogUtil, Params } from '../utils/DialogUtil'@Entry@Componentstruct SheetDemo {  @State isShowSheet: boolean = false  private items: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]  @Builder  SheetBuilder() {    Column() {      // 第一步：自定义滚动容器      List({ space: '10vp' }) {        ForEach(this.items, (item: number) => {          ListItem() {            Text(String(item)).fontSize(16).fontWeight(FontWeight.Bold)          }.width('90%').height('80vp').backgroundColor('#ff53ecd9').borderRadius(10)        })      }      .alignListItem(ListItemAlign.Center)      .margin({ top: '10vp' })      .width('100%')      .height(300)      .nestedScroll({        scrollForward: NestedScrollMode.SELF_FIRST,        scrollBackward: NestedScrollMode.SELF_FIRST,      })
      Text("非滚动区域")        .width('100%')        .backgroundColor(Color.Gray)        .layoutWeight(1)        .textAlign(TextAlign.Center)        .align(Alignment.Top)    }.width('100%').height('100%').backgroundColor(Color.White)  }  build() {    Column() {      Button('Open Sheet').width('90%').height('80vp')        .onClick(() => {          this.isShowSheet = !this.isShowSheet        })        .bindSheet($$this.isShowSheet, this.SheetBuilder(),          {            //页面的切换高度档位            detents: [SheetSize.MEDIUM, SheetSize.LARGE],            // height:600,            showClose: false,//是否显示关闭图标            // dragBar: false,//是否显示控制条            // title: { title: '嵌套滚动场景' },            //CONTINUOUS 在滑动过程中持续更新内容显示区域            //FOLLOW_DETENT 滑动结束后更新内容显示区域            scrollSizeMode: ScrollSizeMode.FOLLOW_DETENT,            //交互式关闭回调函数            onWillDismiss: ((DismissSheetAction: DismissSheetAction) => {              //关闭二次确认弹框，使用我们之前定义的全局openCustomDialog             let parms:Params=new Params('提示','是否选择关闭半模态',()=>{                OpenCustomDialogUtil.closeDialog()              },()=>{               DismissSheetAction.dismiss()               OpenCustomDialogUtil.closeDialog()              })              OpenCustomDialogUtil.init(this.getUIContext(),parms);              OpenCustomDialogUtil.openDialog()            })          })    }.width('100%').height('100%')    .justifyContent(FlexAlign.Center)  }}