当前位置：首页 > article >正文

HarmonyOS ArkTS 基于CommonDialog实现自定义AlertDialog

article 2024/11/30 18:44:37

在鸿蒙系统（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();
  }
}

代码解释

创建 CustomAlertDialog 类：该类封装了 CommonDialog，提供一个 build 方法来定制对话框的标题、内容和按钮。
build 方法：
- setTitle 设置对话框的标题。
- setMessage 设置对话框的消息内容。
- setButtonText 设置按钮文本。这里分别为“确定”和“取消”按钮设置文本。
- setButtonClickListener 设置按钮的点击事件回调。分别为“确定”和“取消”按钮设置不同的回调事件。
- show 显示对话框。
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('用户点击了取消');
      }
    );
  }
}

代码解释

创建 CustomAlertDialog 实例：在 MainPage 类中创建一个 CustomAlertDialog 的实例。
showDialog 方法：点击按钮时调用 showDialog 方法，弹出自定义的 AlertDialog。
按钮点击事件：在按钮的 onClick 事件中调用 this.customAlertDialog.build 方法，传入标题、消息内容以及按钮点击回调。