HarmonyOS 鸿蒙Next中自定义弹窗customDialog弹出和关闭

推荐使用 API version 18 引入的新接口 presentCustomDialog 和 DialogController，这样可以避免直接管理 dialogId，实现更简洁的弹窗控制。同时，您的弹窗内容定义在结构体内，可以直接访问状态变量，实现双向绑定。

解决方案

• 使用 DialogController 控制弹窗：通过 presentCustomDialog 接口打开弹窗时传入 DialogController 实例，然后在弹窗内通过调用 controller.close() 来关闭弹窗，无需处理 dialogId。
• 双向变量绑定：由于弹窗 @Builder 定义在结构体内，直接修改 @State 变量即可实现双向绑定。
• 错误处理：使用 try-catch 或 .catch 处理异步操作错误。

修改后的代码示例

import { BusinessError } from '@kit.BasicServicesKit';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  // 获取UIContext和PromptAction
  private uiContext: UIContext = this.getUIContext();
  private promptAction: PromptAction = this.uiContext.getPromptAction();
  // 创建DialogController实例用于控制弹窗
  private dialogController: promptAction.DialogController = new promptAction.DialogController();

  @State listName: string = "无标题列表";
  @State listOfList: Array<{ title: string }> = [];

  // 自定义弹窗组件
  @Builder
  CustomDialogComponent() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceAround }) {
      TextInput({ placeholder: '请输入新建列表名', text: this.listName })
        .height('30%')
        .showUnderline(true)
        .onChange((value: string) => {
          this.listName = value; // 直接修改状态变量，实现双向绑定
        })
        .onSubmit(() => {
          this.listOfList.push({ title: this.listName });
          this.listName = '无标题列表';
        })
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        Button('确定创建')
          .type(ButtonType.Normal)
          .fontColor('#0a59f7')
          .backgroundColor(Color.Transparent)
          .enabled(this.listName === '无标题列表' ? false : true)
          .onClick(() => {
            this.listOfList.push({ title: this.listName });
            this.listName = '无标题列表';
            this.dialogController.close(); // 通过Controller关闭弹窗
          })
        Divider().vertical(true)
          .margin(5)
          .color('#0a59f7')
        Button('取消')
          .type(ButtonType.Normal)
          .backgroundColor(Color.Transparent)
          .fontColor('#999')
          .onClick(() => {
            this.dialogController.close(); // 通过Controller关闭弹窗
          })
      }.height('30%')
    }.width('80%')
    .height('20%')
  }

  // 打开弹窗
  openDialog() {
    this.promptAction.presentCustomDialog(
      () => { this.CustomDialogComponent() }, // Builder函数
      this.dialogController, // 传入Controller
      {} // 可选配置，例如弹窗样式
    ).then((dialogId: number) => {
      console.info(`弹窗打开成功，ID: ${dialogId}`);
      // 不需要保存dialogId，因为使用Controller关闭
    }).catch((error: BusinessError) => {
      console.error(`打开弹窗失败: code=${error.code}, message=${error.message}`);
    });
  }

  build() {
    Row() {
      Column() {
        Button('打开弹窗')
          .onClick(() => {
            this.openDialog(); // 点击打开弹窗
          })
        // 其他UI内容，例如显示列表
        List() {
          ForEach(this.listOfList, (item: { title: string }) => {
            ListItem() {
              Text(item.title).fontSize(16)
            }
          })
        }
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

关键点说明

• DialogController 使用：DialogController 实例用于控制弹窗的关闭，调用 close() 方法即可，无需处理 dialogId，简化了多弹窗管理。
• 双向绑定：弹窗内的 TextInput 直接绑定到 @State listName，修改时自动更新父组件状态。
• API 版本：presentCustomDialog 从 API version 18 开始支持，适用于您的环境（API 17以上）。
• 错误处理：使用 .catch 捕获打开弹窗时的错误，确保稳定性。

如果您的项目中有多个弹窗，可以为每个弹窗创建单独的 DialogController 实例，但通常一个控制器可以管理一个弹窗实例。如果您需要同时打开多个弹窗，建议为每个弹窗创建独立的控制器。