HarmonyOS鸿蒙Next中CustomDialog自定义弹窗设计

在HarmonyOS Next的ArkUI中，使用@CustomDialog装饰器创建自定义弹窗是构建交互界面的核心能力之一。以下是针对你问题的具体实现方案：

1. 创建自定义弹窗

使用@CustomDialog装饰器定义一个弹窗组件，需在struct内实现弹窗内容。

@CustomDialog
struct CustomAlertDialog {
  // 定义接收的参数
  @Prop title: string
  @Prop message: string
  
  // 定义回调函数
  controller: CustomDialogController
  
  build() {
    Column() {
      Text(this.title).fontSize(20).margin(10)
      Text(this.message).fontSize(16).margin(10)
      Button('确定')
        .onClick(() => {
          this.controller.close()
        })
    }
  }
}

2. 控制弹窗打开和关闭

通过CustomDialogController实例控制弹窗状态。

@Entry
@Component
struct DialogExample {
  // 创建控制器
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomAlertDialog({
      title: '提示',
      message: '操作成功'
    }),
    cancel: () => {}, // 取消回调
    autoCancel: true // 点击空白处自动关闭
  })
  
  build() {
    Column() {
      Button('打开弹窗')
        .onClick(() => {
          this.dialogController.open() // 打开弹窗
        })
    }
  }
}

3. 数据传递和返回值

传递数据：通过构造函数参数传递

// 定义弹窗时声明参数接口
interface DialogParams {
  title: string
  onConfirm: (result: string) => void
}

@CustomDialog
struct InputDialog {
  @Prop title: string
  @State inputText: string = ''
  private onConfirm: (result: string) => void
  
  controller: CustomDialogController
  
  build() {
    Column() {
      Text(this.title)
      TextInput({ text: this.inputText })
        .onChange((value) => {
          this.inputText = value
        })
      Button('提交')
        .onClick(() => {
          this.onConfirm(this.inputText) // 返回数据
          this.controller.close()
        })
    }
  }
}

使用弹窗并获取返回值：

@Entry
@Component
struct MainPage {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: InputDialog({
      title: '请输入',
      onConfirm: (result: string) => {
        // 处理返回结果
        console.log('用户输入:', result)
      }
    })
  })
  
  build() {
    // 页面内容
  }
}

4. 实现动画效果

使用ArkUI的动画API为弹窗添加入场和出场动画：

@CustomDialog
struct AnimatedDialog {
  @State scale: number = 0.5
  @State opacity: number = 0
  
  controller: CustomDialogController
  
  aboutToAppear() {
    // 入场动画
    animateTo({
      duration: 300,
      curve: Curve.EaseOut
    }, () => {
      this.scale = 1
      this.opacity = 1
    })
  }
  
  build() {
    Column() {
      // 弹窗内容
    }
    .scale({ x: this.scale, y: this.scale })
    .opacity(this.opacity)
  }
}

关键要点总结：

• @CustomDialog装饰器必须修饰struct
• 通过CustomDialogController管理弹窗生命周期
• 数据传递使用@Prop装饰器接收参数
• 返回值通过回调函数或Promise方式处理
• 动画效果结合animateTo和状态变量实现

这些方法在HydroQuiz项目中可直接应用，特别是需要用户确认或输入的场景。注意弹窗控制器应在父组件中管理，确保正确的生命周期控制。