HarmonyOS 鸿蒙Next半模态相关问题

1. 可以收起到固定高度，preferType不用设置成底部弹窗，默认跟手即可，参考下面demo。

2. 可以通过设置scrollSizeMode: ScrollSizeMode.CONTINUOUS属性解决显示加载慢的问题

   • FOLLOW_DETENT：设置半模态面板跟手滑动结束后更新内容显示区域
   • CONTINUOUS：设置半模态面板在滑动过程中持续更新内容显示区域

3. 监听高度变化，在onHeightDidChange回调中控制是否显示蒙层，动态设置蒙层颜色。

下面demo应该可以满足你的需求：

@Entry
@Component
export struct SlideUpPanelWithGesture {
  @State isShowSheet: boolean = true
  private items : number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State showMask: boolean = false;

  @Builder
  SheetBuilder() {
    Column() {
      // 第一步：自定义滚动容器
      List({space:'10vp'}) {
        ListItem() {
          Text("hello--你好").fontSize(16).fontWeight(FontWeight.Bold)
        }.width('90%').height('80vp').backgroundColor('#ff53ecd9').borderRadius(10)

        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:'20vp'}).width('100%').height(800)
      // 第二步：设置滚动组件的嵌套滚动属性
      .nestedScroll({
        scrollForward: NestedScrollMode.PARENT_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST,
      })

    }.width('100%').height('100%')
  }
  build() {
    Column() {
      Button('Open Sheet').width('90%').height('80vp')
        .onClick(() =>{
          this.isShowSheet = true;
        })
        .bindSheet(this.isShowSheet, this.SheetBuilder(), {
          detents:[250, SheetSize.MEDIUM, 650],
          showClose: false,
          scrollSizeMode: ScrollSizeMode.CONTINUOUS,
          maskColor: this.showMask ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0)',
          onHeightDidChange:(number: number) => {
            let currentN = px2vp(number);
            if(currentN > 300){
              this.showMask = true;
            }
            if(currentN < 300){
              this.showMask = false;
            }
          }
        })
    }.width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
  }
}