公司做网站的价格江阴,百度网盘首页,中国最新军事新闻 今天,安徽网站建设认准-晨飞网络个人主页→VON 收录专栏→鸿蒙开发小型案例总结 基础语法部分会发布于github 和 gitee上面#xff08;暂未发布#xff09; 前言 该案例主要是ForEach渲染的练习#xff0c;ForEach可以基于数组的个数#xff0c;渲染组件个数#xff08;简化代码#xff09; 在… 个人主页→VON 收录专栏→鸿蒙开发小型案例总结 基础语法部分会发布于github 和 gitee上面暂未发布 前言 该案例主要是ForEach渲染的练习ForEach可以基于数组的个数渲染组件个数简化代码 在后续的学习中应用肯定也是十分是广泛。该案例难度不大没有用到太多杂乱的知识点只是单纯的ForEach的练习。 构建思路
整体分析 仔细观察不难看出这是一个列表并且每一行的格式相同。因此就要考虑ForEach循环渲染这样的好处就是减少了重复代码的出现使得代码的可读性更高。 样式分析 仔细观察每行文字的样式以及他们之间的间隔思考用什么组件合适一些 。 别忘了下方的边框线 界面讲解
State 由于有大小标题所以用到了状态管理和数组。接口的定义不要忘记大小标题统一放到了boke这一数组中。 内容部分 内容部分的定义不必严格按照上述代码进行定义可以自己适当的根据文本的长度来自行修改 知识点概述
概念
鸿蒙星河版的ForEach知识点涵盖了基于数组的循环渲染机制支持静态和动态数据的高效管理并提供了优化渲染性能的键值生成规则。
鸿蒙星河版中的ForEach是针对开发者在应用开发过程中处理列表数据的核心工具之一。ForEach的设计旨在提供一种基于数组类型数据的循环渲染能力。具体来说ForEach接口需要与容器组件配合使用且返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如如果使用ListItem组件则要求ForEach的父容器组件必须为List组件。
关于ForEach的具体参数和用法它接受三个主要参数数组类型的数据源arr、组件生成函数itemGenerator以及可选的键值生成函数keyGenerator。其中数据源可以设置为空数组此时不会创建子组件组件生成函数负责为数组中的每个元素创建对应的组件而键值生成函数则为每个数组项生成一个唯一且持久的键值用于标识对应的组件确保在数组项更新或重新排序时能够正确地识别和更新相应的组件。
ForEach还提供了一个名为keyGenerator的可选参数这是一个函数允许开发者自定义键值的生成规则。若未定义keyGenerator函数则框架会使用默认的键值生成函数。键值的生成对于ForEach循环渲染过程中组件的管理至关重要因为它标识了对应的组件实例。当键值变化时ArkUI框架将视为该数组元素已被替换或修改并基于新的键值创建一个新的组件。
综上所述ForEach不仅提供了灵活的数据绑定和组件生成机制还通过键值生成规则优化了组件的复用和更新从而提升了大规模数据处理的性能。这些特性使得鸿蒙星河版中ForEach成为构建高效、响应式用户界面的重要工具。
用法
基本用法
ForEach 接受一个数组作为数据源并对数组中的每个元素执行一次指定的操作。通常与容器组件如 List、Stack 或 Column 配合使用。在循环体内你可以访问当前元素和它的索引如果需要的话。
属性说明
arr: 循环的数据源通常是一个数组。indexKey: 可选参数用于指定生成的每个子组件的唯一标识符。itemGenerator: 回调函数接收当前元素和索引作为参数并返回要渲染的 UI 组件。
注意事项
确保为每个子组件设置唯一的 key以提高性能并避免不必要的重绘。如果数据源发生变化需要确保更新 UI 时的性能优化。有时需要结合条件渲染使用例如使用 if 语句在某些条件下渲染不同的 UI 元素。 高级用法
动态渲染根据数据源的变化动态添加或删除 UI 元素。懒加载对于大型列表可以使用懒加载技术仅加载当前屏幕可视范围内的项。性能优化利用虚拟 DOM 技术减少不必要的重绘操作。
代码展示
interface BoKe{title:stringcontent:string
}
Entry
Component
struct Index {State boke:BoKe[][{title:NginxTomcat负载均衡、动静分离群集,content:Nginx(解析静态资源)Tomcat(解析动态JSP代码)},{title:[Git][多人协作][下]详细讲解,content:[Git][多人协作][下]详细讲解},{title:Pycharm中重命名项目之后切换虚拟环境,content:Pycharm中重命名项目之后切换虚拟环境},]build() {Column(){ForEach(this.boke,(item:BoKe,index:number){Column({space:5}){Text(item.title).width(100%).fontSize(16)Text(item.content).width(100%).fontColor(#5a566b).fontSize(12).margin({bottom:10})}.margin({bottom:10}).border({width:{bottom:1},color:#f0f0f2})})}.padding(20).width(100%)}
}
