HarmonyOS鸿蒙Next中如何使用AlertDialog和@CustomDialog实现弹窗功能？

实现思路：

1. 使用 AlertDialog.show 显示系统确认弹窗：

AlertDialog.show({
  title: '提示',
  message: '确定要删除吗？',
  primaryButton: {
    value: '取消',
    action: () => console.info('取消')
  },
  secondaryButton: {
    value: '确定',
    action: () => this.deleteItem()
  }
});

1. 使用 @CustomDialog 创建自定义弹窗组件：

[@CustomDialog](/user/CustomDialog)
struct EditDialog {
  controller: CustomDialogController;
  onConfirm: (value: string) => void = () => {};
  @State inputValue: string = '';

  build() {
    Column({ space: 16 }) {
      Text('编辑').fontSize(18).fontWeight(FontWeight.Bold)
      TextInput({ text: this.inputValue })
        .onChange((value: string) => this.inputValue = value)
      Row({ space: 16 }) {
        Button('取消').onClick(() => this.controller.close())
        Button('确定').onClick(() => {
          this.onConfirm(this.inputValue);
          this.controller.close();
        })
      }
    }
    .padding(24)
  }
}

1. 使用 CustomDialogController 控制弹窗：

dialogController: CustomDialogController = new CustomDialogController({
  builder: EditDialog({
    onConfirm: (value: string) => {
      console.info(`确认: ${value}`);
    }
  }),
  autoCancel: true
});

// 打开弹窗
this.dialogController.open();

1. 完整示例代码：

@Entry
@Component
struct DialogExample {
  @State content: string = '初始内容';

  dialogController: CustomDialogController = new CustomDialogController({
    builder: EditDialog({
      initialValue: this.content,
      onConfirm: (value: string) => {
        this.content = value;
      }
    }),
    autoCancel: true,
    alignment: DialogAlignment.Center,
    customStyle: true
  });

  showAlertDialog() {
    AlertDialog.show({
      title: '提示',
      message: '确定要删除这条记录吗？',
      autoCancel: true,
      primaryButton: {
        value: '取消',
        action: () => console.info('取消')
      },
      secondaryButton: {
        value: '确定',
        fontColor: Color.Red,
        action: () => {
          console.info('确定删除');
          this.content = '';
        }
      }
    });
  }

  build() {
    Column({ space: 16 }) {
      Text(`当前内容: ${this.content}`)
        .fontSize(16)

      Button('显示系统弹窗')
        .onClick(() => this.showAlertDialog())

      Button('显示自定义弹窗')
        .onClick(() => this.dialogController.open())
    }
    .width('100%')
    .padding(20)
  }
}

[@CustomDialog](/user/CustomDialog)
struct EditDialog {
  controller: CustomDialogController;
  initialValue: string = '';
  onConfirm: (value: string) => void = () => {};
  @State inputValue: string = '';

  aboutToAppear() {
    this.inputValue = this.initialValue;
  }

  build() {
    Column({ space: 16 }) {
      Text('编辑内容')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)

      TextInput({ text: this.inputValue, placeholder: '请输入内容' })
        .onChange((value: string) => this.inputValue = value)

      Row({ space: 16 }) {
        Button('取消')
          .backgroundColor('#F0F0F0')
          .fontColor('#333')
          .onClick(() => this.controller.close())

        Button('确定')
          .onClick(() => {
            this.onConfirm(this.inputValue);
            this.controller.close();
          })
      }
    }
    .padding(24)
    .backgroundColor(Color.White)
    .borderRadius(16)
    .width('80%')
  }
}