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

半模态页面（bindSheet）默认是模态形式的非全屏弹窗式交互页面，允许部分底层父视图可见，帮助用户在与半模态交互时保留其父视图环境。 如果sheet布局是个list可滑动布局，需要先了解一下嵌套滚动 NestedScrollMode SELF_ONLY 只自身滚动，不与父组件联动。 SELF_FIRST 自身先滚动，自身滚动到边缘以后父组件滚动。 PARENT_FIRST 父组件先滚动，父组件滚动到边缘以后自身滚动。 PARALLEL 自身和父组件同时滚动。

import { OpenCustomDialogUtil, Params } from '../utils/DialogUtil'
@Entry
@Component
struct 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)
  }
}