HarmonyOS 鸿蒙Next promptAction.openCustomDialog 全局弹窗
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