在鸿蒙开发中，BindSheet 组件可用于创建半模态窗口，通过设置合适的属性和添加动画效果，能够实现具有转场效果的半模态窗口。以下是详细的实现步骤和示例代码。
实现思路
-
布局设计：使用
BindSheet组件创建半模态窗口，并设置其内容布局。 -
显示与隐藏控制：通过状态变量控制
BindSheet的显示与隐藏。 -
转场动画添加：利用
Animator组件为BindSheet添加转场动画效果，使其在显示和隐藏时具有平滑的过渡。
示例代码
@Entry
@Component
struct BindSheetExample {
// 控制 BindSheet 显示与隐藏的状态变量
private isBindSheetVisible: boolean = false
// 动画播放控制器
private animatorController: AnimatorController = new AnimatorController()
build() {
Stack({ alignContent: Alignment.Center }) {
// 触发打开 BindSheet 的按钮
Button('打开半模态窗口')
.onClick(() => {
// 点击按钮时，显示 BindSheet
this.isBindSheetVisible = true
// 播放显示动画
this.animatorController.play()
})
if (this.isBindSheetVisible) {
BindSheet({
// 当 BindSheet 关闭时，更新状态变量
onDismiss: () => {
this.isBindSheetVisible = false
}
}) {
Column({ space: 20 }) {
// BindSheet 内的文本内容
Text('这是半模态窗口的内容')
.fontSize(20)
// 关闭 BindSheet 的按钮
Button('关闭窗口')
.onClick(() => {
// 点击关闭按钮时，隐藏 BindSheet
this.isBindSheetVisible = false
})
}
.width('100%')
.padding({ left: 20, top: 20, right: 20, bottom: 20 })
.backgroundColor('#FFFFFF') // 内容区域的背景颜色为白色
}
.backgroundColor('#00000080') // 设置 BindSheet 的背景为半透明黑色
.position({ x: 0, y: 0 })
.width('100%')
.height('auto')
.opacity(0) // 初始透明度为 0
.translate({ x: 0, y: 100 }) // 初始位置向下偏移 100 像素
.animate({
duration: 300, // 动画时长为 300 毫秒
curve: Curve.EaseOut // 动画曲线为 EaseOut
}) {
this.animatorController = new AnimatorController({
// 显示动画：透明度变为 1，位置恢复正常
play: () => {
this.opacity = 1
this.translate = { x: 0, y: 0 }
},
// 隐藏动画：透明度变为 0，位置向下偏移 100 像素
reverse: () => {
this.opacity = 0
this.translate = { x: 0, y: 100 }
}
})
}
}
}
.width('100%')
.height('100%')
}
}
代码解释
-
状态管理：使用
isBindSheetVisible状态变量控制BindSheet的显示与隐藏。当点击“打开半模态窗口”按钮时，将isBindSheetVisible设置为true，并播放显示动画；点击“关闭窗口”按钮时，将isBindSheetVisible设置为false。 -
BindSheet组件：创建半模态窗口，设置其背景颜色为半透明黑色，内容区域为白色。 -
转场动画：
- 初始时，设置
BindSheet的透明度为 0，位置向下偏移 100 像素。 - 使用
animate方法添加动画效果，动画时长为 300 毫秒，动画曲线为EaseOut。 - 通过
AnimatorController控制动画的播放和反转，实现显示和隐藏时的平滑过渡。
- 初始时，设置
注意事项
- 动画效果的具体参数（如时长、偏移量、动画曲线等）可以根据实际需求进行调整。
- 确保在
onDismiss回调中正确更新isBindSheetVisible状态变量，以避免出现显示异常的问题。
