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

2 回复

可以尝试如下方式：

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


在HarmonyOS 鸿蒙Next中，自定义弹窗应用响应式能力主要涉及到弹窗布局的自适应调整。以下是在自定义弹窗中应用响应式能力的方法：

  1. 使用响应式布局：在自定义弹窗的布局中，可以使用响应式布局组件和属性，如栅格布局（Grid）、流式布局（Flow）等，使弹窗内容能够根据不同屏幕尺寸和方向自动调整布局。
  2. 监听窗口尺寸变化：通过监听窗口尺寸变化事件，动态调整弹窗的布局和样式。可以在弹窗的控制器中注册窗口尺寸变化的回调函数，根据当前窗口尺寸更新弹窗的布局参数。
  3. 动态修改弹窗内容：根据当前设备或窗口的断点，动态修改弹窗的内容和样式。可以使用媒体查询或断点系统来判断当前设备或窗口所处的断点范围，并据此调整弹窗的显示内容和布局。

总之，在HarmonyOS 鸿蒙Next中自定义弹窗应用响应式能力需要综合使用响应式布局、监听窗口尺寸变化和动态修改弹窗内容等方法。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部