鸿蒙开发中BindSheet应用 打造半模态转场效果

在鸿蒙开发中，BindSheet 组件可用于创建半模态窗口，通过设置合适的属性和添加动画效果，能够实现具有转场效果的半模态窗口。以下是详细的实现步骤和示例代码。

实现思路

1. 布局设计：使用 BindSheet 组件创建半模态窗口，并设置其内容布局。
2. 显示与隐藏控制：通过状态变量控制 BindSheet 的显示与隐藏。
3. 转场动画添加：利用 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%')
  }
}

代码解释

1. 状态管理：使用 isBindSheetVisible 状态变量控制 BindSheet 的显示与隐藏。当点击“打开半模态窗口”按钮时，将 isBindSheetVisible 设置为 true，并播放显示动画；点击“关闭窗口”按钮时，将 isBindSheetVisible 设置为 false。
2. BindSheet 组件：创建半模态窗口，设置其背景颜色为半透明黑色，内容区域为白色。
3. 转场动画：
   • 初始时，设置 BindSheet 的透明度为 0，位置向下偏移 100 像素。
   • 使用 animate 方法添加动画效果，动画时长为 300 毫秒，动画曲线为 EaseOut。
   • 通过 AnimatorController 控制动画的播放和反转，实现显示和隐藏时的平滑过渡。

注意事项

• 动画效果的具体参数（如时长、偏移量、动画曲线等）可以根据实际需求进行调整。
• 确保在 onDismiss 回调中正确更新 isBindSheetVisible 状态变量，以避免出现显示异常的问题。