HarmonyOS 是否有全局loading这种控件？

网络请求全局loading，目前只封装了这个类，但是还是比较麻烦，需要在页面中这样调用。

//全局的loading  
loading: CustomDialogController = new CustomDialogController({  
  builder: LoadingDialog({ loadingTips: this.loadingTips }),  
  autoCancel: false,  
  gridCount: 2,  
  alignment: DialogAlignment.Center,  
  cancel: () => {  
    this.loadingShow = false  
  }  
})  
aboutToAppear(): void {  
  LoadingDialogController.init(this.loading);  
  const loadingDialogController = LoadingDialogController.getInstance();  
  loadingDialogController.observeLoadingEvent();  
}

请问是否有全局dialog可以依附当前context来显示而不是跟@Entry绑定。

import { EventBusUtils } from '../../common/utils/EventBusUtils';  
import { LoadingBean } from '../bean/LoadingBean';  
import { LoadingEvent } from '../event/EventKeys';  
export class LoadingDialogController {  
  private static instance: LoadingDialogController | null = null;  
  private loadingShow: boolean = false;  
  private loadingTips: string = "";  
  private dialogController: CustomDialogController;  
  private constructor(dialogController: CustomDialogController) {  
    this.dialogController = dialogController;  
  }  
  static getInstance(): LoadingDialogController {  
    if (!LoadingDialogController.instance) {  
      throw new Error("Instance not initialized. Call init method first.");  
    }  
    return LoadingDialogController.instance;  
  }  
  static init(dialogController: CustomDialogController): void {  
    LoadingDialogController.instance = new LoadingDialogController(dialogController);  
  }  
  observeLoadingEvent(): void {  
    EventBusUtils.observe<LoadingBean>(LoadingEvent, (data) => {  
      if (data && data.showLoading && !this.loadingShow) {  
        this.loadingShow = true;  
        this.loadingTips = data.loadingTips || "";  
        this.dialogController.open();  
      } else {  
        this.dialogController.close();  
        this.loadingShow = false;  
      }  
    });  
  }  
  destroyLoadingEvent(): void {  
    EventBusUtils.destroy(LoadingEvent);  
  }  
}

HarmonyOS

superinsect

2024-10-15 11:59:23

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

可以参考以下demo：

1、新建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);  
  }  
}

2、新建DialogUtils.ets工具类。

import { promptAction } from '@kit.ArkUI'  
import { GlobalContext } from './GlobalContext'  
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;  
    })  
  }  
}

3、页面入口调用。

import { GlobalContext } from '../uitls/GlobalContext'  
import { testPromptDialog } from '../uitls/DialogUtils'  
@Entry  
@Component  
struct Index {  
  aboutToAppear(): void {  
    GlobalContext.getContext().setObject('UIContext', this)  
  }  
  build() {  
    Row() {  
      Column() {  
        Button("promptAction弹窗")  
          .onClick(() => {  
            testPromptDialog()  
          })  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}

2024-10-15 16:44:49

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 是否有全局loading这种控件？

订阅鸿蒙技术特刊，精选内容抢先看