鸿蒙5.0开发【自定义全局组件 UI 构建异常问题和解决】

在之前的文章中（[鸿蒙自定义 Dialog 的 6 种方式]），提到了自定义 Dialog 某些情况下无法渲染显示的问题，其本质是 UI 组件构造时，UI 上下文获取异常，一般在异步回调或者非 UI 组件环境中构造全局类的组件（例如弹窗或者 HUD）时，容易遇到这个问题。

1. 问题复现

使用我的 [XTEasyHUD]，不预先在 UI 组件生命周期中对其进行初始化配置，直接在异步场景中调用，就会导致 HUD 无法显示。

ts
 代码解读
复制代码
import axios, { AxiosResponse } from '@ohos/axios'
import {
  XTEasyHUD
} from '@jxt/xt_hud'

class viewModel {
  async asyncShowToast() {
    let response: AxiosResponse<string> = await axios.get('https://www.baidu.com')
    console.log('end', response.data)
    // 这个 toast 无法显示
    XTEasyHUD.showToast('请求完成')
  }
}

@Entry
@Component
struct Index {
  vm: viewModel = new viewModel()
  build() {
    Column() {
      Button('异步显示 Toast')
        .onClick(() => {
          this.vm.asyncShowToast()
        })
    }
    .height('100%')
    .width('100%')
  }
}

我在该组件库的文档中，有做该问题的特别说明和解决方案描述：[已知问题特别注意]

解决方案：

import axios, { AxiosResponse } from '@ohos/axios'
import {
  XTEasyHUD
} from '@jxt/xt_hud'

class viewModel {
  async asyncShowToast() {
    let response: AxiosResponse<string> = await axios.get('https://www.baidu.com')
    console.log('end', response.data)
    XTEasyHUD.showToast('请求完成')
  }
}

@Entry
@Component
struct Index {
  vm: viewModel = new viewModel()

  // Warning: 强烈建议在全局根页面组件中事先做一次XTEasyHUD的全局配置，如果使用默认样式，可以直接进行空配置
  // 这样可以保证后续使用时，异步场景中的 HUD 可以正常加载