实现可滑动面板鸿蒙示例代码

@Entry
@Component
struct Index {
  @State isShow: boolean = false;

  @Builder
  myBuilder() {
    Column() {
      Column()
        .backgroundColor('#FFE4E1')
        .height(220)
        .width('100%')
      Column()
        .backgroundColor('#FFE4B5')
        .height(220)
        .width('100%')
    }
  }

  build() {
    Column() {
      Button('BindSheet')
        .onClick(() => {
          this.isShow = true;
        })
        .bindSheet($$this.isShow, this.myBuilder(), {
          detents: [300, 520, 740],
          uiContext: this.getUIContext(),
          mode: SheetMode.OVERLAY,
          scrollSizeMode: ScrollSizeMode.CONTINUOUS,
          backgroundColor: '#FF7F50',
          title: {
            title: 'Title',
            subtitle: 'Subtitle'
          }
        })
    }
    .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%')
      .backgroundColor('#FFFAFA')
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.