HarmonyOS 鸿蒙Next 自定义弹窗中如何应用响应式能力
HarmonyOS 鸿蒙Next 自定义弹窗中如何应用响应式能力
import { GlobalContext } from ‘./GlobalContext’; import { testPromptDialog } from ‘./HttpUtil’;@Entry @Component struct Index { aboutToAppear(): void { GlobalContext.getContext().setObject(‘UIContext’, this) } build() { Row() { Column() { Button(“promptAction弹窗”) .onClick(() => { testPromptDialog() }) } .width(‘100%’) } .height(‘100%’) } } ··· 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); } }
···
HttpUtil.ets ··· import { GlobalContext } from ‘./GlobalContext’; import { promptAction } from ‘@kit.ArkUI’;
let customDialogId: number = 0 @Builder export function customDialogBuilder(content: String) { @State test: string = ‘aaa’//需要在这里定义响应式变量，用物UI交互
Column() { Text(Tip: ${content} ).fontSize(20).height(“30%”) Text(‘失败原因：失败原因!’).fontSize(16).height(“30%”) Row() { Button(“确认”).onClick(() => { promptAction.closeCustomDialog(customDialogId) }) Blank().width(50) Button(“取消”).onClick(() => { promptAction.closeCustomDialog(customDialogId) }) } .margin({ top: 30 }) }.height(200).padding(5) } export function testPromptDialog() { const that = GlobalContext.getContext().getObject(‘UIContext’) as UIContext; if (that) { promptAction.openCustomDialog({ builder: customDialogBuilder.bind(that, “网络请求失败！”) }).then((dialogId: number) => { customDialogId = dialogId; }) } }
非页面中触发的全局弹窗，且弹窗中存在UI交互 ，需要使用到响应式能力
更多关于HarmonyOS 鸿蒙Next 自定义弹窗中如何应用响应式能力的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
可以尝试如下方式：
1、AppStorage：应用全局的UI状态存储, 用法请参考： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-appstorage-V5
2、EventHub: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-inner-application-eventhub-V5 以下是通过EventHub来与UI交互的示例： Index.ets
import { GlobalContext } from './GlobalContext';
import { testPromptDialog } from './HttpUtil';
import common from '[@ohos](/user/ohos).app.ability.common';
const eventHub: common.EventHub = (getContext(this) as common.UIAbilityContext).eventHub
@Entry
@Component
struct Index {
@State test: string = ‘’;
aboutToAppear(): void {
GlobalContext.getContext().setObject(‘UIContext’, this)
eventHub.on(‘changeTest’, (val: string) => {
this.test = val
})
}
build() {
Row() {
Column() {
Text(this.test)
Button(“promptAction弹窗”)
.onClick(() => {
testPromptDialog()
})
}
.width(‘100%’)
}
.height(‘100%’)
}
}
HttpUtils.ets
import { GlobalContext } from ‘./GlobalContext’;
import { promptAction } from ‘@kit.ArkUI’;
import common from ‘@ohos.app.ability.common’;
let test: string = ‘aaa’//需要在这里定义响应式变量，用物UI交互
const eventHub: common.EventHub = (getContext(this) as common.UIAbilityContext).eventHub
let customDialogId: number = 0
@Builder
export function customDialogBuilder(content: string) {
Column() {
Text(Tip: ${content}).fontSize(20).height(“30%”)
Button(‘emitTestValue’)
.onClick(() => {
// 发射事件，传递数据用于和UI交互
eventHub.emit(‘changeTest’, test)
})
Text(‘失败原因：失败原因!’).fontSize(16).height(“10%”)
Row() {
Button(“确认”).onClick(() => {
promptAction.closeCustomDialog(customDialogId)
})
Blank().width(50)
Button(“取消”).onClick(() => {
promptAction.closeCustomDialog(customDialogId)
})
}
.margin({ top: 30 })
}.height(200).padding(5)
}
export function testPromptDialog() {
const that = GlobalContext.getContext().getObject(‘UIContext’) as UIContext;
if (that) {
promptAction.openCustomDialog({
builder: customDialogBuilder.bind(that, “网络请求失败！”)
}).then((dialogId: number) => {
customDialogId = dialogId;
})
}
}
更多关于HarmonyOS 鸿蒙Next 自定义弹窗中如何应用响应式能力的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
