HarmonyOS NEXT应用开发—组件堆叠

介绍

本示例介绍运用Stack组件以构建多层次堆叠的视觉效果。通过绑定Scroll组件的onScroll滚动事件回调函数,精准捕获滚动动作的发生。当滚动时,实时地调节组件的透明度、高度等属性,从而成功实现了嵌套滚动效果、透明度动态变化以及平滑的组件切换。

效果图预览

使用说明

  1. 加载完成后显示整个界面,超过一屏可以上下滑动可见堆叠效果。

实现思路

  1. 在向上滑动过程中观察到头部组件是处于层级底部,而其他组件覆盖在其上方,为此,选择Stack组件来获取堆叠效果。
Stack({ alignContent: Alignment.Top }) {Scroll(this.scroller) {...}
}
  1. 在顶部的可滚动区域,通过使用Scroll组件来获取堆叠效果。
Scroll(this.scroller) {Column() {...}
}
  1. 实现滚动过程中动态调整文本框高度的功能时,运用Scroll组件滚动事件回调函数onScroll在滚动时修改文本框的高度及组件的透明度。
.onScroll(() => {let yOffset: number = this.scroller2.currentOffset().yOffset;this.Height2 = this.Height2_raw - yOffset * 0.5;// 根据yOffset的偏移量来设置IconList2的透明度,当偏移量大于等于IconList2原始高度就是透明的。if (1 - yOffset / this.IconList2_raw >= 0) {this.Opacity2 = 1 - yOffset / this.IconList2_raw; // IconList2的透明度} else {this.Opacity2 = 0;}// 巧妙利用IconList2的透明度的值Opacity2来设置IconList2的缩放。this.ratio = this.Opacity2;// 根据yOffset的偏移量来设置IconList1的透明度和IconList3的间距,当偏移量大于等于IconList1原始高度就是透明的同时IconList3的间距也是最小的。if (1 - yOffset / this.IconList1_raw > 0) {this.isChange = false;this.Opacity = 1 - yOffset / this.IconList1_raw; // IconList1的透明度this.marginSpace = this.maxMarginSpace; // IconList3默认间距} else {this.isChange = true;this.Opacity = (yOffset - this.IconList1_raw) / this.maxMarginSpace; // IconList1的透明度this.marginSpace = this.IconList3_raw - yOffset > this.minmarginSpace ?(this.IconList3_raw - yOffset) : this.minmarginSpace; // IconList3的间距}
})
  1. 存在多层嵌套滚动的情况时,应该先滚动父组件,再滚动自身。只需要在内层的Scroll组件的属性nestedScroll设置向前向后两个方向上的嵌套滚动模式,实现与父组件的滚动联动。
Scroll(this.scroller2){...
}
.width('100%')
.scrollBar(BarState.Off)
.nestedScroll({scrollForward: NestedScrollMode.PARENT_FIRST, // 可滚动组件往末尾端滚动时的嵌套滚动选项,父组件先滚动,父组件滚动到边缘以后自身滚动。scrollBackward: NestedScrollMode.SELF_FIRST // 可滚动组件往起始端滚动时的嵌套滚动选项,自身先滚动,自身滚动到边缘以后父组件滚动。
})
  1. 在商品列表区域,采用瀑布流(WaterFlow)容器进行布局,将商品信息动态分布并分成两列呈现,每列商品自上而下排列。
WaterFlow() {LazyForEach(this.productData, (item: ProductDataModel) => {FlowItem() {...}, (item: ProductDataModel) => item.id.toString())
}
.nestedScroll({scrollForward: NestedScrollMode.PARENT_FIRST,scrollBackward: NestedScrollMode.SELF_FIRST
})
.columnsTemplate("1fr 1fr")
}

高性能知识点

本示例使用了LazyForEach进行数据懒加载,WaterFlow布局时会根据可视区域按需创建FlowItem组件,并在FlowItem滑出可视区域外时销毁以降低内存占用。 本例中Scroll组件绑定onScroll滚动事件回调,onScroll属于频繁回调,在回调中需要尽量减少耗时和冗余操作,例如减少不必要的日志打印。

工程结构&模块类型

componentstack                                   // har类型
|---mock
|   |---IconMock.ets                             // 本地数据源 
|---model
|   |---DataSource.ets                           // 列表数据模型
|   |---IconModel.ets                            // 数据类型定义 
|---view
|   |---ComponentStack.ets                       // 组件堆叠主页面 
|   |---IconView.ets                             // 按钮快捷入口自定义组件 
|   |---ProductList.ets                          // 商品列表自定义组件

模块依赖

本实例依赖common模块来实现资源的调用。 还需要依赖EntryAbility.ets模块。

参考资料

WaterFlow

Stack

Z序控制

组件可见区域变化事件

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

《鸿蒙开发学习手册》:

如何快速入门: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

腾讯T10级高工技术,安卓全套VIP课程全网免费送:https://qr21.cn/D2k9D5

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

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

相关文章

【论文阅读】Energy Efficient Real-time Task Scheduling on CPU-GPU Hybrid Clusters

Energy Efficient Real-time Task Scheduling on CPU-GPU Hybrid Clusters 出处:2017IEEE Xplore 基于CPU-GPU混合集群的高效实时任务调度 主要工作:通过动态电压和频率缩放研究了新兴CPU-GPU混合集群的节能问题。 首次分析GPU特定的DVFS模型。 设计了…

Web核心,HTTP,tomcat,Servlet

1,JavaWeb技术栈 B/S架构:Browser/Server,浏览器/服务器架构模式,它的特点是,客户端只需要浏览器,应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器,获取Web资源,服务器把Web资源…

安装snap再安装flutter再安装localsend@Ubuntu(FreeBSD下未成功)

Localsend介绍 localsend是一个跨平台的文件传送软件,可以在Windows、MacOS、Linux、Android和IOS下互相传送文件,只要在同一个局域网即可。 localsend官网:LocalSend 尝试安装localsend,发现需要使用flutter, 安装f…

阿里二面:什么情况会发生Full GC?如何避免频繁Full GC?

阿里二面:什么情况会发生Full GC?如何避免频繁Full GC? Minor GC、Major GC 和 Full GC区别? Minor GC、Major GC和Full GC是垃圾回收中的三个重要概念,它们描述了垃圾回收的不同阶段和范围: Minor GC&am…

自定义协议

应用层 有许多现成的协议(HTTP协议做网站必备),也有许多需要程序员自定义的协议. 1.自定义协议 自定义协议: 1.明确传递的信息是什么 2.约定好信息按照什么样的格式来组织成二进制字符串 举个例子: 当我们点外卖时,打开软件,会显示商家列表,列表中有很多项,每一项都包含了一…

Tuxera NTFS 2023安装使用教程 Tuxera NTFS破解版 Tuxera NTFS for Mac优惠

对于必须在Windows电脑和Mac电脑之间来回切换的Mac朋友来说,跨平台不兼容一直是一个巨大的障碍,尤其是当我们需要使用NTFS格式的硬盘在Windows和macOS之间共享文件时。因为Mac默认不支持写入NTFS磁盘。 为了解决这一问题,很多朋友会选择很便捷…

React理念——Fiber架构的主要原理

React理念——Fiber架构的主要原理 React 理念CPU 的瓶颈IO 的瓶颈 Fiber的产生及原理如何构建副作用链表 React 理念 从官网看到React的理念: React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。 可见&a…

对LitJson开源插件的自定义尝试

简介 LitJson是一款知名的Json字符串数据转换的插件,基于.Net开发,使用C#作为开发语言。本文旨在基于所学的编程知识以及对LitJson源码的理解来尝试对LitJson插件进行自定义。 自定义思路 (一)问题 结合我在使用LitJson过程中遇到…

Selenium基础

1. selenium简介 用于实现自动化测试的 python 包,使用前需要安装对应浏览器驱动 from time import sleep from selenium import webdriver option webdriver.ChromeOptions() # 指定chrome存储路径的二进制形式 option.binary_locationD:\Chrome\Google\Chrome\Ap…

企业计算机服务器中了halo勒索病毒怎么办,halo勒索病毒解密工具流程

随着网络技术的不断应用与发展,越来越多的企业开始利用网络开展各项工作业务,网络为企业的发展与生产生活提供了极大便利。但网络中的勒索病毒攻击企业服务器的事件频发,给企业的数据安全带来了严重威胁,数据安全问题一直是企业关…

pytorch CV入门 - 汇总

初次编辑:2024/2/14;最后编辑:2024/3/9 参考网站-微软教程:https://learn.microsoft.com/en-us/training/modules/intro-computer-vision-pytorch 更多的内容可以参考本作者其他专栏: Pytorch基础:https…

ArrayList 源码解析和设计思路

ArrayList 一、继承体系二、接口继承三、标记接口四、设计目的五、框架总体结构六、工作原理七、创建List对象初始化?还是add()添加元素初始化?七、add(E e)添加元素八、remove(int index)删除元素八、线程安全问题 一、继承体系 ArrayLis…

智慧城市革命,物联网技术如何改变城市治理与生活方式

随着科技的不断进步,智慧城市已经成为现代城市发展的重要方向之一。物联网技术作为智慧城市的重要支撑,正深刻改变着城市的治理模式和居民的生活方式。本文将探讨智慧城市革命,以及物联网技术如何改变城市治理与生活方式,同时介绍…

Python Web开发记录 Day12:Django part6 用户登录

名人说:东边日出西边雨,道是无晴却有晴。——刘禹锡《竹枝词》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 目录 1、登录界面2、用户名密码校验3、cookie与session配置①cookie与session②配置…

STM32CubeMX与HAL库开发教程八(串口应用/轮询/中断/DMA/不定长数据收发)

目录 前言 初识串口-轮询模式 串口中断模式收发 串口DMA模式 蓝牙模块与数据包解析 前言 前面我们简单介绍过串口的原理和初步的使用方式,例如怎么配置和简单的收发,同时我们对串口有了一个初步的了解,这里我们来深入的来使用一下串口 …

Linux服务器(RedHat、CentOS系)安全相关巡检shell脚本

提示:巡检脚本可以使用crontab定时执行,人工根据执行结束时间点统一收集报告文件即可。 #!/bin/bash# Define output file current_date$(date "%Y%m%d") # Gets the current date in YYYYMMDD format echo >server_security_inspection_r…

Leetcode 第 126 场双周赛 Problem C 替换字符串中的问号使分数最小(Java + 排序 + 贪心)

文章目录 题目思路Java 排序 贪心第一步:第二步:第三步: 复杂度Code 题目 Problem: 100249. 替换字符串中的问号使分数最小给你一个字符串 s 。s[i] 要么是小写英文字母,要么是问号 ‘?’ 。对于长度为 m 且 只 含有小写英文字…

任职资格中的一些面试题和知识点

目录 一、计算机数据结构基本概念理解:1. 数组基本概念优缺点以及如何改进常用的操作底层实现还有哪些容易问到的问题:关于数组的一些衍生数据结构和算法问题 2. 链表基本概念:链表的节点是什么?每个节点包含哪些信息?…

【计算机网络】https的工作原理以及和http的区别

目录 前言 1. HTTP协议存在的问题 2. 什么是HTTPS协议? 3. HTTP和HTTPS有哪些区别? 4. HTTPS的工作原理 加密方式 前言 在日常的Web项目练习中,我们会发现老师会让我们在打开服务器之后使用 http://localhost/...进行项目效果测试和预览…

2.26OS分类,中断(内,外),系统调用,操作系统结构、引导,虚拟机(两类VMM),进程

外核可以申请分配连续的磁盘块以支持频繁的随机访问,其它的方式是采用虚拟存储 分层结构