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

今天要分享的是仓颉开发语言中的懒加载。
先和初学者朋友们解释一下什么是懒加载。懒加载在代码中叫做LazyForEach，看到名字你一定能猜到它和ForEach的功能类似。只不过和ForEach的一次性加载所有数据不同，懒加载会根据屏幕可使区域按需加载数据，并且当内容滑出屏幕范围时，懒加载又会自动将这些内容销毁。
所以懒加载对于程序的性能有显著的优化，对于用户的体验也有大幅的提升，这一点幽蓝君在ArkTs语言中已经做过对比。当数据比较多比较大的时候强烈建议大家使用懒加载。
LazyForEach的用法和ForEach相比较为麻烦一些，它的数据源要求IDataSource类型，我们需要先自定义这个数据类型。IDataSource中有一些方法，主要用来获取数据和监听数据改变：

1. public interface IDataSource<T> {
2.     func totalCount(): Int64
3.     func getData(index: Int64): T
4.     func onRegisterDataChangeListener(listener: DataChangeListener): Unit
5.     func onUnregisterDataChangeListener(listener: DataChangeListener): Unit
6. }

复制代码

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

1. package ohos_app_cangjie_entry.page
2. import ohos.base.*
3. import ohos.component.*
4. import ohos.state_manage.*
5. import ohos.state_macro_manage.*
6. import std.collection.ArrayList
7. import std.collection.*
8. class CoverDataSource <: IDataSource<String> {
9.     public CoverDataSource(let data_: ArrayList<String>) {}
10.     public var listenerOp: Option<DataChangeListener> = None
11.     public func totalCount(): Int64 {
12.         return data_.size
13.     }
14.     public func getData(index: Int64): String {
15.         return data_[index]
16.     }
17.     public func onRegisterDataChangeListener(listener: DataChangeListener): Unit {
18.         listenerOp = listener
19.     }
20.     public func onUnregisterDataChangeListener(listener: DataChangeListener): Unit {
21.         listenerOp = None
22.     }
23.     public func notifyChange(): Unit {
24.         let listener: DataChangeListener = listenerOp.getOrThrow()
25.         listener.onDataReloaded()
26.     }
27. }
28. func getDS(): CoverDataSource
29. {
30.     let data: ArrayList<String> = ArrayList<String>([
31.         'http://example.com/youlanApi/cover/lazy1.jpg',
32.         'http://example.com/youlanApi/cover/lazy2.jpg',
33.         'http://example.com/youlanApi/cover/lazy3.jpg',
34.         'http://example.com/youlanApi/cover/lazy4.jpg',
35.         'http://example.com/youlanApi/cover/lazy5.jpg',
36.         'http://example.com/youlanApi/cover/lazy6.jpg',
37.         'http://example.com/youlanApi/cover/lazy7.jpg',
38.         'http://example.com/youlanApi/cover/lazy8.jpg',
39.         'http://example.com/youlanApi/cover/lazy9.jpg',
40.          'http://example.com/youlanApi/cover/lazy10.jpg',
41.         'http://example.com/youlanApi/cover/lazy11.jpg'
42.         ])
43.     let dataSourceStu: CoverDataSource = CoverDataSource(data)
44.     return dataSourceStu
45. }
46. let coverDataSource: CoverDataSource = getDS()
47. @Entry
48. @Component
49. public  class lazypage {
50.     func build(){
51.         Column(30) {
52.             Grid {
53.                 LazyForEach(coverDataSource, itemGeneratorFunc: {cover: String, idx: Int64 =>
54.                     GridItem {
55.                         Image(cover)
56.                             .width(100.percent)
57.                             .height(300)
58.                     }
59.                 })
60.             }
61.             .height(100.percent)
62.             .width(100.percent)
63.             .columnsTemplate('1fr 1fr')
64.             .columnsGap(5)
65.             .rowsGap(5)
66.             .backgroundColor(0xFFFFFF)
67.             .padding(right: 5, left: 5)
68.         }
69.     }
70. }

复制代码

运行效果如下：

以上就是今天的内容分享，感谢阅读。##HarmonyOS语言##仓颉##购物#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

前排留名，哈哈哈