【HarmonyOS NEXT】在 HarmonyOS NEXT 中实现优雅的加载动画

【HarmonyOS NEXT】在 HarmonyOS NEXT 中实现优雅的加载动画

在移动应用开发中,加载动画是提升用户体验的重要工具。在应用程序处理数据或加载页面时,为用户提供视觉反馈尤为关键。在这篇博客中,我们将探讨如何在 HarmonyOS NEXT 中使用 Stack 布局结合 LoadingProgress 组件来实现流畅的加载动画。
在这里插入图片描述

为什么使用加载动画?

加载动画在应用体验中扮演着重要角色,通过动态提示用户进度状态,可以有效提升应用的响应性感知。特别是在网络环境不稳定或数据繁重的场景下,加载动画不仅能缓解等待时的焦虑,还能美化用户界面,增加应用的整体吸引力。

HarmonyOS NEXT 技术栈

在 HarmonyOS NEXT 中,开发者可利用 Stack 布局和 LoadingProgress 组件轻松实现重叠效果,进而实现加载动画的需求。

具体实现

以下是如何实现加载动画的详细步骤。

定义加载状态

首先,我们需要定义一个状态变量以追踪加载状态。在页面未加载完成之前,我们需要显示加载动画,而一旦加载完成,我们便隐藏这个动画。

@State loaded: boolean = false;

这里的 loaded 变量初始值为 false,表示页面尚未加载完成。

利用 Stack 布局

Stack 是一个常用的布局工具,它允许组件的重叠显示。在实现过程中,我们利用 Stack 布局将 Web 组件与 LoadingProgress 组件放置在一起,并根据加载状态切换显示状态。

build() {
  Stack() {
    // Web组件用于展示网页内容
    Web({ 
      src: $rawfile("homePage/index.html"), 
      controller: this.controller.getWebViewController() 
    })
      .javaScriptAccess(true)
      .javaScriptProxy(this.controller.getJavaScriptProxy())
      .onAlert((event) => {
        return false;
      })
      .domStorageAccess(true)
      .zoomAccess(true)
      .fileAccess(true)
      .mixedMode(MixedMode.All)
      .height('100%')
      .width('100%')
      .onPageEnd((event) => {
        if (event) {
          this.loaded = true; // 页面加载完成
        }
      });

    // 显示加载动画
    if (!this.loaded) {
      LoadingProgress()
        .height(180)
        .color('#cd0401'); // 红色的加载指示器
    }
  }
}

在这里插入图片描述

关键逻辑详解
  1. Web 组件:负责加载网页内容。我们通过 onPageEnd 事件监听页面加载状态,一旦加载完毕,将 loaded 设为 true

  2. LoadingProgress 组件:在 loadedfalse 时显示。当页面结束加载,状态变为 true 后,LoadingProgress 就会消失不再渲染。

  3. Stack 布局:这个布局允许我们将 WebLoadingProgress 组件堆叠。由于 LoadingProgress 在上方,当 loadedfalse 时,它会覆盖在 Web 组件之上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/908591.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024年10月30日(双指针算法)

一.和为s的两个数字: 1.题目描述: 这个题目就是找出两个数,这两个数的和是目标值,找到其中一对就可以返回了。 2.算法原理: 方法一: 暴力枚举的策略: 就是两层for循环,固定一个数&…

PyQt5实战——UTF-8编码器UI页面设计以及按钮连接(五)

个人博客:苏三有春的博客 系类往期文章: PyQt5实战——多脚本集合包,前言与环境配置(一) PyQt5实战——多脚本集合包,UI以及工程布局(二) PyQt5实战——多脚本集合包,程序…

【网络面试篇】HTTP(2)(笔记)——http、https、http1.1、http2.0

目录 一、相关面试题 1. HTTP 与 HTTPS 有哪些区别? 2. HTTPS 的工作原理?(https 是怎么建立连接的) (1)ClientHello (2)SeverHello (3)客户端回应 &a…

【VScode】中文版ChatGPT编程工具-CodeMoss!教程+示例+快捷键

文章目录 1. 多模型选择2. 编辑快捷键3. 历史记录收藏 CodeMoss使用教程1. 安装CodeMoss插件2. 配置AI模型3. 使用快捷键4. 进行代码优化与解释5. 收藏历史记录 总结与展望 在当今快速发展的编程世界中,开发者们面临着越来越多的挑战。如何提高编程效率,…

JqGird 动态生成列使用

使用场景: 在工作用需要自定义动态生成列,通过选择下拉框,加载列,通过查询加载列对应的数据信息 当选择文件源任务显示三列 当选择数据源任务显示两列 处理方式: 1. 首先在刚进入界面时初始化控件 $("#pageGri…

STM32Fxx读写eeprom(AT24C16)

一.I2C 协议简介 I2C 通讯协议 (Inter - Integrated Circuit) 是由 Phiilps 公司开发的,由于它引脚少,硬件实现简单,可扩展性强,不需要 USART、CAN 等通讯协议的外部收发设备,现在被广泛地使用在系统内多个…

鸿蒙系统的优势 开发 环境搭建 开发小示例

HarmonyOS是面向多智能终端、全场景的分布式操作系统,为消费者提供跨终端的无缝体验.华为开发者联盟从HarmonyOS应用设计、开发、测试、推广变现等环节全方位助力开发者。 开发者可以通过以下步骤学习鸿蒙系统的开发: 基础理论学习: 了解鸿蒙系统概述&a…

「C/C++」C/C++的区别

✨博客主页何曾参静谧的博客📌文章专栏「C/C」C/C程序设计📚全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

Windows部署rabbitmq

本次安装环境: 系统:Windows 11 软件建议版本: erlang OPT 26.0.2rabbitmq 3.12.4 一、下载 1.1 下载erlang 官网下载地址: 1.2 下载rabbitmq 官网下载地址: 建议使用解压版,安装版可能会在安装软件…

el-table 滚动条重置 手动控制滚动条

最近在使用 el-table 的时候,出现一个问题: 表头过长的时候,会有左右滑动的操作,当我们把表格拉到最右侧,这个时候重新请求数据的话,表格位置还是在最右侧,不会恢复原位。 那我们想恢复原位&a…

推荐FileLink数据跨网摆渡系统 — 安全、高效的数据传输解决方案

在数字化转型的浪潮中,企业对于数据传输的需求日益增加,特别是在不同网络环境之间的文件共享和传输。为了满足这一需求,FileLink数据跨网摆渡系统应运而生,为企业提供了一种安全、高效的数据传输解决方案。 安全第一,保…

STl学习-迭代器

1.迭代器种类 这五种迭代器的声明如下: truct output_iterator_tag {};//输出迭代器 truct input_iterator_tag{ };//输入迭代器 truct forward iterator tag : public input iterator tag {};//向前迭代器 truct bidirectional iterator tag :public forward iter…

自适应对话式团队构建,提升语言模型代理的复杂任务解决能力

人工智能咨询培训老师叶梓 转载标明出处 如何有效利用多个大模型(LLM)代理解决复杂任务一直是一个研究热点。由美国南加州大学、宾夕法尼亚州立大学、华盛顿大学、早稻田大学和谷歌DeepMind的研究人员联合提出了一种新的解决方案——自适应团队构建&…

临街矩阵乘以自己转置的含义

总结: 临街矩阵* 邻接矩阵转置的(i,j) 位置表示有多少种线路从元素A跳转一条边最终落到元素j的路线. 这个也叫1_degree.

JavaEE-多线程初阶(3)

目录 1.线程的状态 1.1 NEW、RUNNABLE、TERMINATED 1.2 TIMED_WAITING 1.3 WAITING 1.4 BLOCKED 2.多线程带来的风险-线程安全(重点) 2.1 观察线程不安全的现象 2.2 分析产生该现象的原因 2.3 产生线程安全问题的原因 2.3.1 抢占式执行&#x…

江协科技STM32学习- P35 硬件I2C读写MPU6050

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…

学习虚幻C++开发日志——定时器

官方文档:虚幻引擎中的Gameplay定时器 | 虚幻引擎 5.5 文档 | Epic Developer Community | Epic Developer Community 定时器 安排在经过一定延迟或一段时间结束后要执行的操作。例如,您可能希望玩家在获取某个能力提升道具后变得无懈可击,…

【简道云 -注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 暴力破解密码,造成用户信息泄露短信盗刷的安全问题,影响业务及导致用户投诉带来经济损失,尤其是后付费客户,风险巨大,造成亏损无底洞…

【表格解决问题】EXCEL行数过多,WPS如何按逐行分别打印多个纸张中

1 问题描述 如图:我的表格行数太多了。打印在一张纸上有点不太好看 2 解决方式 Step01:先选中你需要打印的部分,找到【页面】->【打印区域】->【设置打印区域】 Step02:先选中一行,找到【插入分页符】 Step0…

提高交换网络可靠性之链路聚合

转载请注明出处 该实验为链路聚合的配置实验。 1.改名,分别将交换机1和交换机2改名为S1,S2,然后查看S1,S2的STP信息。以交换机1为例👇。 2.交换机S1,S2上创建聚合端口,将端口加入聚合端口。以S…