HarmonyOS鸿蒙Next中封装的工具类如何弹出自定义dialog
HarmonyOS鸿蒙Next中封装的工具类如何弹出自定义dialog 封装的工具类中如何弹出自定义dialog
目前CustomDialog不支持在class中封装，因为弹窗需要根据上下文来弹出，建议使用promptAction.openCustomDialog：参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-promptaction-V5
您可以参考如下demo:
请参考如下代码：
import { promptAction } from '@kit.ArkUI';
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);
}
}
let customDialogId: number = 0
@Builder
export function customDialogBuilder(content: String) {
Column () {
Text(`${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;
})
}
}
@Entry
@Component
struct Page005 {
aboutToAppear(): void {
GlobalContext.getContext().setObject('UIContext', this)
}
build() {
Row () {
Column () {
Button("promptAction弹窗").onClick(() => {
testPromptDialog()
})
}.width('100%')
}.height('100%')
}
}
更多关于HarmonyOS鸿蒙Next中封装的工具类如何弹出自定义dialog的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，弹出自定义Dialog可以通过使用CommonDialog类来实现。首先，需要创建一个自定义布局文件，然后在代码中通过CommonDialog的setContent方法将自定义布局设置到Dialog中。以下是实现步骤：
-
创建自定义布局文件： 在
resources/base/layout目录下创建一个XML布局文件，例如custom_dialog.xml，定义你想要的Dialog界面。 -
初始化
CommonDialog： 在代码中初始化CommonDialog，并通过setContent方法将自定义布局设置到Dialog中。import common from '[@ohos](/user/ohos).app.ability.common'; import prompt from '[@ohos](/user/ohos).prompt'; import { CommonDialog } from '[@ohos](/user/ohos).common'; // 获取上下文 let context = getContext(this) as common.UIAbilityContext; // 初始化CommonDialog let customDialog = new CommonDialog(context); // 设置自定义布局 customDialog.setContent($r('app.layout.custom_dialog')); // 显示Dialog customDialog.show(); -
处理Dialog中的交互： 如果需要处理Dialog中的按钮点击等交互事件，可以在自定义布局文件中为按钮设置ID，然后通过
findComponentById方法获取组件并设置事件监听。let confirmButton = customDialog.findComponentById($r('app.id.confirm_button')) as Button; confirmButton.on('click', () => { prompt.showToast({ message: 'Confirm button clicked' }); customDialog.destroy(); // 关闭Dialog });
通过以上步骤，你可以在HarmonyOS鸿蒙Next中弹出自定义Dialog，并处理相关交互事件。
在HarmonyOS鸿蒙Next中，可以通过以下步骤弹出自定义Dialog：
-
创建自定义Dialog布局：在
resources/base/layout/目录下创建XML布局文件，定义Dialog的UI。 -
创建自定义Dialog类：继承
CommonDialog或BaseDialog，并在构造函数中加载自定义布局。 -
设置Dialog属性：通过
setSize、setAlignment等方法设置Dialog的大小、位置等属性。 -
显示Dialog：在需要的地方实例化自定义Dialog并调用
show()方法显示。
示例代码：
public class CustomDialog extends CommonDialog {
public CustomDialog(Context context) {
super(context);
setContentLayout(ResourceTable.Layout_custom_dialog);
}
}
// 使用
CustomDialog dialog = new CustomDialog(this);
dialog.show();
