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