HarmonyOS ArkTS 基于CommonDialog实现自定义AlertDialog

在鸿蒙系统（HarmonyOS）中，CommonDialog 是一个用于显示对话框的组件，类似于 Android 的 AlertDialog。如果你想在鸿蒙系统中使用 ArkTS 自定义一个 AlertDialog，你可以基于 CommonDialog 实现。

步骤 1：创建自定义 AlertDialog 组件

首先，我们需要创建一个自定义的 AlertDialog 组件，继承并包装 CommonDialog。可以自定义对话框的标题、内容、按钮等。

步骤 2：实现自定义 AlertDialog

我们将创建一个自定义的 AlertDialog 组件，并提供简单的弹出和关闭功能。

示例代码

import ui from '@ohos.ui';
import dialog from '@ohos.dialog';

/**
 * 自定义 AlertDialog 组件
 */
export default class CustomAlertDialog {
  private dialog: dialog.CommonDialog | null = null;

  // 构建对话框
  build(title: string, message: string, onConfirm: () => void, onCancel: () => void) {
    this.dialog = new dialog.CommonDialog();

    // 设置对话框标题和内容
    this.dialog.setTitle(title);
    this.dialog.setMessage(message);

    // 设置确认按钮
    this.dialog.setButtonText(dialog.CommonDialog.ButtonType.POSITIVE, '确定');
    this.dialog.setButtonClickListener(dialog.CommonDialog.ButtonType.POSITIVE, () => {
      onConfirm();
      this.dialog?.close();
    });

    // 设置取消按钮
    this.dialog.setButtonText(dialog.CommonDialog.ButtonType.NEGATIVE, '取消');
    this.dialog.setButtonClickListener(dialog.CommonDialog.ButtonType.NEGATIVE, () => {
      onCancel();
      this.dialog?.close();
    });

    // 显示对话框
    this.dialog.show();
  }

  // 关闭对话框
  close() {
    this.dialog?.close();
  }
}

代码解释

1. 创建 CustomAlertDialog 类 ：该类封装了 CommonDialog，提供一个 build 方法来定制对话框的标题、内容和按钮。

2. build 方法：

   • setTitle 设置对话框的标题。
   • setMessage 设置对话框的消息内容。
   • setButtonText 设置按钮文本。这里分别为"确定"和"取消"按钮设置文本。
   • setButtonClickListener 设置按钮的点击事件回调。分别为"确定"和"取消"按钮设置不同的回调事件。
   • show 显示对话框。

3. close 方法：关闭对话框。

步骤 3：在主界面使用 CustomAlertDialog

接下来，我们可以在主界面或其他页面中调用自定义的 AlertDialog，例如在点击按钮时弹出对话框。

示例主界面代码

import ui from '@ohos.ui';
import CustomAlertDialog from './CustomAlertDialog';

export default class MainPage {
  private customAlertDialog: CustomAlertDialog = new CustomAlertDialog();

  build() {
    return (
      <StackLayout>
        <Text value="点击按钮弹出自定义 AlertDialog" fontSize={30} textAlign="center" />
        <Button onClick={this.showDialog.bind(this)}>
          <Text value="显示对话框" fontSize={30} />
        </Button>
      </StackLayout>
    );
  }

  // 显示自定义的 AlertDialog
  showDialog() {
    this.customAlertDialog.build(
      '提示',
      '这是一条自定义的消息内容。',
      () => {
        console.log('用户点击了确定');
      },
      () => {
        console.log('用户点击了取消');
      }
    );
  }
}

代码解释

1. 创建 CustomAlertDialog 实例 ：在 MainPage 类中创建一个 CustomAlertDialog 的实例。

2. showDialog 方法 ：点击按钮时调用 showDialog 方法，弹出自定义的 AlertDialog。

3. 按钮点击事件 ：在按钮的 onClick 事件中调用 this.customAlertDialog.build 方法，传入标题、消息内容以及按钮点击回调。

步骤 4：运行和调试

1. 打开 DevEco Studio，选择目标设备（模拟器或真实设备）。
2. 点击运行按钮，调试并查看弹出的自定义对话框。
3. 点击按钮，查看对话框是否成功弹出，并根据点击的按钮输出相应的日志。

总结

以上是如何在鸿蒙系统中使用 ArkTS 创建自定义的 AlertDialog。通过封装 CommonDialog 组件，你可以灵活地定制对话框的样式和行为。你可以根据需要进一步扩展该对话框，加入更多的自定义功能，比如图标、输入框等。