Harmonyos Next Cangjie Language Development Practical Tutorial: Lazy Loading

Today, I'm going to share about lazy loading in the Cangjie development language.

First, let me explain to the beginner friends what lazy loading is. Lazy loading is called LazyForEach in the code. Judging from the name, you can surely guess that its function is similar to that of ForEach. Unlike ForEach's one-time loading of all data, lazy loading loads data on demand based on the available area of the screen. Moreover, when the content slides out of the screen range, lazy loading automatically destroys this content.

Therefore, lazy loading significantly optimizes the performance of the program and greatly improves the user experience. This point has already been compared by Youlan Jun in the ArkTs language. When there is a large amount of data, it is strongly recommended that everyone use lazy loading.

The usage of LazyForEach is a bit more complicated compared to ForEach. Its data source requires the IDataSource type, and we need to customize this data type first. There are some methods in IDataSource, mainly used for obtaining data and monitoring data changes:

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

I placed several high-definition pictures on the local server. Now, taking loading these high-definition pictures as an example, I will demonstrate the specific usage of lazy loading for everyone:

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)
        }
    }
}

The operation effect is as follows: