11.1 LazyColumn

Ďalšou vzácnou Composable funkciou je funkcia LazyColumn a jej kamarátka LazyRow. Hoci vieme Column alebo akejkoľvek inej Composable funkcii pridať modikátory pre skrolovanie, môžeme naraziť na problém.

Predstavme si Column, ktorý obsahuje príliš veľa - povedzme 10000 - položiek. Taký layout by sme napríklad chceli použiť pri feede sociálnej siete, alebo pri kompletnom zozname položiek vo veľkom sklade.

Column + 10000 ďalších položiek znamená zavolanie minimálne 10000 funkcií. A každé z týchto 10000 volaní vyráta umiestnenie položky v Column a následne ju aj vykreslí, hoci sa ani nevojde na obrazovku.

Skús si napríklad spustiť tento kód:

Column(
    modifier = Modifier.verticalScroll(rememberScrollState())
) {
    repeat(10000) {
        Text("Hello $it")
    }
}

Na mojom telefóne sa aplikácia spúšťala asi 5 sekúnd a počas scrollovania crashla.

Použitie LazyColumn

LazyColumn dokáže veľké veci, ale pre nás je najdôležitejšie len efektívne volanie Composable funkcií. LazyColumn volá iba Composable funkcie, ktoré sa reálne majú zobraziť. Zabezpečuje to pomocnými “on-demand” funkciami items alebo item:

LazyColumn {
    item { Text("Header") }
    items(10000, key = { it }) {
        Text("Hello $it")
    }
}

// alebo

LazyColumn {
    item { Text("Pouzivatelia") }
    items(listOf("Jano", "Fero", "Jozo"), key = { it }) {
        Text("Hello $it")
    }
}

Volanie key funkcie umožňuje LazyColumnu identifikovať položky a vyhnúť sa re-renderovaní položiek, ktoré sa nezmenili. Je ho vhodné volať z dôvodou zvýšenia efektivity vykresľovania. Odpustím, keď na to zabudnete, ale v produkčnej aplikácii by ste na to mali dať pozor.

Note1: LazyColumn je skrolovateľný out-of-the-box

Note2: LazyColumn vykresľuje položky z funkcií items alebo item

Note3: key parameter v items funkcii zvyšuje efektivitu vykresľovania položiek v LazyLayoute