当前位置：首页 > news >正文

HarmonyOS NEXT - Toast和Loading使用

news 来源：原创 2024/9/21 3:25:18

demo 地址: https://github.com/iotjin/JhHarmonyDemo
代码不定时更新，请前往github查看最新代码

在demo中这些组件和工具类都通过module实现了，具体可以参考HarmonyOS NEXT - 通过 module 模块化引用公共组件和utils

HarmonyOS NEXT - Toast和Loading使用

效果图
调用方式
JhProgressHud.ets 完整代码

官方有个toast但是比较单一（官方toast promptAction），在三方库上找了一个弹框库，调整样式封装了一层

三方库地址：
@jxt/xt_hud

需要先在项目中导入三方库

ohpm install @jxt/xt_hud

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

效果图

请添加图片描述

调用方式

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

以下是在第一个page的aboutToAppear方法初始化的

  aboutToAppear() {// 初始化Loadinglet uiContext: UIContext = this.getUIContext();JhProgressHUD.initUIConfig(uiContext)}

文字

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

成功

JhProgressHUD.showSuccess('加载成功')

失败

JhProgressHUD.showError('加载失败')

警告

JhProgressHUD.showInfo('注意注意')

加载中 - 系统样式

 JhProgressHUD.showLoadingText()setTimeout(() => {JhProgressHUD.hide()}, 5000)

加载中 - 圆环样式

 JhProgressHUD.showRingLoadingText()setTimeout(() => {JhProgressHUD.hide()}, 5000)

下载中 - 圆环进度条

interval: number | null = null
let progress = 0
this.interval = setInterval(() => {progress++JhProgressHUD.showProgressLoadingText(progress, '下载中...')if (progress >= 100) {clearInterval(this.interval)}
}, 50)

下载中 - 水平进度条

interval: number | null = null
let progress = 0
this.interval = setInterval(() => {progress++JhProgressHUD.showBarProgressLoadingText(progress, '下载中...')if (progress >= 100) {clearInterval(this.interval)}
}, 50)

JhProgressHud.ets 完整代码

///  JhProgressHud.ets
///
///  Created by iotjin on 2024/08/09.
///  description: 加载框(promptAction、三方库封装)import { promptAction, window } from '@kit.ArkUI';
import { XTHUDLoadingOptions, XTHUDProgressOptions, XTHUDReactiveBaseOptions, XTHUDToastOptions, XTPromptHUD } from '@jxt/xt_hud';const _bgColor = '#CC000000'
const _closeTime = 1500
const _radius = 5.0
const _fontSize = 16.0// Toast显示位置
const _alignment: Alignment = Alignment.Center
const _offset: Offset = { dx: 0.0, dy: 0.0 }enum _ToastType {text,success,error,info,loading,
}export class JhProgressHUD {/// 初始化Loading(在 windowStage.loadContent 后执行初始化)public static initConfig(windowStage: window.WindowStage) {const context = windowStage.getMainWindowSync().getUIContext()JhProgressHUD.initXTPromptHUDConfig(context)}/// 初始化Loading(在全局入口 page 处挂载)public static initUIConfig(context: UIContext) {JhProgressHUD.initXTPromptHUDConfig(context)}/// 系统Toastpublic static showToast(loadingText: ResourceStr) {promptAction.showToast({message: loadingText,duration: _closeTime,alignment: _alignment,offset: _offset,})}/// 文字弹框public static showText(loadingText: ResourceStr) {JhProgressHUD._showToast(loadingText, _ToastType.text)}/// 成功弹框public static showSuccess(loadingText: ResourceStr) {JhProgressHUD._showToast(loadingText, _ToastType.success)}/// 失败弹框public static showError(loadingText: ResourceStr) {JhProgressHUD._showToast(loadingText, _ToastType.error)}/// 警告弹框public static showInfo(loadingText: ResourceStr) {JhProgressHUD._showToast(loadingText, _ToastType.info)}/// 加载中 - 系统样式public static showLoadingText(loadingText = '加载中...') {JhProgressHUD._showToast(loadingText, _ToastType.loading)}/// 加载中 - 圆环样式public static showRingLoadingText(loadingText = '加载中...') {JhProgressHUD._showLoading(loadingText)}/// 下载中 - 圆环进度条public static showProgressLoadingText(progress: number, loadingText = '正在下载...') {JhProgressHUD._showProgress(progress, loadingText)}/// 下载中 - 水平进度条public static showBarProgressLoadingText(progress: number, loadingText = '正在下载...') {JhProgressHUD._showBarProgress(progress, loadingText)}public static hide() {XTPromptHUD.hideAllToast()XTPromptHUD.hideAllLoading()XTPromptHUD.hideProgress()XTPromptHUD.hideCustomHUD()}/// 全局参数配置/// API文档 https://gitee.com/kukumalu/xthudprivate static initXTPromptHUDConfig(context: UIContext) {XTPromptHUD.globalConfigToast(context, (options: XTHUDToastOptions) => {options.isQueueMode = true // 同时只显示一个options.isModal = true // 是否为全屏，屏蔽交互options.closeOnPressBack = false // 控制是否点击系统返回键时关闭 HUD，默认 false，开启后触发返回关闭会执行 onCanceloptions.closeOnClickOutside = false // 控制是否点击 HUD 背景时关闭（isModal 为 true 时生效），默认 false，开启后触发点击背景关闭会执行 onCanceloptions.fontSize = _fontSizeoptions.font = {size: _fontSize,// weight: 600}options.borderRadius = _radiusoptions.backgroundColor = _bgColoroptions.hidingDelay = _closeTimeoptions.iconSize = { width: 30, height: 30 }options.textPadding = {top: 16,bottom: 16,left: 24,right: 24,}})XTPromptHUD.globalConfigLoading(context, (options: XTHUDLoadingOptions) => {options.isModal = true // 是否为全屏，屏蔽交互options.closeOnPressBack = false // 控制是否点击系统返回键时关闭 HUD，默认 false，开启后触发返回关闭会执行 onCanceloptions.closeOnClickOutside = false // 控制是否点击 HUD 背景时关闭（isModal 为 true 时生效），默认 false，开启后触发点击背景关闭会执行 onCanceloptions.fontSize = _fontSizeoptions.font = {size: _fontSize,// weight: 600,}options.borderRadius = _radiusoptions.backgroundColor = _bgColoroptions.iconSize = { width: 50, height: 50 }options.iconMargin = {top: 16,bottom: 8,left: 24,right: 24,}options.textPadding = {top: 0,bottom: 16,left: 24,right: 24}})XTPromptHUD.globalConfigProgress(context, (options: XTHUDProgressOptions) => {options.isModal = true // 是否为全屏，屏蔽交互options.closeOnPressBack = false // 控制是否点击系统返回键时关闭 HUD，默认 false，开启后触发返回关闭会执行 onCanceloptions.closeOnClickOutside = false // 控制是否点击 HUD 背景时关闭（isModal 为 true 时生效），默认 false，开启后触发点击背景关闭会执行 onCanceloptions.fontSize = _fontSizeoptions.font = {size: _fontSize,// weight: 600}options.borderRadius = _radiusoptions.backgroundColor = _bgColoroptions.iconSize = { width: 50, height: 50 }options.iconMargin = {top: 24,bottom: 16,left: 36,right: 36,}options.textPadding = {top: 0,bottom: 16,left: 24,right: 24}options.strokeWidth = 5options.progressFontSize = 5options.progressFont = {size: 12,weight: 600}options.progressTextColor = Color.White// options.autoHideWhenProgressCompletion = false})XTPromptHUD.globalConfigCustomHUD(context, (options: XTHUDReactiveBaseOptions) => {options.isModal = true // 是否为全屏，屏蔽交互options.closeOnPressBack = false // 控制是否点击系统返回键时关闭 HUD，默认 false，开启后触发返回关闭会执行 onCanceloptions.closeOnClickOutside = false // 控制是否点击 HUD 背景时关闭（isModal 为 true 时生效），默认 false，开启后触发点击背景关闭会执行 onCanceloptions.maskColor = _bgColor// options.maskColor = '#33000000'})}private static _showToast(loadingText: ResourceStr, toastType: _ToastType) {if (toastType == _ToastType.text) {XTPromptHUD.showToast(loadingText)} else if (toastType == _ToastType.success) {XTPromptHUD.showSuccess(loadingText)} else if (toastType == _ToastType.error) {XTPromptHUD.showError(loadingText)} else if (toastType == _ToastType.info) {XTPromptHUD.showInfo(loadingText)} else if (toastType == _ToastType.loading) {XTPromptHUD.showLoading(loadingText, {iconMargin: loadingText == '' ? {top: 24,bottom: 24,left: 36,right: 36,} : {top: 16,bottom: 8,left: 24,right: 24,}})}}private static _showLoading(loadingText: ResourceStr) {XTPromptHUD.showRingLoading(loadingText, {iconSize: { width: 30, height: 30 },strokeWidth: 3,isModal: true,closeOnPressBack: false,closeOnClickOutside: false,fontSize: _fontSize,font: { size: _fontSize },borderRadius: _radius,backgroundColor: _bgColor,iconMargin: loadingText == '' ? {top: 35,bottom: 35,left: 45,right: 45,} : {top: 16,bottom: 8,left: 24,right: 24,},textPadding: {top: 8,bottom: 16,left: 24,right: 24},})}private static _showProgress(progress: number, loadingText?: ResourceStr) {XTPromptHUD.showProgress(progress, loadingText, {iconMargin: {top: 24,bottom: loadingText == '' ? 24 : 16,left: 36,right: 36,}})}private static _showBarProgress(progress: number, loadingText?: ResourceStr) {XTPromptHUD.showBarProgress(progress, loadingText, {tintColor: Color.White,iconMargin: {top: 24,bottom: loadingText == '' ? 24 : 16,left: 36,right: 36,}})}
}