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

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 独立存在,可以同时加载显示,不冲突

组件设计思想:

  1. 好用的Toast/Loading/Progress自定义组件XTHUD
  2. 鸿蒙ArkUI自定义组件的构造原理探索------如何封装一个好用的Toast/Loading/ProgressHUD组件

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
})
相关推荐
智慧化智能化数字化方案3 小时前
华为IPD流程管理体系L1至L5最佳实践-解读
大数据·华为
ZZZCY20034 小时前
华为VER系统及CLI命令熟悉
华为
SameX4 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX4 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index12 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室16 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu718 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
期待未来的男孩18 小时前
华为FusionCube 500-8.2.0SPC100 实施部署文档
华为
岳不谢20 小时前
VPN技术-VPN简介学习笔记
网络·笔记·学习·华为
zhangjr057520 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts