1. XTHUD

之前已经有两篇文章介绍过我封装的自定义组件库 XTHUD，这次为该组件库带来了一个较大的版本更新，使得 HUD 用法进一步简化，并且该组件库的 V1.1.0 版本已经适配 API12 Beta1。

基于ArkUI封装的通用型 LoadingHUD、ToastHUD、ProgressHUD 组件库
适配 API11 和 API12 beta1
代码测试完成度高，整体 API 简单易用
V1.0.3 后新增 XTEasyHUD 工具类，HUD 无需挂载即可直接使用
HUD 组件基于 CustomDialogController 定制开发，兼容了物理返回事件导致的 Dialog 关闭问题
HUD 支持多种默认样式，样式支持高度自定义
HUD 支持响应式更新自定义样式和 text，且不会重复创建 Dialog 实例
单类型 HUD 为全局唯一 Dialog 实例，避免重复创建导致的内存消耗问题，避免叠加显示和切换显示闪烁问题
ToastHUD 除了支持常规模式，还支持队列弹出模式
LoadingHUD 支持 ArkUI 的 LoadingProgress 样式，支持自定义加载样式，支持 SVG 动效
ProgressHUD 基于 Progress 组件做了逻辑封装
各类 HUD 独立存在，可以同时加载显示，不冲突

组件设计思想：

2. XTEasyHUD

新增 XTEasyHUD 工具类，该工具类可使得 HUD 无需事先挂载即可直接使用，相对比较方便。此次的自定义组件挂载方案，基于前文的探索结果。

typescript 复制代码

import { XTEasyHUD } from '@jxt/xt_hud'

// Toast 全局配置，如无特殊需要，可以不配置，其他 HUD 同理
XTEasyHUD.globalConfigToast((options: XTHUDToastOptions) => {
  options.isQueueMode = false
  options.hidingDelay = 1000
  options.isModal = false
  options.alignment = DialogAlignment.Center
})

// Toast 显示
XTEasyHUD.showToast('success')

// Loading 显示
XTEasyHUD.showLoading('...')
setTimeout(() => {
  XTEasyHUD.hideLoading()
}, 3000)

// Progress 显示
this.progress = 0
this.interval = setInterval(() => {
  this.progress ++
  XTEasyHUD.showProgress(this.progress)
  if (this.progress >= 100) {
    clearInterval(this.interval)
    this.interval = null
  }
}, 100)

3. XTEasyHUD 的优势

3.1. 样式可自定义程度高

所有的 HUD 组件，均支持全局自定义样式，也支持在调用阶段动态更新样式。

ts 复制代码

XTEasyHUD.showLoading('加载中1...')
setTimeout(() => {
  XTEasyHUD.showLoading('加载中22...', {
    fontSize: 20,
    iconSize: { width: 60, height: 60 },
    tintColor: Color.Red,
    textColor: Color.Red
  })
  setTimeout(() => {
    XTEasyHUD.showLoading('加载中333...', {
      fontSize: 24,
      iconSize: { width: 100, height: 100 },
      tintColor: Color.Yellow,
      textColor: Color.Yellow
    })
    setTimeout(() => {
      XTEasyHUD.hideAllLoading()
    }, 1000)
  }, 1000)
}, 1000)

3.2. 各类 HUD 独立存在

可以同时显示 toast 和 loading，虽然这类叠加显示的场景应该尽量避免，但是各类 HUD 组件是独立挂载的，所以显示不冲突。

ts 复制代码

@Component
export struct XTEasyHUDToast {
}


@Component
export struct XTEasyHUDLoading {
}


@Component
export struct XTEasyHUDProgress {
}

3.3. HUD 刷新性能高

HUD 组件内部单类仅存在全局唯一单例，数据刷新只是响应式刷新组件 UI，不会重新创建 HUD 实例，避免渲染性能问题，针对多 loading 的加载场景，内部维护计数器逻辑，可以避免重复显隐的闪烁问题。

ts 复制代码

initXTEasyHUDLoading(globalOptions?: ((options: XTHUDLoadingOptions) => void) | null): void {
  if (!_XTEasyHUDManager._loading) {
    _XTEasyHUDManager._loading = new XTEasyHUDLoading(undefined, {
      globalOptions: globalOptions
    })
    _XTEasyHUDManager._loading.mounted()
  }
}

ts 复制代码

private _showLoading(
  type: XTLoadingType,
  text?: string,
  options?: XTHUDLoadingOptions
): void {
  // ...

  // hud计数器
  this._loadingCount ++
  // 避免重复创建
  if (this._loadingCount > 1) {
    return
  }
  // 打开
  this._dialogController?.open()
}

3.4. 组件不用手动挂载

之前版本的 HUD 需要手动全局挂载，这么做虽然也并不复杂，但不够极致，新版本的 HUD ，省去了组件的挂载操作，核心逻辑就是基于组件本质的探索的实践。

ts 复制代码

// ArkTS 组件挂载方式
Column({ space: 2 }) {
  XTHUDLoading({
    globalOptions: (options: XTHUDLoadingOptions) => {
      options.maskColor = '#33000000'
    }
  })
}

ts 复制代码

// 直接的 TS 组件初始化挂载方式
_XTEasyHUDManager._progress = new XTHUDProgress(undefined, {
  globalOptions: globalOptions
})

HarmonyOS Next——更加简单易用的Toast/Loading/Progress自定义组件XTEasyHUD

1. XTHUD

2. XTEasyHUD

3. XTEasyHUD 的优势

3.1. 样式可自定义程度高

3.2. 各类 HUD 独立存在

3.3. HUD 刷新性能高

3.4. 组件不用手动挂载