HarmonyOS 5.0.0 或以上：实现下滑弹出卡片（支持拖动关闭 + 临界判断）

📌 场景介绍

弹出卡片/抽屉式组件常用于：

• 底部菜单、筛选面板、支付选择框
• 输入表单/上传控件弹出式交互
• 支持滑动关闭、遮罩阻止背景操作

本篇实现：

• 点击按钮弹出底部卡片
• 支持手势拖动关闭
• 拖动距离判断是否自动收起

🧱 页面结构

/entry/src/main/ets
  └── pages/
       └── SlideUpCardDemo.ets     // 下滑卡片组件演示页

🧩 SlideUpCardDemo.ets 示例页面

@Entry
@Component
struct SlideUpCardDemo {
  @State visible: boolean = false
  @State offsetY: number = 0

  private cardHeight: number = 300
  private closeThreshold: number = 120

  build() {
    Stack() {
      // 主页面内容
      Column() {
        Text("📦 下滑弹出卡片演示").fontSize(22).margin(20)
        Button("打开底部弹窗").onClick(() => {
          this.visible = true
          this.offsetY = 0
        }).margin(20)
      }

      // 遮罩层
      If(this.visible, () => {
        Blank()
          .backgroundColor('rgba(0,0,0,0.3)')
          .height('100%')
          .onClick(() => this.visible = false)
      })

      // 卡片内容
      If(this.visible, () => {
        Column() {
          Text("🔧 可下滑关闭的卡片")
            .fontSize(18).margin(20)

          Text("向下拖动超过一定距离即可关闭")
            .fontSize(14).fontColor('#999').margin(10)
        }
        .height(this.cardHeight)
        .width('100%')
        .backgroundColor('#ffffff')
        .borderRadius(16)
        .position({ x: 0, y: `calc(100% - ${this.cardHeight}px + ${this.offsetY}px)` })
        .transition({ duration: 200, curve: Curve.EaseOut })
        .gesture(
          PanGesture()
            .onUpdate(e => {
              if (e.offsetY > 0) this.offsetY = e.offsetY
            })
            .onEnd(() => {
              if (this.offsetY > this.closeThreshold) {
                this.visible = false
              } else {
                this.offsetY = 0
              }
            })
        )
      })
    }
    .height('100%')
  }
}

✅ 效果说明

• 点击“打开底部弹窗”弹出白色卡片
• 用户可通过拖动卡片下滑关闭（超过120px自动关闭）
• 也可点击灰色遮罩层关闭
• 支持流畅拖动与弹性回弹交互体验

🔧 拓展建议

• 支持拖动过程中调整透明度 / 阴影 / 模糊背景
• 拖动方向上下左右可配置
• 封装为通用 SlideCard 组件，传入内容 Slot
• 与页面路由或表单/列表联动使用