HarmonyOS 鸿蒙Next 全局Loading弹窗：用子窗口的形式来实现（Api9）

HarmonyOS 鸿蒙Next 全局Loading弹窗：用子窗口的形式来实现（Api9） 因为自定义弹窗在按下返回键或ESC键后会消失，有时候并不能满足实际需求，所以考虑采用创建子窗口的方式来实现，子窗口天生对返回事件免疫。小生能力有限，欢迎各位方家指正。 【注】当前程序对应api9。

1. 创建加载要显示的Page页面（LoadingPage.ets）

@Entry
@Component
struct LoadingPage {
  @StorageProp('loading_message') message: string = '请稍候'

  build() {
    Stack({ alignContent: Alignment.Center }) {
      Column() {
        LoadingProgress()
          .width(30)
          .height(30)
          .color(Color.White)

        Text(this.message ?? '请稍候')
          .fontColor(Color.White)
          .fontSize(16)
          .margin({ top: 15 })
          .width('100%')
          .textAlign(TextAlign.Center)
      }
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor('#88000000')
      .borderRadius(8)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Transparent)
  }
}

2. 创建LoadingUtils类用于创建子窗口(LoadingUtils.ts)

/**
 * 通过创建子窗口来显示Loading弹窗
 */
export class LoadingUtils {
  private static EVENT_CREATE_SUB_WINDOW = 'createSubWindow'
  private static EVENT_CLOSE_SUB_WINDOW = 'closeSubWindow'
  static LOADING_MESSAGE = 'loading_message'

  /**
   * 发送创建loading子窗口的事件，显示loading
   * @param context context
   */
  static showLoading(context: common.UIAbilityContext, message: string = '请稍候') {
    AppStorage.SetOrCreate(LoadingUtils.LOADING_MESSAGE, message)
    context?.eventHub.emit(LoadingUtils.EVENT_CREATE_SUB_WINDOW)
  }

  /**
   * 发送关闭loading子窗口的事件，隐藏loading
   * @param context context
   */
  static hideLoading(context: common.UIAbilityContext) {
    context?.eventHub.emit(LoadingUtils.EVENT_CLOSE_SUB_WINDOW)
  }

  /**
   * 订阅创建和关闭loading子窗口的事件
   * @param ability ability
   * @param stage stage
   */
  static subscribeLoadingEvent(ability: UIAbility, stage: window.WindowStage) {
    if (ability) {
      ability.context.eventHub.on(LoadingUtils.EVENT_CREATE_SUB_WINDOW, () => LoadingUtils.showSubWindow(stage))
      ability.context.eventHub.on(LoadingUtils.EVENT_CLOSE_SUB_WINDOW, () => LoadingUtils.closeSubWindow(stage))
    }
  }

  /**
   * 取消订阅创建和关闭loading子窗口的事件
   * @param ability ability
   */
  static unsubscribeLoadingEvent(ability: UIAbility) {
    if (ability) {
      ability.context.eventHub.off(LoadingUtils.EVENT_CREATE_SUB_WINDOW)
      ability.context.eventHub.off(LoadingUtils.EVENT_CLOSE_SUB_WINDOW)
    }
  }

  /**
   * 显示loading子窗口
   * @param stage stage
   */
  static async showSubWindow(stage: window.WindowStage) {
    stage?.createSubWindow('sub_window').then(async win => {
      // 设置子窗口显示的页面
      await win.setUIContent("pages/LoadingPage")
      let d = display.getDefaultDisplaySync()
      let windowClass = stage.getMainWindowSync()
      let area = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
      // 调整子窗口大小，需剔除状态栏和导航栏高度，否则显示内容不居中
      await win.resize(d.width, d.height - area.topRect.height - area.bottomRect.height)
      // 设置半透明效果
      win.setWindowBackgroundColor('#88000000')
      win.showWindow()
    })
  }

  /**
   * 关闭loading子窗口
   * @param stage stage
   */
  static closeSubWindow(stage: window.WindowStage) {
    stage?.getSubWindow().then(win => {
      if (win.length > 0) {
        win[0].destroyWindow()
      }
    })
  }
}

3. 根据UIAbility生命周期回调，实现子窗口事件订阅与取消(MyAbilityStage.ets)

创建MyAbilityStage

export default class MyAbilityStage extends AbilityStage {
  
  onCreate() {
    this.context.getApplicationContext().on('abilityLifecycle', this.abilityLifecycleCallback)
  }
  
  /**
   * 声明ability生命周期回调，需配置所有回调后才可以在applicationContext注册
   */
  abilityLifecycleCallback: AbilityLifecycleCallback = {
    onAbilityCreate(ability: UIAbility) {},

    onWindowStageCreate(ability: UIAbility, windowStage: window.WindowStage) {
      // 订阅子窗口事件
      LoadingUtils.subscribeLoadingEvent(ability, windowStage)
    },

    onWindowStageActive(ability: UIAbility, windowStage: window.WindowStage) {},

    onWindowStageInactive(ability: UIAbility, windowStage: window.WindowStage) {},

    onWindowStageDestroy(ability: UIAbility, windowStage: window.WindowStage) {
      LoadingUtils.unsubscribeLoadingEvent(ability)
    },

    onAbilityDestroy(ability: UIAbility) {},

    onAbilityForeground(ability: UIAbility) {},

    onAbilityBackground(ability: UIAbility) {},

    onAbilityContinue(ability: UIAbility) {}
  }
}

配置MyAbilityStage

"module": {
    ...
    "srcEntry": './ets/MyAbilityStage.ets',
    ...
}

4. 使用

显示loading：

LoadingUtils.showLoading(getContext(this) as common.UIAbilityContext, '加载中')

隐藏loading：

LoadingUtils.hideLoading(getContext(this) as common.UIAbilityContext)