HarmonyOS NEXT实战：弹出底部菜单

##HarmonyOS Next实战##HarmonyOS SDK应用服务##教育##

目标：拉起底部菜单，实现底部菜单的弹起和关闭。

知识点：

• 半模态页面（bindSheet）默认是模态形式的非全屏弹窗式交互页面，允许部分底层父视图可见，帮助用户在与半模态交互时保留其父视图环境。
• 半模态页面适用于展示简单的任务或信息面板，例如，个人信息、文本简介、分享面板、创建日程、添加内容等。若需展示可能影响父视图的半模态页面，半模态支持配置为非模态交互形式。
• 半模态在不同宽度的设备上存在不同的形态能力，开发者对不同宽度的设备上有不同的形态诉求请参考(preferType)属性。可以使用bindSheet构建半模态转场效果,详见模态转场。对于复杂或者冗长的用户流程，建议考虑其他的转场方式替代半模态。如全模态转场和Navigation转场。

使用约束

• 半模态内嵌UIExtension时，不支持再在UIExtension内拉起半模态/弹窗。
• 若无二次确认或者自定义关闭行为的场景，不建议使用shouldDismiss/onWilDismiss接口。

生命周期 半模态页面提供了生命周期函数，用于通知用户该弹窗的生命周期状态。生命周期的触发顺序依次为：onWillAppear -> onAppear -> onWillDisappear -> onDisappear。

使用嵌套滚动交互：半模态上述交互默认的嵌套模式为：{Forward：PARENT_FIRST，Backward：SELF_FIRST}

在半模态面板内容区域滑动时的操作优先级：

1. 内容处于最顶部（内容不可滚动时以此状态处理） 上滑时，优先向上扩展面板档位，如无档位可扩展，则滚动内容 下滑时，优先向下收缩面板档位，如无档位可收缩，则关闭面板
2. 内容处于中间位置（可上下滚动） 上/下滑时，优先滚动内容，直至页面内容到达底部/顶部
3. 内容处于底部位置（内容可滚动时） 上滑时，呈现内容区域回弹效果，不切换档位 下滑时，滚动内容直到到达顶部

实战：BottomPopUpDemoPage

@Entry
@Component
struct BottomPopUpDemoPage {
  @State isShow: boolean = false
  @State sheetHeight: number = 300;

  build() {
    Column({ space: 20 }) {
      Text('底部菜单Demo')

      Button("拉起底部菜单")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.buildSheet(), {
          height: this.sheetHeight,
          backgroundColor: '#EEEEEE',
          onWillAppear: () => {
            console.log("BindSheet onWillAppear.")
          },
          onAppear: () => {
            console.log("BindSheet onAppear.")
          },
          onWillDisappear: () => {
            console.log("BindSheet onWillDisappear.")
          },
          onDisappear: () => {
            console.log("BindSheet onDisappear.")
          }
        })
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  buildSheet() {
    Column({ space: 10 }) {
      Text('底部菜单栏')
      Button('菜单 1')
      Button('菜单 2')
      Button('菜单 3')
      Button("收起菜单")
        .fontSize(20)
        .backgroundColor(Color.Gray)
        .onClick(() => {
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
    .padding({ top: 10 })
  }
}