在HarmonyOS NEXT开发中bindSheet如何实现嵌套滚动关闭容器效果？

Question

在HarmonyOS NEXT开发中bindSheet如何实现嵌套滚动关闭容器效果？

Answer 1

请参考以下代码：

@Entry 
@Component 
struct SheetTransitionExample { 
  @State isShow: boolean = false 
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
 
  @Builder 
  myBuilder() { 
    Column() { 
      List({ space: 20, initialIndex: 0 }) { 
        ForEach(this.arr, (item: number) => { 
          ListItem() { 
            Text('' + item) 
              .width('100%') 
              .height(100) 
              .fontSize(16) 
              .textAlign(TextAlign.Center) 
              .borderRadius(10) 
              .backgroundColor(0xFFFFFF) 
          } 
        }, (item: string) => item) 
      } 
      .listDirection(Axis.Vertical) 
      .width('90%') 
    } 
    .width('100%') 
  } 
 
  build() { 
    Column() { 
      Button("transition modal 1") 
        .onClick(() => { 
          this.isShow = true 
        }) 
        .fontSize(20) 
        .margin(10) 
        .bindSheet($$this.isShow, this.myBuilder(), { 
          detents: [SheetSize.LARGE], 
          backgroundColor: Color.Gray, 
          blurStyle: BlurStyle.Thick, 
          showClose: true, 
          title: { title: "title", subtitle: "subtitle" }, 
          preferType: SheetType.CENTER 
        }) 
        .onDisAppear(() => { 
          this.isShow = false 
        }) 
    } 
    .justifyContent(FlexAlign.Start) 
    .width('100%') 
    .height('100%') 
  } 
}