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();}
}

代码解释

创建 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>);}// 显示自定义的 AlertDialogshowDialog() {this.customAlertDialog.build('提示','这是一条自定义的消息内容。',() => {console.log('用户点击了确定');},() => {console.log('用户点击了取消');});}
}

代码解释

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