HarmonyOS Next实战##HarmonyOS SDK应用服务##教育
目标：拉起底部菜单，实现底部菜单的弹起和关闭。
知识点：
- 半模态页面（bindSheet）默认是模态形式的非全屏弹窗式交互页面，允许部分底层父视图可见，帮助用户在与半模态交互时保留其父视图环境。
- 半模态页面适用于展示简单的任务或信息面板，例如，个人信息、文本简介、分享面板、创建日程、添加内容等。若需展示可能影响父视图的半模态页面，半模态支持配置为非模态交互形式。
- 半模态在不同宽度的设备上存在不同的形态能力，开发者对不同宽度的设备上有不同的形态诉求请参考(preferType)属性。可以使用bindSheet构建半模态转场效果,详见模态转场。对于复杂或者冗长的用户流程，建议考虑其他的转场方式替代半模态。如全模态转场和Navigation转场。
使用约束
- 半模态内嵌UIExtension时，不支持再在UIExtension内拉起半模态/弹窗。
- 若无二次确认或者自定义关闭行为的场景，不建议使用shouldDismiss/onWilDismiss接口。
生命周期
半模态页面提供了生命周期函数，用于通知用户该弹窗的生命周期状态。生命周期的触发顺序依次为：onWillAppear -> onAppear -> onWillDisappear -> onDisappear。
使用嵌套滚动交互：半模态上述交互默认的嵌套模式为：{Forward：PARENT_FIRST，Backward：SELF_FIRST}
在半模态面板内容区域滑动时的操作优先级：
- 内容处于最顶部（内容不可滚动时以此状态处理）
上滑时，优先向上扩展面板档位，如无档位可扩展，则滚动内容
下滑时，优先向下收缩面板档位，如无档位可收缩，则关闭面板 - 内容处于中间位置（可上下滚动）
上/下滑时，优先滚动内容，直至页面内容到达底部/顶部 - 内容处于底部位置（内容可滚动时）
上滑时，呈现内容区域回弹效果，不切换档位
下滑时，滚动内容直到到达顶部
实战：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 })
}
}
