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

2025-06-18
山东
本文字数：1712 字
阅读完需：约 6 分钟

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

先和初学者朋友们解释一下什么是懒加载。懒加载在代码中叫做 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.pageimport ohos.base.*import ohos.component.*import ohos.state_manage.*import ohos.state_macro_manage.*import std.collection.ArrayListimport 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@Componentpublic  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)        }    }}