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

本文原创发布在华为开发者社区。

介绍

本示例实现了一个可滑动面板的体验，轻量的内容展示窗口，方便在不同尺寸中切换。

实现可滑动面板源码链接

效果预览

使用说明

点击按钮即可从底部弹出面板，弹出后点击空白处可返回面板，拖动面板可继续展开二级面板、三级面板。

实现思路

通过bindSheet属性为组件绑定半模态页面，在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。
为了使isShow参数值与半模态界面的状态同步，使用$$双向绑定isShow参数。
核心代码如下：

@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')
  }
}