HarmonyOS 如何写一个http加载中的转动弹窗,监听到http请求完成自动关闭改弹窗

HarmonyOS
2025-01-09 15:58:03
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

参考示例如下:

import { ComponentContent } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Parent {
  private customDialog = new CustomDialog()
  @State message: string = ''

  build() {
    Column() {
      Text(this.message)
      Button("click").onClick(() => {
        this.customDialog.openDialog(this.getUIContext())

        //模拟请求结束关闭弹框
        setTimeout(() => {
          this.customDialog.closeDialog(this.getUIContext())
          this.message = '拿到数据'
        }, 3000)
      }).width(100).height(100)
    }.width('100%').height('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
  }
}

class CustomDialog {
  openDialog(uiContext: UIContext) {
    if (uiContext) {
      let promptAction = uiContext.getPromptAction();
      let contentNode = new ComponentContent((uiContext as UIContext), wrapBuilder(buildText));
      GlobalContext.getContext().setObject('contentNode', contentNode);
      try {
        promptAction.openCustomDialog(contentNode, {
          isModal: false
        });
      } catch (error) {
        let message = (error as BusinessError).message;
        let code = (error as BusinessError).code;
        console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
      }
      ;
    }
  }

  closeDialog(uiContext: UIContext) {
    if (uiContext) {
      let promptAction = uiContext.getPromptAction();
      try {
        let contentNode = GlobalContext.getContext().getObject('contentNode') as ComponentContent<object>;
        promptAction.closeCustomDialog(contentNode);
      } catch (error) {
        let message = (error as BusinessError).message;
        let code = (error as BusinessError).code;
        console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
      };
    }
  }
}

@Builder
function buildText() {
  Column() {
    Text('加载中')
      .fontSize(24)
  }
  .backgroundColor(Color.Pink)
  .width(100)
  .height(100)
  .alignItems(HorizontalAlign.Center)
  .justifyContent(FlexAlign.Center)
}

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 {
    console.log(typeof (this._objects.get(value)))
    return this._objects.get(value);
  }

  setObject(key: string, objectClass: Object): void {
    this._objects.set(key, objectClass);
  }
}

文档参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-uicontext-V5#opencustomdialog12

分享
微博
QQ
微信
回复
2025-01-09 19:16:58
相关问题
HarmonyOS 如何取消一个HTTP请求
280浏览 • 1回复 待解决
HarmonyOS 推荐一个http请求
368浏览 • 1回复 待解决
HarmonyOS 如何写一个工具获取User-Agent
352浏览 • 1回复 待解决
如何实现一个带动画弹窗
846浏览 • 1回复 待解决
ArkTS如何实现一个底部弹窗
1221浏览 • 1回复 待解决
HTTP请求使用同SESSIONID
948浏览 • 1回复 待解决
HarmonyOS http请求封装
493浏览 • 1回复 待解决
应用http请求响应2300023
2671浏览 • 1回复 待解决
http请求caPath路径该如何指定?
788浏览 • 1回复 待解决
HarmonyOS 取消http请求
547浏览 • 1回复 待解决
HarmonyOS http请求封装
389浏览 • 1回复 待解决