HarmonyOS NEXT - Toast和Loading利用

demo 地址: https://github.com/iotjin/JhHarmonyDemo
代码不定时更新，请前往github查看最新代码
    在demo中这些组件和工具类都通过module实现了，具体可以参考HarmonyOS NEXT - 通过 module 模块化引用公共组件和utils
  
  
   官方有个toast但是比较单一（官方toast promptAction），在三方库上找了一个弹框库，调解样式封装了一层
  三方库地址：
@jxt/xt_hud
   需要先在项目中导入三方库

1. ohpm install @jxt/xt_hud

复制代码

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包
效果图

调用方式

   需要先全局初始化一次，否则弹框不显示
全局初始化可以放在入口的page处，或者在windowStage.loadContent 后执行初始化
  以下是在第一个page的aboutToAppear方法初始化的

1.   aboutToAppear() {
2.     // 初始化Loading
3.     let uiContext: UIContext = this.getUIContext();
4.     JhProgressHUD.initUIConfig(uiContext)
5.   }

复制代码

• 笔墨
  

1. JhProgressHUD.showText('这是一条提示文字')

复制代码

• 成功
  

1. JhProgressHUD.showSuccess('加载成功')

复制代码

• 失败
  

1. JhProgressHUD.showError('加载失败')

复制代码

• 告诫
  

1. JhProgressHUD.showInfo('注意注意')

复制代码

• 加载中 - 系统样式
  

1. JhProgressHUD.showLoadingText()
2. setTimeout(() => {
3.    JhProgressHUD.hide()
4. }, 5000)

复制代码

• 加载中 - 圆环样式
  

1. JhProgressHUD.showRingLoadingText()
2. setTimeout(() => {
3.    JhProgressHUD.hide()
4. }, 5000)

复制代码

• 下载中 - 圆环进度条
  

1. interval: number | null = null
2. let progress = 0
3. this.interval = setInterval(() => {
4.   progress++
5.   JhProgressHUD.showProgressLoadingText(progress, '下载中...')
6.   if (progress >= 100) {
7.     clearInterval(this.interval)
8.   }
9. }, 50)

复制代码

• 下载中 - 水平进度条
  

1. interval: number | null = null
2. let progress = 0
3. this.interval = setInterval(() => {
4.   progress++
5.   JhProgressHUD.showBarProgressLoadingText(progress, '下载中...')
6.   if (progress >= 100) {
7.     clearInterval(this.interval)
8.   }
9. }, 50)

复制代码

JhProgressHud.ets 完备代码

1. ///  JhProgressHud.ets
2. ///
3. ///  Created by iotjin on 2024/08/09.
4. ///  description: 加载框(promptAction、三方库封装)
6. import { promptAction, window } from '@kit.ArkUI';
7. import { XTHUDLoadingOptions, XTHUDProgressOptions, XTHUDReactiveBaseOptions, XTHUDToastOptions, XTPromptHUD } from '@jxt/xt_hud';
9. const _bgColor = '#CC000000'
10. const _closeTime = 1500
11. const _radius = 5.0
12. const _fontSize = 16.0
14. // Toast显示位置
15. const _alignment: Alignment = Alignment.Center
16. const _offset: Offset = { dx: 0.0, dy: 0.0 }
18. enum _ToastType {
19.   text,
20.   success,
21.   error,
22.   info,
23.   loading,
24. }
26. export class JhProgressHUD {
27.   /// 初始化Loading(在 windowStage.loadContent 后执行初始化)
28.   public static initConfig(windowStage: window.WindowStage) {
29.     const context = windowStage.getMainWindowSync().getUIContext()
30.     JhProgressHUD.initXTPromptHUDConfig(context)
31.   }
33.   /// 初始化Loading(在全局入口 page 处挂载)
34.   public static initUIConfig(context: UIContext) {
35.     JhProgressHUD.initXTPromptHUDConfig(context)
36.   }
38.   /// 系统Toast
39.   public static showToast(loadingText: ResourceStr) {
40.     promptAction.showToast({
41.       message: loadingText,
42.       duration: _closeTime,
43.       alignment: _alignment,
44.       offset: _offset,
45.     })
46.   }
48.   /// 文字弹框
49.   public static showText(loadingText: ResourceStr) {
50.     JhProgressHUD._showToast(loadingText, _ToastType.text)
51.   }
53.   /// 成功弹框
54.   public static showSuccess(loadingText: ResourceStr) {
55.     JhProgressHUD._showToast(loadingText, _ToastType.success)
56.   }
58.   /// 失败弹框
59.   public static showError(loadingText: ResourceStr) {
60.     JhProgressHUD._showToast(loadingText, _ToastType.error)
61.   }
63.   /// 警告弹框
64.   public static showInfo(loadingText: ResourceStr) {
65.     JhProgressHUD._showToast(loadingText, _ToastType.info)
66.   }
68.   /// 加载中 - 系统样式
69.   public static showLoadingText(loadingText = '加载中...') {
70.     JhProgressHUD._showToast(loadingText, _ToastType.loading)
71.   }
73.   /// 加载中 - 圆环样式
74.   public static showRingLoadingText(loadingText = '加载中...') {
75.     JhProgressHUD._showLoading(loadingText)
76.   }
78.   /// 下载中 - 圆环进度条
79.   public static showProgressLoadingText(progress: number, loadingText = '正在下载...') {
80.     JhProgressHUD._showProgress(progress, loadingText)
81.   }
83.   /// 下载中 - 水平进度条
84.   public static showBarProgressLoadingText(progress: number, loadingText = '正在下载...') {
85.     JhProgressHUD._showBarProgress(progress, loadingText)
86.   }
88.   public static hide() {
89.     XTPromptHUD.hideAllToast()
90.     XTPromptHUD.hideAllLoading()
91.     XTPromptHUD.hideProgress()
92.     XTPromptHUD.hideCustomHUD()
93.   }
95.   /// 全局参数配置
96.   /// API文档 https://gitee.com/kukumalu/xthud
97.   private static initXTPromptHUDConfig(context: UIContext) {
98.     XTPromptHUD.globalConfigToast(context, (options: XTHUDToastOptions) => {
99.       options.isQueueMode = true // 同时只显示一个
100.       options.isModal = true // 是否为全屏，屏蔽交互
101.       options.closeOnPressBack = false // 控制是否点击系统返回键时关闭 HUD，默认 false，开启后触发返回关闭会执行 onCancel
102.       options.closeOnClickOutside = false // 控制是否点击 HUD 背景时关闭（isModal 为 true 时生效），默认 false，开启后触发点击背景关闭会执行 onCancel
103.       options.fontSize = _fontSize
104.       options.font = {
105.         size: _fontSize,
106.         // weight: 600
107.       }
108.       options.borderRadius = _radius
109.       options.backgroundColor = _bgColor
110.       options.hidingDelay = _closeTime
111.       options.iconSize = { width: 30, height: 30 }
112.       options.textPadding = {
113.         top: 16,
114.         bottom: 16,
115.         left: 24,
116.         right: 24,
117.       }
118.     })
119.     XTPromptHUD.globalConfigLoading(context, (options: XTHUDLoadingOptions) => {
120.       options.isModal = true // 是否为全屏，屏蔽交互
121.       options.closeOnPressBack = false // 控制是否点击系统返回键时关闭 HUD，默认 false，开启后触发返回关闭会执行 onCancel
122.       options.closeOnClickOutside = false // 控制是否点击 HUD 背景时关闭（isModal 为 true 时生效），默认 false，开启后触发点击背景关闭会执行 onCancel
123.       options.fontSize = _fontSize
124.       options.font = {
125.         size: _fontSize,
126.         // weight: 600,
127.       }
128.       options.borderRadius = _radius
129.       options.backgroundColor = _bgColor
130.       options.iconSize = { width: 50, height: 50 }
131.       options.iconMargin = {
132.         top: 16,
133.         bottom: 8,
134.         left: 24,
135.         right: 24,
136.       }
137.       options.textPadding = {
138.         top: 0,
139.         bottom: 16,
140.         left: 24,
141.         right: 24
142.       }
143.     })
144.     XTPromptHUD.globalConfigProgress(context, (options: XTHUDProgressOptions) => {
145.       options.isModal = true // 是否为全屏，屏蔽交互
146.       options.closeOnPressBack = false // 控制是否点击系统返回键时关闭 HUD，默认 false，开启后触发返回关闭会执行 onCancel
147.       options.closeOnClickOutside = false // 控制是否点击 HUD 背景时关闭（isModal 为 true 时生效），默认 false，开启后触发点击背景关闭会执行 onCancel
148.       options.fontSize = _fontSize
149.       options.font = {
150.         size: _fontSize,
151.         // weight: 600
152.       }
153.       options.borderRadius = _radius
154.       options.backgroundColor = _bgColor
155.       options.iconSize = { width: 50, height: 50 }
156.       options.iconMargin = {
157.         top: 24,
158.         bottom: 16,
159.         left: 36,
160.         right: 36,
161.       }
162.       options.textPadding = {
163.         top: 0,
164.         bottom: 16,
165.         left: 24,
166.         right: 24
167.       }
169.       options.strokeWidth = 5
170.       options.progressFontSize = 5
171.       options.progressFont = {
172.         size: 12,
173.         weight: 600
174.       }
175.       options.progressTextColor = Color.White
176.       // options.autoHideWhenProgressCompletion = false
177.     })
179.     XTPromptHUD.globalConfigCustomHUD(context, (options: XTHUDReactiveBaseOptions) => {
180.       options.isModal = true // 是否为全屏，屏蔽交互
181.       options.closeOnPressBack = false // 控制是否点击系统返回键时关闭 HUD，默认 false，开启后触发返回关闭会执行 onCancel
182.       options.closeOnClickOutside = false // 控制是否点击 HUD 背景时关闭（isModal 为 true 时生效），默认 false，开启后触发点击背景关闭会执行 onCancel
183.       options.maskColor = _bgColor
184.       // options.maskColor = '#33000000'
185.     })
186.   }
188.   private static _showToast(loadingText: ResourceStr, toastType: _ToastType) {
189.     if (toastType == _ToastType.text) {
190.       XTPromptHUD.showToast(loadingText)
191.     } else if (toastType == _ToastType.success) {
192.       XTPromptHUD.showSuccess(loadingText)
193.     } else if (toastType == _ToastType.error) {
194.       XTPromptHUD.showError(loadingText)
195.     } else if (toastType == _ToastType.info) {
196.       XTPromptHUD.showInfo(loadingText)
197.     } else if (toastType == _ToastType.loading) {
198.       XTPromptHUD.showLoading(loadingText, {
199.         iconMargin: loadingText == '' ? {
200.           top: 24,
201.           bottom: 24,
202.           left: 36,
203.           right: 36,
204.         } : {
205.           top: 16,
206.           bottom: 8,
207.           left: 24,
208.           right: 24,
209.         }
210.       })
211.     }
212.   }
214.   private static _showLoading(loadingText: ResourceStr) {
215.     XTPromptHUD.showRingLoading(loadingText, {
216.       iconSize: { width: 30, height: 30 },
217.       strokeWidth: 3,
219.       isModal: true,
220.       closeOnPressBack: false,
221.       closeOnClickOutside: false,
222.       fontSize: _fontSize,
223.       font: { size: _fontSize },
224.       borderRadius: _radius,
225.       backgroundColor: _bgColor,
226.       iconMargin: loadingText == '' ? {
227.         top: 35,
228.         bottom: 35,
229.         left: 45,
230.         right: 45,
231.       } : {
232.         top: 16,
233.         bottom: 8,
234.         left: 24,
235.         right: 24,
236.       },
237.       textPadding: {
238.         top: 8,
239.         bottom: 16,
240.         left: 24,
241.         right: 24
242.       },
243.     })
244.   }
246.   private static _showProgress(progress: number, loadingText?: ResourceStr) {
247.     XTPromptHUD.showProgress(progress, loadingText, {
248.       iconMargin: {
249.         top: 24,
250.         bottom: loadingText == '' ? 24 : 16,
251.         left: 36,
252.         right: 36,
253.       }
254.     })
255.   }
257.   private static _showBarProgress(progress: number, loadingText?: ResourceStr) {
258.     XTPromptHUD.showBarProgress(progress, loadingText, {
259.       tintColor: Color.White,
260.       iconMargin: {
261.         top: 24,
262.         bottom: loadingText == '' ? 24 : 16,
263.         left: 36,
264.         right: 36,
265.       }
266.     })
267.   }
268. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。