谁能告诉我一个HarmonyOS鸿蒙Next简单好用的对话框组件！

SimpleDialog.ets

import { UIContext, PromptAction } from '@ohos.arkui.UIContext';
import { ComponentContent } from '@kit.ArkUI';

import { DialogContentVM } from './viewmodels/DialogContentVM';

export class SimpleDialog {

  private uiContext: UIContext;

  private promptAction: PromptAction;

  private dialogContent: DialogContentVM = new DialogContentVM();

  private node: ComponentContent<DialogContentVM> | null = null;

  private _close: () => void = () => {
    if (this.node) {
      this.promptAction.closeCustomDialog(this.node);
      this.node = null;
    }
  };

  private confirm: () => void = () => this._close();

  private cancel: () => void = () => this._close();

  private willDismiss: () => boolean = () => true;

  public setMessage(value: string): SimpleDialog {
    this.dialogContent.message = value;
    return this;
  }

  public setConfirmButtonText(value: string): SimpleDialog {
    this.dialogContent.confirmButtonText = value;
    return this;
  }

  public setCancelButtonText(value: string): SimpleDialog {
    this.dialogContent.cancelButtonText = value;
    return this;
  }

  public onWillDismiss(callback: () => boolean): SimpleDialog {
    this.willDismiss = callback;
    return this;
  }

  public onConfirm(callback: () => void): SimpleDialog {
    this.confirm = () => {
      this._close();
      callback();
    };
    this.dialogContent.confirm = this.confirm;
    return this;
  }

  public onCancel(callback: () => void): SimpleDialog {
    this.cancel = () => {
      this._close();
      callback();
    };
    this.dialogContent.cancel = this.cancel;
    return this;
  }

  public open(): void {
    if (this.node) {
      return;
    }
    this.node = new ComponentContent(this.uiContext, wrapBuilder(buildSimpleDialog), this.dialogContent);
    this.promptAction
      .openCustomDialog(this.node, {
        onWillDismiss: () => {
          if (this.willDismiss()) {
            this._close();
          }
        }
      })
      .catch(() => this.node = null);
  }

  public close(): void {
    this._close();
  }

  constructor(uiContext: UIContext) {
    this.uiContext = uiContext;
    this.promptAction = uiContext.getPromptAction();
    this.dialogContent.confirm = this.confirm;
    this.dialogContent.cancel = this.cancel;
  }
}

@Builder
function buildSimpleDialog(content: DialogContentVM): void {
  Column() {
    Text(content.message)
      .fontSize(16)
      .fontColor('#E6000000')
      .fontWeight(600)
      .margin({ bottom: 8 })
    Row() {
      Button() {
        Text(content.cancelButtonText)
          .fontColor($r('sys.color.mask_secondary'))
      }
      .width('50%')
      .height(40)
      .fontWeight(500)
      .type(ButtonType.Normal)
      .backgroundColor(Color.Transparent)
      .onClick(() => content.cancel())
      Button() {
        Text(content.confirmButtonText)
          .fontColor('#FFE64566')
      }
      .width('50%')
      .height(40)
      .fontWeight(500)
      .type(ButtonType.Normal)
      .backgroundColor(Color.Transparent)
      .onClick(() => content.confirm())
    }
    .width('100%')
  }
  .width('90%')
  .padding(16)
  .justifyContent(FlexAlign.Start)
  .backgroundColor(Color.White)
  .borderRadius(24)
}

./viewmodels/DialogContentVM

@ObservedV2
export class DialogContentVM {
  @Trace
  public message: string = '';

  @Trace
  public confirmButtonText: string = '确定';

  @Trace
  public cancelButtonText: string = '取消';

  @Trace
  public confirm: () => void = () => {};

  @Trace
  public cancel: () => void = () => {};
}

使用方式

@Entry
@ComponentV2
struct Index {

  private uiContext: UIContext = this.getUIContext();

  private timerId: number | undefined = undefined;

  private dialog: SimpleDialog = new SimpleDialog(this.uiContext)
    .setMessage('这是一个测试弹窗')
    .setConfirmButtonText('确定')
    .setCancelButtonText('取消')
    .onConfirm((): void => {
      this.uiContext.getPromptAction().showToast({ message: '你通过点击确定按钮关闭了弹窗' });
    })
    .onCancel((): void => {
      this.uiContext.getPromptAction().showToast({ message: '你通过点击取消按钮关闭了弹窗' });
    })
    .onWillDismiss(): boolean => {
      this.uiContext.getPromptAction().showToast({ message: '你通过返回false拦截了其它关闭方式' });
      return false;
    };

  public build(): void {
    Column({ space: 18 }) {
      Button('打开弹窗')
        .onClick(() => {
          clearTimeout(this.timerId);
          this.dialog.open();
        })
      Button('打开一个 3 秒后自动关闭的弹窗')
        .onClick(() => {
          clearTimeout(this.timerId);
          this.timerId = setTimeout(() => this.dialog.close(), 3000);
          this.dialog.open();
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

可以试试这个，已经封装好啦。支持链式调用，支持设置回调，支持拦截其它关闭方式(左滑屏幕、点击其它区域等)。

如果试过觉着还行，把弹窗UI换成自己需要的风格就可以直接用了。之后哪里需要就在哪里开导（import）。

在HarmonyOS Next中，可以使用AlertDialog组件快速创建简单对话框。示例代码：

import { AlertDialog } from '@ohos.arkui.advanced';

let dialog = new AlertDialog({
  title: '提示',
  message: '这是一个基础对话框',
  confirm: {
    text: '确定',
    action: () => {
      console.log('点击确定');
    }
  }
});
dialog.show();

主要参数包含title、message和confirm按钮。该组件支持自定义样式和按钮事件绑定，适用于基础提示场景。使用前需在module.json5中声明ohos.permission.SYSTEM_DIALOG权限。