HarmonyOS ArkTS 基于CommonDialog实现自定义AlertDialog

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

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

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

步骤 2:实现自定义 AlertDialog

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

示例代码
TypeScript 复制代码
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,例如在点击按钮时弹出对话框。

示例主界面代码
TypeScript 复制代码
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 组件,你可以灵活地定制对话框的样式和行为。你可以根据需要进一步扩展该对话框,加入更多的自定义功能,比如图标、输入框等。

相关推荐
HMS Core1 小时前
京东携手HarmonyOS SDK首发家电AR高精摆放功能
华为·ar·harmonyos
请叫我小蜜蜂同学8 小时前
【鸿蒙】鸿蒙操作系统发展综述
华为·harmonyos
HMS Core9 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
华为·harmonyos
塞尔维亚大汉11 小时前
鸿蒙内核源码分析(文件句柄篇) | 你为什么叫句柄?
源码·harmonyos
别说我什么都不会11 小时前
【OpenHarmony】鸿蒙开发之FlexSearch
harmonyos
HarmonyOS小助手13 小时前
在鸿蒙中造梦的开发者,一边回答,一边前行
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
HarmonyOS_SDK15 小时前
用AI重塑游戏体验:《诛仙2》携手HarmonyOS SDK实现性能与功耗双赢
harmonyos
别说我什么都不会16 小时前
【OpenHarmony】鸿蒙开发之epublib
harmonyos
塞尔维亚大汉16 小时前
鸿蒙内核源码分析(VFS篇) | 文件系统和谐共处的基础
源码·harmonyos
Georgewu1 天前
【HarmonyOS】鸿蒙端云一体化开发入门详解 (一)
harmonyos