HarmonyOS 鸿蒙Next promptAction.openCustomDialog 全局弹窗

发布于 1周前 作者 nodeper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next promptAction.openCustomDialog 全局弹窗

promptAction.openCustomDialog 应该如何弹全局自定义弹窗

2 回复

promptAction.openCustomDialog 全局弹窗参考代码如下:

一、新建3个工具类

1、GlobalContext.ets:

export class GlobalContext {
  private constructor() {
  }

  private static instance: GlobalContext;
  private _objects = new Map<string, Object>();

  public static getContext(): GlobalContext {
    if (!GlobalContext.instance) {
      GlobalContext.instance = new GlobalContext();
    }
    return GlobalContext.instance;
  }

  getObject(value: string): Object | undefined {
    return this._objects.get(value);
  }

  setObject(key: string, objectClass: Object): void {
    this._objects.set(key, objectClass);
  }
}

2、DialogUtils.ets:

import { promptAction } from '@kit.ArkUI'
import { GlobalContext } from './GlobalContext'

@Builder
export function customDialogBuilder(content: String) {
  Column() {
    Text(`Tip: ${content} `).fontSize(20).height("30%")
    Text('失败原因:失败原因失败原因失败原因失败原因失败原因失败原因失败原因!').fontSize(16).height("30%")
    Row() {
      Button("确认").onClick(() => {
        promptAction.closeCustomDialog(getCustomDialogId())
      })
      Blank().width(50)
      Button("取消").onClick(() => {
        promptAction.closeCustomDialog(getCustomDialogId())
      })
    }
    .margin({ top: 30 })
  }.height(200).padding(5)
}

function getCustomDialogId() {
  // 取customDialogId
  let customDialogId = GlobalContext.getContext().getObject('customDialogId') as number
  return customDialogId;
}

3、HttpUtil.ets:

import { GlobalContext } from './GlobalContext';
import { promptAction } from '@kit.ArkUI';
import { customDialogBuilder } from './DialogUtils';


export function testPromptDialog() {
  // 方法调用后使用弹窗
  // 使用GlobalContext中UIContext
  const that = GlobalContext.getContext().getObject('UIContext') as UIContext;
  if (that) {
    promptAction.openCustomDialog({
      builder: customDialogBuilder.bind(that, "网络请求失败!")
    }).then((dialogId: number) => {
      GlobalContext.getContext().setObject('customDialogId', dialogId)
    })
  }
}

二、页面测试弹窗效果

1、Index.ets:

import { GlobalContext } from '../utils/GlobalContext'
import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  aboutToAppear(): void {
    // 存入UIContext与customDialogId
    GlobalContext.getContext().setObject('UIContext', this)
    GlobalContext.getContext().setObject('customDialogId', 0)
  }

  build() {
    Row() {
      Column() {
        Button("跳转其他页面")
          .onClick(() => {
            router.pushUrl({ url: "pages/Page2" })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2、Page2.ets:

import { testPromptDialog } from '../utils/HttpUtil';

@Entry
@Component
struct Page2 {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Button("promptAction弹窗")
          .onClick(() => {
            testPromptDialog()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next promptAction.openCustomDialog 全局弹窗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙系统中的 promptAction.openCustomDialog 方法用于触发全局弹窗。此方法允许开发者在应用内调用系统级弹窗,用于显示信息、提示用户操作或展示某些特定内容。

使用场景

  • 信息提示:在不中断用户当前操作的情况下,向用户展示重要信息。
  • 用户交互:通过弹窗与用户进行交互,如确认操作、输入信息等。
  • 功能引导:引导用户完成某些特定操作或新功能介绍。

调用方式

在鸿蒙应用中,调用 promptAction.openCustomDialog 方法时,需传入一个包含弹窗内容、标题、按钮等配置的 CustomDialogOptions 对象。此对象允许开发者自定义弹窗的外观和行为。

注意事项

  • 权限要求:确保应用已获得显示全局弹窗的相关权限。
  • 内容设计:弹窗内容应简洁明了,避免过多干扰用户。
  • 交互逻辑:合理设计弹窗的交互逻辑,确保用户能顺利完成任务或关闭弹窗。

示例代码

let options = {
    title: "弹窗标题",
    content: "这是弹窗的内容",
    buttons: [
        { text: "确定", onClick: () => { /* 处理点击事件 */ } }
    ]
};
promptAction.openCustomDialog(options);

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部