HarmonyOS鸿蒙Next网络请求框架中，添加一个CustomDialog

HarmonyOS鸿蒙Next网络请求框架中，添加一个CustomDialog 1、想要实现在axios请求的拦截器中添加一个加载框。现在使用@customDialog 但是使用其controllor方法open时，加载框不显示，这个是为啥？

2、如果想在拦截其中添加加载框，如何实现？

4 回复

CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量，且在@Component struct内部定义时赋值才有效，具体用法可看下方示例。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-methods-custom-dialog-box-V13#customdialogcontroller

您可以使用promptAction.openCustomDialog接口，全局调用自定义弹窗打开

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-promptaction-V13#promptactionopencustomdialog11

更多关于HarmonyOS鸿蒙Next网络请求框架中，添加一个CustomDialog的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


需要使用不依赖UI组件的全局自定义弹出框 (openCustomDialog)：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-uicontext-custom-dialog-V13

在HarmonyOS鸿蒙Next网络请求框架中添加一个CustomDialog，可以通过以下步骤实现：

  1. 创建CustomDialog：首先，创建一个继承自CommonDialog的自定义对话框类。在这个类中，你可以定义对话框的布局、样式以及相关的业务逻辑。

  2. 布局文件：在resources/base/layout目录下创建对话框的布局文件。布局文件可以使用XML定义对话框的UI元素，如按钮、文本框等。

  3. 初始化CustomDialog：在需要显示对话框的地方，实例化你的CustomDialog类，并设置对话框的属性，如标题、内容、按钮事件等。

  4. 显示对话框：调用show()方法显示对话框。你可以在网络请求的回调中根据请求的结果来决定是否显示对话框。

  5. 处理对话框事件：在CustomDialog类中处理对话框的事件，如按钮点击事件。根据用户的操作，执行相应的逻辑。

以下是一个简单的示例代码：

import { CommonDialog } from '@ohos.arkui.commonDialog';
import { Resource } from '@ohos.resourceManager';
import { Builder } from '@ohos.arkui.builder';

export class CustomDialog extends CommonDialog {
    constructor(context: any) {
        super(context);
        this.setContentView(R.layout.custom_dialog_layout);
        this.setTitle("提示");
        this.setMessage("网络请求失败，请重试！");
        this.setPositiveButton("确定", () => {
            // 处理确定按钮点击事件
        });
        this.setNegativeButton("取消", () => {
            // 处理取消按钮点击事件
        });
    }
}

// 在需要显示对话框的地方
let customDialog = new CustomDialog(this.context);
customDialog.show();

在HarmonyOS鸿蒙Next中，使用网络请求框架时，可以通过以下步骤添加一个CustomDialog：

  1. 创建CustomDialog：继承CustomDialog类，自定义布局和逻辑。
  2. 设置网络请求回调：在网络请求的回调中，根据请求结果显示或隐藏CustomDialog。
  3. 显示Dialog：在请求开始时调用show()方法显示Dialog，请求完成后调用dismiss()方法关闭Dialog。

示例代码：

public class LoadingDialog extends CustomDialog {
    public LoadingDialog(Context context) {
        super(context);
        // 设置自定义布局
        setContentView(R.layout.dialog_loading);
    }
}

// 在网络请求中使用
LoadingDialog dialog = new LoadingDialog(context);
dialog.show();
// 请求完成后
dialog.dismiss();

通过这种方式，可以在网络请求期间显示自定义的加载提示。

回到顶部