企业官网建设流程全解析

在 HarmonyOS6 ArkUI 开发中，列表渲染是最常用的 UI 模式之一。无论是商品列表、消息列表还是设置菜单，都需要用到列表渲染。ArkUI 提供了两种列表渲染方式：ForEach和LazyForEach，它们各有优劣，适用场景也不同。

很多开发者只知道ForEach，不知道LazyForEach的存在，或者知道但不知道什么时候该用。实际上，理解两者的区别，能在数据量大时显著提升应用性能。

在 HarmonyOS PC 端开发中，列表渲染的性能问题更加突出——PC 端界面更复杂，列表可能包含更多内容，如果渲染不当，容易导致卡顿、闪退等问题。

ForEach 基础用法

ForEach是最简单的列表渲染方式，它遍历数据数组，为每个数据项渲染一个 UI 组件：

ForEach(this.goodsList,(item:GoodsInfo)=>{this.GoodsCard(item)},(item:GoodsInfo)=>item.id.toString())

ForEach有三个参数：

1. 数据数组
2. 渲染函数，接收每个数据项
3. 唯一键生成函数（可选），用于优化更新性能

ForEach 的特点：

• 一次性渲染所有数据项
• 适合数据量小的场景（< 100 项）
• 更新性能好，所有数据已在内存中
• 加载性能差，数据量大时启动慢

在 HarmonyOS PC 端，ForEach适用于小型列表，如设置菜单、短列表等。PC 端屏幕更宽，一屏可能显示更多列表项，如果数据量大，建议使用LazyForEach。

LazyForEach 基础用法

LazyForEach是按需加载的列表渲染方式，它配合DataHelper使用，只渲染可见区域的数据项：

LazyForEach(this.dataSource,this.renderItem.bind(this),(item:GoodsInfo)=>item.id.toString())

LazyForEach有三个参数：

1. 数据源，实现IRangeDataSource接口
2. 渲染函数，接收每个数据项
3. 唯一键生成函数，用于优化更新性能

LazyForEach 的特点：

• 按需加载数据项
• 适合数据量大的场景（> 100 项）
• 加载性能好，只渲染可见区域
• 滚动性能好，内存占用低
• 更新性能差，需要重新加载数据

在 HarmonyOS PC 端，LazyForEach是大型列表的首选——PC 端屏幕更大，一屏可能显示更多列表项，LazyForEach能显著降低内存占用，提升滚动流畅度。

ForEach vs LazyForEach 对比

选择建议：

• 数据量小（< 100 项）：使用ForEach
• 数据量大（> 100 项）：使用LazyForEach
• 数据量中等（100-500 项）：根据场景选择，如果注重启动速度用LazyForEach，如果注重更新性能用ForEach

完整案例

下面是完整的列表渲染示例代码，可以直接复制到 DevEco Studio 中运行：

interfaceGoodsInfo{id:numbername:stringprice:string}/** * 数据源实现 */classGoodsDataSourceimplementsIDataSource{privateobservers:DataChangeListener[]=[]publicgoodsList:GoodsInfo[]=[]constructor(){for(leti=0;i<1000;i++){this.goodsList.push({id:i,name:`商品${i+1}`,price:`¥${(Math.random()*1000).toFixed(2)}`})}}totalCount():number{returnthis.goodsList.length}getData(index:number):GoodsInfo{returnthis.goodsList[index]}registerDataChangeListener(listener:DataChangeListener):void{if(this.observers.indexOf(listener)<0){this.observers.push(listener)}}unregisterDataChangeListener(listener:DataChangeListener):void{constpos=this.observers.indexOf(listener)if(pos>=0){this.observers.splice(pos,1)}}}@Entry@Componentstruct ListRenderDemo{@StateselectedRender:number=0@StateisLoading:boolean=falseprivaterenderOptions:string[]=['ForEach','LazyForEach']privatedataSource:GoodsDataSource=newGoodsDataSource()build(){Column({space:16}){// 渲染方式选择器Flex({direction:FlexDirection.Row}){ForEach(this.renderOptions,(option:string,idx:number)=>{Text(option).fontSize(13).fontColor(this.selectedRender===idx?'#FFFFFF':'#007DFF').backgroundColor(this.selectedRender===idx?'#007DFF':'#EAF3FF').padding({left:12,right:12,top:7,bottom:7}).borderRadius(20).margin({right:8,bottom:8}).onClick(()=>{this.selectedRender=idx})})}.width('100%')// 加载状态if(this.isLoading){Text('加载中...').fontSize(14).fontColor('#666666')}// 列表区域if(this.selectedRender===0){this.ForEachList()}else{this.LazyForEachList()}}.width('100%').height('100%').padding(16).backgroundColor('#F5F6FA').onAppear(()=>{this.isLoading=false})}@BuilderForEachList(){List(){ForEach(this.dataSource.goodsList.slice(0,100),(item:GoodsInfo)=>{ListItem(){this.GoodsCard(item)}},(item:GoodsInfo)=>item.id.toString())}.width('100%').layoutWeight(1)}@BuilderLazyForEachList(){List(){LazyForEach(this.dataSource,(item:GoodsInfo)=>{ListItem(){this.GoodsCard(item)}},(item:GoodsInfo)=>item.id.toString())}.width('100%').layoutWeight(1)}@BuilderGoodsCard(item:GoodsInfo){Row({space:12}){Text(item.name).fontSize(16).fontColor('#1A1A1A').layoutWeight(1)Text(item.price).fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FF4D4D')}.width('100%').padding(14).backgroundColor('#FFFFFF').borderRadius(12).margin({bottom:8})}}

常见问题与解决方案

1. LazyForEach 数据不更新

问题：数据源更新后，列表没有重新渲染。

原因：没有正确实现IRangeDataSource接口的数据更新通知机制。

解决方案：在数据更新时，调用notifyDataReloaded()通知列表重新加载。

2. ForEach 加载慢

问题：数据量大时，ForEach加载时间很长。

原因：ForEach一次性加载所有数据项，数据量大时启动慢。

解决方案：改用LazyForEach，或者使用分页加载，每次只加载部分数据。

3. 滚动卡顿

问题：列表滚动时卡顿，帧率低。

原因：列表项渲染复杂度高，或者数据量过大。

解决方案：

• 简化列表项的 UI 结构
• 使用LazyForEach按需加载
• 使用cache(true)启用缓存
• 避免在列表项中使用复杂的动画

写在最后

ForEach和LazyForEach各有优劣，选择合适的列表渲染方式能显著提升应用性能。

在 HarmonyOS PC 端开发中，列表渲染的性能问题更加突出——PC 端屏幕更大，一屏可能显示更多列表项。建议在实际开发中，根据数据量选择合适的渲染方式：数据量小用ForEach，数据量大用LazyForEach。

掌握ForEach和LazyForEach的使用技巧，配合性能优化手段，你就能构建出流畅、高效的列表界面，为用户提供更好的使用体验。