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

举报
yd_273695820 发表于 2025/06/14 15:51:36 2025/06/14
【摘要】 HarmonyOS中如何在类中调用全局的弹窗 前言相信大家在开发中自定义弹窗都是用的@CustomDialog在每个页面都写一大堆初始化代码,并且在类中使用也是相当难调用,今天给老铁们分享使用promptAction.openCustomDialog去在类中调用全局的弹窗。 如何使用? 第一步先到EntryAbility这个文件存取上下文(必要条件)onWindowStageCreate(...

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

前言

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

如何使用?

第一步

  1. 先到EntryAbility这个文件存取上下文(必要条件)
    image.png
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);
    });
  });
}
  1. 写一个Builder(样式自定义)

    image.png

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

}
  1. 万事俱备只欠东风(定义全局类)

image.png

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,
      })
    }
  }
}
  1. 齐活开整
@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('点我,我就给你个弹窗')
        .onClick(() => {
          DialogModel.showDialog('我就给你了')
        })
    }
  }
}

看看效果

recording.gif

不足

  1. 返回的时候会关闭弹窗(如果为吐司不需要关)
  2. 连续点击会一直弹出(有的需求需要打开一个弹窗关闭上一个弹窗)
  3. 返回的时候不想关闭弹窗,但是想要退出页面栈
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。