HarmonyOS NEXT应用开发案例——滑动页面信息隐藏与组件位移效果

news/2024/4/19 13:27:30/文章来源:https://blog.csdn.net/maniuT/article/details/136517057

介绍

在很多应用中,向上滑动"我的"页面,页面顶部会有如下变化效果:一部分信息逐渐隐藏,另一部分信息逐渐显示,同时一些组件会进行缩放或者位置移动。向下滑动时则相反。

效果图预览

使用说明
  1. 向上滑动页面,出现如下变化:用户名/选择身份/设置图标/客服图标逐渐隐藏,用户头像尺寸逐渐缩小并向右上平移,顶部"返回"文本后方用户名逐渐显示。
  2. 滑动到顶部后,向下滑动页面,出现如下变化:用户头像尺寸逐渐变大并向左下平移,顶部"返回"文本后方的用户名逐渐隐藏,原来的用户名/选择身份/设置图标/客服图标逐渐显示。

实现思路

本例涉及的关键特性和实现方案如下:

  1. 将屏幕从上向下分为三部分,第一部分Row组件包含"返回"和初始状态下隐藏的用户名,第二部分Row包含用户头像/用户名/选择身份/设置/客服,下方其余部分位第三部分。本例场景的变化体现在第一和第二部分。源码参考SlideToHideAndDisplace
Column() {Row() {...}.padding($r('app.integer.padding_small')).width($r('app.string.size_full')).alignItems(VerticalAlign.Center)Row() {...}.height($r('app.integer.height_one_hundred')).width($r('app.string.size_full'))Scroll() {...}
}
  1. 在第一和第二部分中,使用@State装饰器装饰相关的组件属性,使之与自定义组件的渲染绑定起来,状态变量改变时,UI会发生对应的渲染改变。用户头像的缩放通过改变其width和height属性值的大小来刷新,用户头像的位移通过改变其margin属性中的top和left的大小来刷新。其他一些组件的显隐变化通过改变其opacity属性值的大小来刷新。源码参考SlideToHideAndDisplace
  @State userRowOpacity: number = 1;@State userImageHeight: number = 50;...build() {Column() {Row() {...Text($r('app.string.phone_number')).opacity(this.userNameOpacity) // userNameOpacity控制顶部用户名的透明度Blank()Text("设置").opacity(this.userNameOpacity) // 设置的文字透明度与顶部用户名相同Text("客服").opacity(this.userNameOpacity) // 客服的文字透明度与顶部用户名相同}Row() {Image($r('app.media.batman')).width(this.userImageHeight).height(this.userImageHeight) // userImageHeight控制头像尺寸// userImageMarginTop和userImageMarginLeft控制头像在父容器内的位置.margin({ top: this.userImageMarginTop, left: this.userImageMarginLeft })Column() {...}.alignItems(HorizontalAlign.Start).opacity(this.userRowOpacity) // 控制Row组件的透明度}...}}
  1. 第三部分页面滚动通过Scroll组件实现,其中第二栏和第三栏相似,使用@Builder装饰器封装了两个自定义构建函数IconAndDescription和CustomRow,增加代码复用。源码参考SlideToHideAndDisplace
  // 自定义构建函数,将重复使用的UI元素抽象成一个方法。此处样式为:上方图标下方文字@BuilderIconAndDescription(icon: Resource, description: string | Resource, iconSize?: Size, radius?: number) {Column() {Image(icon).size(iconSize === undefined ? { height: $r('app.integer.icon_default_height'),width: $r('app.integer.icon_default_height') } : iconSize).borderRadius(radius)Text(description).margin({ top: $r('app.integer.margin_between_icon_and_description') })}}// 自定义构建函数。此处样式为:在Row组件中横向排列IconAndDescription@BuilderCustomRow(iconsAndDescriptions: IconAndDescription[]) {Row() {ForEach(iconsAndDescriptions, (item: IconAndDescription) => {this.IconAndDescription(item.icon, item.description)})}.width($r('app.string.size_full')).justifyContent(FlexAlign.SpaceAround).padding($r('app.integer.padding_small')).margin({ top: $r('app.integer.margin_small') }).backgroundColor($r('app.color.color_transparent_aa')).borderRadius($r('app.integer.border_radius'))}

高性能知识点

本例中Scroll组件绑定onScroll滚动事件回调,onScroll属于频繁回调,在回调中需要尽量减少耗时和冗余操作,例如减少不必要的日志打印。

工程结构&模块类型

   slidetohideanddisplace                                      // har包|---model|   |---Util.ets                         				   // 提供测试数据类     |---SlideToHideAndDisplace.ets                              // 滑动变化效果实现页面

模块依赖

不涉及。

参考资料

@State装饰器

@Builder装饰器

透明度设置

Scroll

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:https://qr21.cn/FV7h05

入门必看:https://qr21.cn/FV7h05
1.  应用开发导读(ArkTS)
2.  ……

HarmonyOS 概念:https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门:https://qr21.cn/FV7h05
1.  基本概念
2.  构建第一个ArkTS应用
3.  ……

开发基础知识:https://qr21.cn/FV7h05
1.  应用基础知识
2.  配置文件
3.  应用数据管理
4.  应用安全管理
5.  应用隐私保护
6.  三方应用调用管控机制
7.  资源分类与访问
8.  学习ArkTS语言
9.  ……

基于ArkTS 开发:https://qr21.cn/FV7h05
1.  Ability开发
2.  UI开发
3.  公共事件与通知
4.  窗口管理
5.  媒体
6.  安全
7.  网络与链接
8.  电话服务
9.  数据管理
10.  后台任务(Background Task)管理
11.  设备管理
12.  设备使用信息统计
13.  DFX
14.  国际化开发
15.  折叠屏系列
16.  ……

鸿蒙开发面试真题(含参考答案):https://qr21.cn/FV7h05

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

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

相关文章

【nodejs】“__dirname is not defined”错误修复

▒ 目录 ▒ 🛫 问题描述环境 1️⃣ 原理CommonJS vs ESM错误原因 2️⃣ 禁用 ESM 模式并改用 CommonJS方案一:项目方案二:单文件 3️⃣ 在 ESM 模式下自实现__dirname📖 参考资料 🛫 问题 描述 从网上找了一份代码&am…

Vmware Workstation 不可恢复错误:0xc0000005 has occured

上周打开虚拟机的时候报错:Vmware Workstation 不可恢复错误:0xc0000005 has occured,查看网上资料说是vmware版本太低,需要手动更新本地版本。 由于本地网络不是很好,没能正常更新,无意中出现问题前更改了…

嵌入式面试

1.关键字static的作用是什么?为什么static变量只初始化一次? 1)修饰局部变量:使得变量变成静态变量,存储在静态区,存储在静态区的数据周期和程序相同, 在main函数开始前初始化,在退…

打家劫舍(java版)

📑前言 本文主要是【动态规划】——打家劫舍(java版)的文章,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是听风与他🥇 ☁️博客首页:CSDN主页听风与他 🌄每日一…

chrome插件chrome.storage数据写入失败QUOTA_BYTES_PER_ITEM quota exceeded

Unchecked runtime.lastError while running storage.set: QUOTA_BYTES_PER_ITEM quota exceeded at Object.callback 在开发浏览器插件的时候,报错提示:超出存储限制,浏览器插件存储官方文档:https://developer.chrome.com/docs…

springcloud和基础服务的搭建以及封装

代码仓库地址:https://github.com/zhaoyiwen-wuxian/springcloud-common page分页也进行了封装,只需要添加到pom中,将会自动进行分页,并且后端不需要写任何的分页数据。只需要前端自己传分页参数即可,并且里面封装了很…

基于单片机的轴承售卖系统设计

目 录 摘 要 I Abstract II 引 言 3 1总体方案设计及选择 5 1.1设计方案与选择 5 1.2总体方案设计 5 1.2.1系统总体设计 5 2 硬件电路的设计 8 2.1电源电路 8 2.2 控制核心STC89C52单片机 8 2.3 时钟电路 8 2.4 复位电路 8 2.5 按键模块 9 2.6 NFR24L01无线传输模块 10 2.7 LC…

three.js如何实现简易3D机房?(三)显示信息弹框/标签

接上一篇: three.js如何实现简易3D机房?(二)模型加载的过渡动画:http://t.csdnimg.cn/onbWY 目录 七、创建信息展示弹框 1.整体思路 (1)需求: (2)思路:…

新书速览|PyTorch语音识别实战(人工智能技术丛书)

实战语音唤醒、音频特征抽取、语音情绪分类、Whisper语音转换、鸟叫多标签分类、多模态语音文字转换 01 本书内容 《PyTorch语音识别实战》使用PyTorch 2.0作为语音识别的基本框架,循序渐进地引导读者从搭建环境开始,逐步深入到语音识别基本理论、算法以…

论文学习—Model-based Adversarial Meta-Reinforcement Learning

Model-based Adversarial Meta-Reinforcement Learning Abstract1. Introduction2. Related work3 Preliminaries基于模型的强化学习(MBRL):区别和联系: 4 Model-based Adversarial Meta-Reinforcement Learning4.1 Formulation 4.2 Computin…

【C语言】还有柔性数组?

前言 也许你从来没有听说过柔性数组(flexible array)这个概念,但是它确实是存在的。C99中,结构中的最后⼀个元素允许是未知⼤⼩的数组,这就叫做『柔性数组』成员。 欢迎关注个人主页:逸狼 创造不易&#xf…

vue+Nodejs+Koa搭建前后端系统(九)-- 上传图片

web2.0的到来使网页世界正式进入了寒武纪,各式各样的多媒体资源屡见不鲜,上传资源变得刻不容缓! 前言 本文是在该系列的基础上,针对前后端代码的修改。 准备 HTTP上传图片时Content-Type值常见的有2种:application…

Python之Web开发初学者教程—ubuntu下vi的使用

Python之Web开发初学者教程—ubuntu下vi的使用 vi\vim 文本编辑器 i 切换到输入模式,以输入字符。 x 删除当前光标所在处的字符。 : 切换到底线命令模式,以在最底一行输入命令。 vi 保存并退出:esc键退出编辑-…

NotePad++下载

notepad官网地址是https://notepad-plus-plus.org/。提供了许多强大的功能和工具,使其成为许多程序员和开发人员的首选工具。 Notepad 是一款广受欢迎的开源文本编辑器,它提供了许多强大的功能和工具,使其成为许多程序员和开发人员的首选工具…

AntV L7初体验

本案例使用L7库和Mapbox GL JS创建的简单地图可视化示例&#xff0c;加载点数据。 文章目录 1. 引入 CDN 链接2. 导出模块3. 创建地图3.1. 注册 token3.2. 创建地图实例 4. 创建场景5.创建点图层6. 演示效果7. 代码实现 1. 引入 CDN 链接 <!-- 1.引入CDN链接 --> <!--…

Go 简单设计和实现可扩展、高性能的泛型本地缓存

相信大家对于缓存这个词都不陌生&#xff0c;但凡追求高性能的业务场景&#xff0c;一般都会使用缓存&#xff0c;它可以提高数据的检索速度&#xff0c;减少数据库的压力。缓存大体分为两类&#xff1a;本地缓存和分布式缓存&#xff08;如 Redis&#xff09;。本地缓存适用于…

2.2 评估方法 机器学习

我们若有一个包含m个样例的数据集&#xff0c;若我们既需要训练&#xff0c;也需要测试&#xff0c;我们该如何处理呢&#xff1f;下面是几种方法&#xff1a; 2.2.1 留出法 “留出法”直接将数据集D划分为两个互斥的集合&#xff0c;其中一个作为训练集S&#xff0c;另一个作…

面试问答之Spring进阶

文章目录 &#x1f412;个人主页&#xff1a;信计2102罗铠威&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f380;说说你对Spring的认识与理解&#x1f415;Bean的分类&#x1f415; BeanFactory 接口和ApplicationContex 接口 的区别&#x1f415;SpringBe…

时间序列-AR MA ARIMA

一、AR模型(自回归) AR探索趋势和周期性 预测依赖于过去的观测值和模型中的参数。模型的阶数 p pp 决定了需要考虑多少个过去时间点的观测值。 求AR模型的阶数 p和参数 ϕ i \phi_i ϕi​ &#xff0c;常常会使用统计方法如最小二乘法、信息准则&#xff08;如AIC、BIC&#xf…

暗黑大气MT苹果CMS MT主题源码-PC版适用于苹果CMS V10

苹果CMS MT主题是一款多功能的主题&#xff0c;适用于苹果CMS V10的暗黑大气风格。 地 址 &#xff1a; runruncode.com/houtai/19704.html 初次使用说明&#xff1a; 在后台设置中&#xff0c;选择MT主题&#xff0c;并在模板目录中填写HTML。 后台地址为&#xff1a;MT主题…