华为云 HCCDA 实验实战：鸿蒙应用弹窗组件与交互逻辑

鸿蒙弹窗组件类型与使用场景

鸿蒙系统提供多种弹窗组件，包括ToastDialog（轻量提示）、CommonDialog（通用对话框）和ActionSheet（底部操作栏）。ToastDialog适用于短暂信息提示，如操作反馈；CommonDialog适合需要用户确认的场景，如退出确认；ActionSheet多用于多选项操作，如图片选择。

弹窗组件基础实现代码示例

以CommonDialog为例，需在ets文件中导入@ohos.promptAction模块：

import promptAction from '@ohos.promptAction';

// 创建并显示弹窗
let dialog = new promptAction.CommonDialog();
dialog.title = '确认操作';
dialog.message = '确定要删除此文件吗？';
dialog.buttons = [
  { text: '取消', color: '#666666' },
  { text: '确定', color: '#0A59F7' }
];
dialog.show();

弹窗交互逻辑设计要点

事件绑定通过onButtonClick回调实现。示例中为按钮添加点击事件处理：

dialog.onButtonClick((button) => {
  if (button.text === '确定') {
    // 执行删除逻辑
    console.log('文件已删除');
  }
  dialog.destroy(); // 关闭弹窗
});

样式自定义与动效配置

可通过alignment属性设置弹窗位置（默认居中），或使用CustomDialog实现完全自定义UI。动效通过transition属性配置：

dialog.alignment = DialogAlignment.Bottom;
dialog.transition = { duration: 300, curve: Curve.EaseOut };

与华为云服务集成实战

在HCCDA实验中，弹窗常用于云API调用确认。例如上传文件到华为云OBS时：

dialog.onButtonClick(async (button) => {
  if (button.text === '上传') {
    try {
      const obsClient = new ObsClient({ /* 配置信息 */ });
      await obsClient.putObject({ /* 参数 */ });
      showToast('上传成功');
    } catch (error) {
      showToast(`上传失败: ${error.message}`);
    }
  }
});

调试与性能优化建议

使用DevEco Studio的预览器实时调试弹窗布局。避免频繁创建销毁弹窗，推荐复用实例。内存管理需注意调用destroy()方法释放资源，防止内存泄漏。