对话框封装实现指南

数据由AI生成。

一、对话框基础介绍

在鸿蒙ArkUI开发中，对话框(Dialog)是常用的交互组件，API12+提供了丰富的对话框类型：

  1. 基本对话框(AlertDialog)：显示提示信息和操作按钮

  2. 输入对话框(TextInputDialog)：包含输入框的对话框

  3. 全屏等待对话框(LoadingProgress)：全屏显示的加载指示器

二、对话框封装类设计

DialogUtils封装类

// DialogUtils.ets
import { AlertDialog, TextInputDialog, LoadingProgress } from '@ohos.arkui.dialog';
import { promptAction } from '@ohos.arkui.promptAction';

export class DialogUtils {
  /**
   * 显示基本对话框
   * @param title 标题
   * @param message 消息内容
   * @param buttons 按钮配置数组
   * @param cancelable 是否可取消
   */
  static showAlertDialog(
    title: string,
    message: string,
    buttons: Array<{
      text: string;
      color?: string;
      action: () => void;
    }>,
    cancelable: boolean = true
  ): void {
    const dialogButtons = buttons.map(btn => ({
      text: btn.text,
      color: btn.color || '#000000',
      action: () => {
        btn.action();
        promptAction.dismissDialog();
      }
    }));

    const dialogParams: AlertDialog.DialogParams = {
      title: title,
      message: message,
      buttons: dialogButtons,
      cancelable: cancelable
    };

    promptAction.showDialog(dialogParams);
  }

  /**
   * 显示输入对话框
   * @param title 标题
   * @param placeholder 输入框占位符
   * @param defaultValue 默认值
   * @param buttons 按钮配置数组
   * @param cancelable 是否可取消
   */
  static showInputDialog(
    title: string,
    placeholder: string = '',
    defaultValue: string = '',
    buttons: Array<{
      text: string;
      color?: string;
      action: (value: string) => void;
    }>,
    cancelable: boolean = true
  ): void {
    const dialogButtons = buttons.map(btn => ({
      text: btn.text,
      color: btn.color || '#000000',
      action: (value: string) => {
        btn.action(value);
        promptAction.dismissDialog();
      }
    }));

    const dialogParams: TextInputDialog.DialogParams = {
      title: title,
      placeholder: placeholder,
      defaultValue: defaultValue,
      buttons: dialogButtons,
      cancelable: cancelable
    };

    promptAction.showDialog(dialogParams);
  }

  /**
   * 显示全屏等待对话框
   * @param message 加载提示信息
   */
  static showLoadingDialog(message: string = '加载中...'): void {
    const dialogParams: LoadingProgress.DialogParams = {
      message: message
    };

    promptAction.showDialog(dialogParams);
  }

  /**
   * 关闭当前显示的对话框
   */
  static dismissDialog(): void {
    promptAction.dismissDialog();
  }
}

三、使用示例

1. 基本对话框使用

// 在任意页面中调用
import { DialogUtils } from '../utils/DialogUtils';

// 显示基本对话框
DialogUtils.showAlertDialog(
  '提示',
  '确定要删除此项吗？',
  [
    {
      text: '取消',
      color: '#999999',
      action: () => {
        console.log('用户点击了取消');
      }
    },
    {
      text: '确定',
      color: '#FF0000',
      action: () => {
        console.log('用户点击了确定');
        // 执行删除操作
      }
    }
  ],
  true
);

2. 输入对话框使用

// 显示输入对话框
DialogUtils.showInputDialog(
  '请输入姓名',
  '例如：张三',
  '',
  [
    {
      text: '取消',
      action: () => {
        console.log('用户取消了输入');
      }
    },
    {
      text: '确定',
      action: (value: string) => {
        console.log('用户输入了：' + value);
        // 处理输入值
      }
    }
  ]
);

3. 全屏等待对话框使用

// 显示加载对话框
DialogUtils.showLoadingDialog('数据加载中，请稍候...');

// 模拟异步操作
setTimeout(() => {
  // 关闭加载对话框
  DialogUtils.dismissDialog();
}, 2000);

四、封装优势说明

  1. 统一调用入口：所有对话框通过DialogUtils类统一管理

  2. 简化参数配置：封装了复杂的参数配置，提供简洁的API

  3. 类型安全：使用TypeScript确保参数类型正确

  4. 可扩展性：方便添加新的对话框类型或功能

  5. 跨页面调用：可在应用的任何页面中直接调用

五、注意事项

  1. 对话框是模态的，会阻止用户与其他UI元素交互

  2. 避免在同一时间显示多个对话框

  3. 全屏加载对话框应配合异步操作使用，完成后必须调用dismissDialog关闭

  4. API12+对对话框样式和行为有细微调整，请确保测试不同场景

通过这种封装方式，可以极大简化鸿蒙应用中对话框的使用，提高开发效率和代码可维护性。