HarmonyOS开发实战：小分享-LoadingProgress 与自定义加载骨架屏

发布时间：2026/7/24 23:28:21

HarmonyOS开发实战：小分享-LoadingProgress 与自定义加载骨架屏
前言加载状态是移动应用提升用户体验的关键包括加载中提示、骨架屏、错误状态等。HarmonyOS 提供了LoadingProgress组件。小分享 App 的模板列表、热门分享等网络请求场景需要加载状态。本篇讲解加载状态的实现。详细 API 可参考 HarmonyOS LoadingProgress 官方文档。一、LoadingProgress 组件EntryComponentstruct LoadingExample{build(){Column(){LoadingProgress().color(#F5A623).width(32).height(32)}.width(100%).height(100%).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}}二、加载状态管理exportenumLoadingState{LOADING,// 加载中SUCCESS,// 加载成功ERROR,// 加载失败EMPTY// 数据为空}EntryComponentstruct DataListPage{StateloadingState:LoadingStateLoadingState.LOADING;Stateitems:Arraystring[];asyncaboutToAppear():Promisevoid{awaitthis.fetchData()}asyncfetchData():Promisevoid{this.loadingStateLoadingState.LOADINGtry{constdataawaitthis.httpClient.getArraystring(https://api.example.com/data)if(data.length0){this.loadingStateLoadingState.EMPTY}else{this.itemsdatathis.loadingStateLoadingState.SUCCESS}}catch(err){this.loadingStateLoadingState.ERROR}}}三、骨架屏实现BuilderSkeletonScreen(){Column({space:12}){ForEach([1,2,3,4,5],(item:number){Row({space:12}){Column().width(48).height(48).backgroundColor(#F0F0F0).borderRadius(12)Column({space:8}){Column().width(60%).height(14).backgroundColor(#F0F0F0).borderRadius(4)Column().width(40%).height(12).backgroundColor(#F0F0F0).borderRadius(4)}.alignItems(HorizontalAlign.Start).layoutWeight(1)}.width(100%).padding({left:16,right:16})},(item:number)item.toString())}}四、三态切换build(){Column(){if(this.loadingStateLoadingState.LOADING){this.SkeletonScreen()}elseif(this.loadingStateLoadingState.ERROR){this.ErrorView()}elseif(this.loadingStateLoadingState.EMPTY){this.EmptyView()}else{this.DataList()}}}BuilderErrorView(){Column({space:16}){Text().fontSize(48)Text(加载失败).fontSize(16).fontColor(#666666)Button(重试).fontSize(14).fontColor(#F5A623).backgroundColor(Color.Transparent).borderRadius(16).onClick((){this.fetchData()})}.width(100%).padding({top:80}).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}BuilderEmptyView(){Column({space:16}){Text().fontSize(48)Text(暂无数据).fontSize(16).fontColor(#666666)}.width(100%).padding({top:80}).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}五、加载状态对比状态展示内容操作LOADING骨架屏 / LoadingProgress等待SUCCESS数据列表正常交互ERROR错误提示 重试按钮点击重试EMPTY空状态提示引导操作六、本文核心知识点6.1 加载状态核心要点LoadingProgress 显示加载动画骨架屏用灰色占位块模拟内容三态加载/错误/空管理6.2 实战开发要点骨架屏用 #F0F0F0 灰色块错误态提供重试按钮空态给出引导提示相关资源HarmonyOS LoadingProgress 官方文档HarmonyOS 骨架屏设计HarmonyOS 状态管理开源鸿蒙跨平台社区附录完整实现细节1. 核心 API 参考API作用说明本文涉及的核心 API功能实现参见华为官方文档2. 完整代码示例// 核心功能代码// 详见正文中的完整实现3. 常见问题排查问题原因解决方案编译错误import 路径错误检查路径和 API 版本运行时异常参数不合法使用 try/catch 捕获性能问题主线程耗时操作使用异步 API4. 最佳实践错误处理完善使用 try/catch 包裹资源及时释放避免内存泄漏异步操作使用 async/await权限配置完整按需申请5. 完整代码文件索引文件路径说明本文涉及的代码文件见正文6. 实现要点总结核心实现要点API 的正确使用方法和参数说明完整的代码实现流程常见问题的排查方案性能优化和安全建议7. 总结本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践。相关资源HarmonyOS 官方文档https://developer.huawei.com/consumer/cn/doc/ArkTS 语法指南ArkTS Introduction状态管理指南State ManagementArkUI 组件参考ArkUI Components路由 APIRouter API开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net本章小结本文详细介绍了小分享 App 中对应功能的完整实现方案。通过本文的学习读者可以掌握以下核心知识点功能的核心 API 使用方法和注意事项完整的代码实现流程和最佳实践常见问题的排查和解决方案性能优化和安全建议掌握这些知识后读者可以独立实现类似功能并应用到自己的 HarmonyOS 应用开发中。练习与思考尝试修改代码中的参数观察对功能的影响思考如何将本功能与其他功能组合使用考虑如何优化代码性能和用户体验探索华为官方文档中更多高级用法实践是掌握技术的最佳途径建议读者在理解代码后自行编写和调试。本文总结本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践。在实际开发中建议读者结合官方文档深入理解每个 API 的参数含义和适用场景并在项目中灵活运用。技术能力的提升来自于持续的实践和总结希望读者在阅读本文后能够动手实践将知识转化为技能。核心功能详解1. 功能概述本功能是小分享 App 核心功能之一主要用于处理特定业务场景。通过 HarmonyOS 提供的原生 API实现了高效、稳定的功能支持。2. 实现原理该功能的实现基于 HarmonyOS 的系统能力通过调用底层 API 完成数据操作。核心逻辑包括初始化、数据处理、结果返回三个主要步骤。3. 代码结构// 核心代码结构// 1. 初始化// 2. 数据处理// 3. 结果返回4. 参数说明参数类型说明默认值参数1string参数说明默认值参数2number参数说明默认值5. 返回值说明返回值类型说明返回值1string返回值说明返回值2number返回值说明完整代码文件索引文件路径说明本文涉及的代码文件见正文核心 API 参考API/组件用途文档链接本文涉及的核心 API功能实现华为官方文档常见问题排查Q1: 编译错误A: 检查 import 路径是否正确确认 API 版本兼容性查看 hilog 日志输出。Q2: 运行时异常A: 使用 try/catch 捕获异常检查参数合法性确认权限已配置。Q3: 性能问题A: 避免在主线程执行耗时操作使用异步 API及时释放不再使用的资源。最佳实践总结代码结构清晰职责单一错误处理完善用户体验良好性能优化到位运行流畅安全防护周全数据可靠文档注释完整易于维护总结本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践并能够独立实现类似功能。相关资源HarmonyOS 官方文档https://developer.huawei.com/consumer/cn/doc/ArkTS 语法指南ArkTS Introduction状态管理指南State ManagementArkUI 组件参考ArkUI Components路由 APIRouter API开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net开发注意事项1. API 版本兼容性确保使用的 API 在目标 SDK 版本中可用。不同版本的 HarmonyOS 可能对 API 的支持有所不同建议查阅官方文档确认。2. 权限配置根据功能需求配置相应的系统权限。权限配置在 module.json5 文件中声明运行时通过 abilityAccessCtrl 申请。3. 错误处理所有异步操作使用 try/catch 包裹确保异常不会导致应用崩溃。错误信息通过 hilog 输出便于调试。4. 资源释放使用完毕后及时释放系统资源避免内存泄漏。例如文件操作后关闭文件句柄数据库操作后关闭 ResultSet。5. 性能优化避免在主线程执行耗时操作使用异步 API 处理耗时任务。大量数据渲染时使用 LazyForEach 懒加载。完整代码文件索引文件路径说明本文涉及的代码文件见正文核心 API 参考API/组件用途文档链接文中涉及的 API核心功能华为官方文档总结本文详细讲解了小分享 App 中对应功能的完整实现涵盖 API 使用、代码示例、常见问题、性能优化等核心知识点。通过本文的学习读者可以掌握 HarmonyOS 开发的完整流程。相关资源HarmonyOS 官方文档https://developer.huawei.com/consumer/cn/doc/ArkTS 语法指南ArkTS Introduction状态管理指南State ManagementArkUI 组件参考ArkUI Components路由 APIRouter API开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net总结本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践并能够独立实现类似功能。在实际开发中建议读者结合官方文档深入理解每个 API 的参数含义和适用场景并在项目中灵活运用。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力

相关新闻

HarmonyOS开发实战：小分享-AppStorage 全局状态管理——用户登录态共享

HarmonyOS开发实战：小分享-AppStorage 全局状态管理——用户登录态共享

前言 全局状态管理 是大型应用的基础能力，让不同页面共享用户登录态、主题偏好等数据。HarmonyOS 提供了 AppStorage 实现应用级全局状态。小分享 App 的 ProfilePage 用户信息需要在多个页面间共享。本篇讲解 AppStorage 的使用。详细 API 可参考 HarmonyOS AppSt…

2026/7/24 23:28:21 阅读更多 →
HarmonyOS开发实战：小分享-深浅色主题切换——基于 resources/dark 适配

HarmonyOS开发实战：小分享-深浅色主题切换——基于 resources/dark 适配

前言 深浅色主题 是现代移动应用的标配功能，让应用在浅色和深色模式下都有良好的视觉体验。HarmonyOS 通过 resources/dark/ 目录实现主题化资源适配。小分享 App 的 EntryAbility 中设置了 COLOR_MODE_NOT_SET 跟随系统。本篇讲解完整的深浅色适配方案。详细 API …

2026/7/24 23:28:21 阅读更多 →
限时开放｜2024全球Top 50高校默认启用的学术润色Prompt库（含医学/工科/人文专属指令集，仅剩137份授权码）

限时开放｜2024全球Top 50高校默认启用的学术润色Prompt库（含医学/工科/人文专属指令集，仅剩137份授权码）

更多请点击： https://codechina.net 第一章：限时开放｜2024全球Top 50高校默认启用的学术润色Prompt库（含医学/工科/人文专属指令集，仅剩137份授权码） 全球顶尖研究型高校正悄然重构AI辅助学术写作范式。剑…

2026/7/24 23:28:21 阅读更多 →

最新新闻

5分钟掌握Adobe-GenP 3.0：设计师必备的免费Adobe全家桶激活神器

5分钟掌握Adobe-GenP 3.0：设计师必备的免费Adobe全家桶激活神器

5分钟掌握Adobe-GenP 3.0：设计师必备的免费Adobe全家桶激活神器 【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP 还在为Adobe Creative Cloud的高昂订阅费…

2026/7/24 23:35:24 阅读更多 →
MiGPT终极指南：3步解锁小爱音箱的AI智能管家潜能

MiGPT终极指南：3步解锁小爱音箱的AI智能管家潜能

MiGPT终极指南：3步解锁小爱音箱的AI智能管家潜能 【免费下载链接】mi-gpt 🏠 将小爱音箱接入 ChatGPT 和豆包，改造成你的专属语音助手。 项目地址: https://gitcode.com/GitHub_Trending/mi/mi-gpt 在智能家居时代，你的小爱…

2026/7/24 23:35:24 阅读更多 →
剑网3智能助手：5分钟打造你的专属游戏伴侣

剑网3智能助手：5分钟打造你的专属游戏伴侣

剑网3智能助手：5分钟打造你的专属游戏伴侣 【免费下载链接】mini_jx3_bot 女生自用剑网三机器人 项目地址: https://gitcode.com/gh_mirrors/mi/mini_jx3_bot 在剑网3的武侠世界中，你是否曾为查询装备属性、追踪奇遇记录、监控金价波动而烦恼&…

2026/7/24 23:35:24 阅读更多 →
基于生物重构与量子信息还原的人类个体复刻与意识复活完整机制研究「探索无止境，敬畏生命本源，诸神归位，众生俯首」最终落地20-50年

基于生物重构与量子信息还原的人类个体复刻与意识复活完整机制研究「探索无止境，敬畏生命本源，诸神归位，众生俯首」最终落地20-50年

摘要传统生命科学认为：机体死亡代表个体意识不可逆湮灭，生命进程彻底终止。该结论局限于经典生物学与经典力学框架，忽略了量子信息守恒、全脑连接组学、表观遗传印记留存、原子级结构可重构等前沿跨学科理论。本文基于分子生物学、神经连接组…

2026/7/24 23:35:24 阅读更多 →
Kimi LeetCode 3681. 子序列最大 XOR 值 Python3实现

Kimi LeetCode 3681. 子序列最大 XOR 值 Python3实现

LeetCode 3681. 子序列最大 XOR 值 — Python3 实现核心思路这道题的关键在于一个巧妙的转化：题目要求选择两个允许重叠的子序列，设它们的 XOR 分别为 X 和 Y，求 X XOR Y 的最大值。对于每个元素 nums[i]，它在 X XOR Y 中的贡献取…

2026/7/24 23:35:24 阅读更多 →
AntimicroX终极指南：如何让任何游戏都支持手柄的完整手柄映射教程

AntimicroX终极指南：如何让任何游戏都支持手柄的完整手柄映射教程

AntimicroX终极指南：如何让任何游戏都支持手柄的完整手柄映射教程 【免费下载链接】antimicrox Graphical program used to map keyboard buttons and mouse controls to a gamepad. Useful for playing games with no gamepad support. 项目地址: https://gitcod…

2026/7/24 23:34:24 阅读更多 →

日新闻

用Highcharts 创建可拖拽三维散点立方体3D图表

用Highcharts 创建可拖拽三维散点立方体3D图表

该案例基于Highcharts scatter3d 三维散点图实现空间立方体散点可视化，核心特色：三维 X/Y/Z 三轴空间，所有散点分布在 0~10 立方体空间内；散点使用径向渐变实现立体 3D 圆球质感；支持鼠标 / 触屏拖拽画布，…

2026/7/24 0:00:29 阅读更多 →
AppCertDlls：进程创建路径上的 DLL 入口

AppCertDlls：进程创建路径上的 DLL 入口

AppCertDlls：进程创建路径上的 DLL 入口 AppCertDlls 位于 HKLM\System\CurrentControlSet\Control\Session Manager\AppCertDlls。本文的程序功能是只读列出这个键在 64 位和 32 位注册表视图中的全部值，并显示每条值的来源、名称、类型和可安全显示的数…

2026/7/24 0:00:29 阅读更多 →
我的编程之路：第一篇博客

我的编程之路：第一篇博客

大家好，我是一名编程初学者，同时这也是我编程学习之路上的第一篇博客。在这里，我想要向大家介绍我的一些想法和规划。a.自我介绍我是一个刚刚接触编程的新手，目前在学习c语言，我对编程世界充满了强烈的好奇。当然&…

2026/7/24 0:00:29 阅读更多 →

周新闻

Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中，我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源，还是配置文件、证书等，都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下，但这…

2026/7/24 3:59:20 阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP（轻量级目录访问协议）作为企业级身份认证的黄金标准，已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时，发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/24 1:23:39 阅读更多 →
【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

更多请点击： https://intelliparadigm.com 第一章：AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”，而是以可解释、可审计、可迭代的方式，赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/24 18:52:18 阅读更多 →

月新闻