HarmonyOS中如何在类中调用全局的弹窗？

HarmonyOS中如何在类中调用全局的弹窗

前言

相信大家在开发中自定义弹窗都是用的@CustomDialog在每个页面都写一大堆初始化代码，并且在类中使用也是相当难调用，今天给老铁们分享使用promptAction.openCustomDialog去在类中调用全局的弹窗。

如何使用？

第一步

1. 先到EntryAbility这个文件存取上下文（必要条件）

onWindowStageCreate(windowStage: window.WindowStage): void {
  windowStage.loadContent('pages/Index', (err) => {
    window.getLastWindow(this.context).then((data: window.Window) => {
      let uiContext = data.getUIContext();
      AppStorage.setOrCreate<UIContext>('UIContext', uiContext);
    });
  });
}

2. 写一个Builder（样式自定义）

export class Params {
  text: ResourceStr = ""

  constructor(text: ResourceStr) {
    this.text = text;
  }
}

@Builder
export function testTextBuilder(params: Params) {
  Column() {
    Text(params.text)
      .textAlign(TextAlign.Center)
      .fontSize(20)
      .borderRadius(6)
      .backgroundColor('rgba(24, 25, 26, 0.85)')
      .fontColor($r('sys.color.comp_background_list_card'))
      .padding(16)
  }

}

3. 万事俱备只欠东风（定义全局类）

export class DialogModel {
  static showDialog(message: string) {
    if (message != '') {
      let timeId: number = -1
      // 获取上下文
      let uiContext = AppStorage.get('UIContext') as UIContext
      let promptAction = uiContext.getPromptAction();
      let contentNode = new ComponentContent(uiContext, wrapBuilder(testTextBuilder), new Params(message));
      promptAction.openCustomDialog(contentNode, {
        isModal: false,
        onWillAppear: () => {
          timeId = setTimeout(() => {
            promptAction.closeCustomDialog(contentNode)
          }, 2000)
        },
        onDidDisappear: () => {
          clearTimeout(timeId)
        },
        keyboardAvoidMode: KeyboardAvoidMode.NONE,
        showInSubWindow: true,
      })
    }
  }
}

4. 齐活开整

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('点我，我就给你个弹窗')
        .onClick(() => {
          DialogModel.showDialog('我就给你了')
        })
    }
  }
}

看看效果

不足

1. 返回的时候会关闭弹窗（如果为吐司不需要关）
2. 连续点击会一直弹出（有的需求需要打开一个弹窗关闭上一个弹窗）
3. 返回的时候不想关闭弹窗，但是想要退出页面栈

以上不足将会再下篇文章中优化，敬请期待！