鸿蒙Next仓颉语言开发实战教程：懒加载

最新推荐文章于 2025-08-02 15:43:14 发布

打不死的little强

最新推荐文章于 2025-08-02 15:43:14 发布

阅读量20

点赞数

文章标签： harmonyos 华为

合集 - 仓颉教程(19)

1.详解鸿蒙仓颉开发语言中的日志打印问题05-21 2.鸿蒙仓颉开发语言实战教程：实现商城应用首页05-22 3.鸿蒙仓颉开发语言实战教程：页面跳转和传参05-25 4.鸿蒙仓颉语言开发教程：页面和组件的生命周期05-28 5.鸿蒙仓颉语言开发实战教程：购物车页面06-03 6.鸿蒙仓颉语言开发实战教程：商城登录页06-04 7.鸿蒙仓颉语言开发实战教程：商城搜索页06-05 8.鸿蒙仓颉语言开发教程：仓颉语言中的状态存储06-06 9.鸿蒙仓颉语言开发实战教程：商城应用个人中心页面06-07 10.详解鸿蒙Next仓颉开发语言中的动画06-08 11.鸿蒙Next仓颉语言开发实战教程：店铺详情页06-09 12.鸿蒙Next仓颉语言开发实战教程：下拉刷新和上拉加载更多06-10 13.鸿蒙Next仓颉语言开发实战教程：订单列表06-11 14.详解HarmonyOS NEXT系统中ArkTS和仓颉的混合开发06-12 15.鸿蒙Next仓颉语言开发实战教程：订单详情06-13 16.鸿蒙Next仓颉语言开发实战教程：设置页面06-15 17.鸿蒙Next仓颉语言开发实战教程：消息列表06-16 18.鸿蒙Next仓颉语言开发实战教程：聊天页面06-17

19. 鸿蒙Next仓颉语言开发实战教程：懒加载 06-18

今天要分享的是仓颉开发语言中的懒加载。

先和初学者朋友们解释一下什么是懒加载。懒加载在代码中叫做LazyForEach，看到名字你一定能猜到它和ForEach的功能类似。只不过和ForEach的一次性加载所有数据不同，懒加载会根据屏幕可使区域按需加载数据，并且当内容滑出屏幕范围时，懒加载又会自动将这些内容销毁。

所以懒加载对于程序的性能有显著的优化，对于用户的体验也有大幅的提升，这一点幽蓝君在ArkTs语言中已经做过对比。当数据比较多比较大的时候强烈建议大家使用懒加载。

LazyForEach的用法和ForEach相比较为麻烦一些，它的数据源要求IDataSource类型，我们需要先自定义这个数据类型。IDataSource中有一些方法，主要用来获取数据和监听数据改变：

public interface IDataSource<T> {
    func totalCount(): Int64
    func getData(index: Int64): T
    func onRegisterDataChangeListener(listener: DataChangeListener): Unit
    func onUnregisterDataChangeListener(listener: DataChangeListener): Unit
}

我在本地服务器放了几张高清图片，下面以加载这些高清图片为例，为大家演示懒加载的具体用法：

package ohos_app_cangjie_entry.page
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import std.collection.ArrayList
import std.collection.*
class CoverDataSource <: IDataSource<String> {
    public CoverDataSource(let data_: ArrayList<String>) {}
    public var listenerOp: Option<DataChangeListener> = None
    public func totalCount(): Int64 {
        return data_.size
    }
    public func getData(index: Int64): String {
        return data_[index]
    }
    public func onRegisterDataChangeListener(listener: DataChangeListener): Unit {
        listenerOp = listener
    }
    public func onUnregisterDataChangeListener(listener: DataChangeListener): Unit {
        listenerOp = None
    }
    public func notifyChange(): Unit {
        let listener: DataChangeListener = listenerOp.getOrThrow()
        listener.onDataReloaded()
    }
}
func getDS(): CoverDataSource
{
    let data: ArrayList<String> = ArrayList<String>([
        'http://example.com/youlanApi/cover/lazy1.jpg',
        'http://example.com/youlanApi/cover/lazy2.jpg',
        'http://example.com/youlanApi/cover/lazy3.jpg',
        'http://example.com/youlanApi/cover/lazy4.jpg',
        'http://example.com/youlanApi/cover/lazy5.jpg',
        'http://example.com/youlanApi/cover/lazy6.jpg',
        'http://example.com/youlanApi/cover/lazy7.jpg',
        'http://example.com/youlanApi/cover/lazy8.jpg',
        'http://example.com/youlanApi/cover/lazy9.jpg',
         'http://example.com/youlanApi/cover/lazy10.jpg',
        'http://example.com/youlanApi/cover/lazy11.jpg'
        ])
    let dataSourceStu: CoverDataSource = CoverDataSource(data)
    return dataSourceStu
}
let coverDataSource: CoverDataSource = getDS()
@Entry
@Component
public  class lazypage {
    func build(){
        Column(30) {
            Grid {
                LazyForEach(coverDataSource, itemGeneratorFunc: {cover: String, idx: Int64 =>
                    GridItem {
                        Image(cover)
                            .width(100.percent)
                            .height(300)
                    }
                })
            }
            .height(100.percent)
            .width(100.percent)
            .columnsTemplate('1fr 1fr')
            .columnsGap(5)
            .rowsGap(5)
            .backgroundColor(0xFFFFFF)
            .padding(right: 5, left: 5)
        }
    }
}

运行效果如下：