HarmonyOS 上滑三段式抽屉怎么实现？

Question

如题：HarmonyOS 上滑三段式抽屉怎么实现？

Answer 1

方案一：使用半模态框实现抽屉效果

参考文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sheet-transition-V5

方案二：

通过浮层属性和Panel容器组合实现效果

参考文档:

Panel：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-panel-V5

浮层：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-overlay-V5

方案二示例参考：

// ets
@Entry
@Component
struct Index {
  private controller: TabsController = new TabsController()
  @State currentIndex: number = 0;

  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#ff1244' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.controller.changeIndex(this.currentIndex);
    })
  }

  aboutToAppear(): void {

  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End,controller: this.controller,index:this.currentIndex}) {
        TabContent() {
          Column(){
          }.backgroundColor("#FFC0CB").height('100%').width('100%')
          .overlay(this.getPanel(), {
            align: Alignment.Bottom,
          })
        }
        .backgroundColor("#D1D1D1")
        .tabBar(this.TabBuilder('tab1',0,$r('app.media.startIcon'),$r('app.media.startIcon')))
        TabContent() {
          Text('测试')
        }
        .backgroundColor("#D1D1D1")
        .tabBar(this.TabBuilder('tab2',1,$r('app.media.startIcon'),$r('app.media.startIcon')))
      }
    }
    .width('100%')
  }

  @Builder getPanel(){
    Column(){
      Column(){
      }.width('100%').height('10%').backgroundColor('white')
      Panel(true) { // 展示
        Column() {
          Text('弹框内容')
        }
      }.height('90%')
      .type(PanelType.Foldable)
      .mode(PanelMode.Full)
      .dragBar(true) // 默认开启
      .showCloseIcon(false) // 显示关闭图标
      .onChange((width: number, height: number, mode: PanelMode) => {
        console.info(`width:${width},height:${height},mode:${mode}`)
      })
      .onHeightChange((height)=>{
      })
    }.height('100%')
  }