LazyColumn în Jetpack Compose — ce este, proprietăți și cum funcționează

Ce este LazyColumn în Jetpack Compose

LazyColumn este o funcție composable care implementează o listă verticală derulabilă cu încărcare lentă. Spre deosebire de Column, care randează toate elementele imediat, LazyColumn creează doar elementele care intră în zona de vizualizare.

Mecanismul de încărcare lentă în LazyColumn se bazează pe reutilizarea elementelor: când un element devine ascuns la derulare, compoziția și layoutul său pot fi reutilizate pentru un nou element afișat. Aceasta economisește memorie și timp de procesare, în special pe liste lungi.

Conform Android Developers Blog, 2024, LazyColumn poate procesa eficient liste de zeci de mii de elemente fără o scădere semnificativă a performanței. Fiecare element din LazyColumn are o cheie (key) care ajută Compose să identifice și să păstreze starea elementului la modificările listei.

Semnătura de bază a LazyColumn

LazyColumn primește parametrii modifier, state, contentPadding, reverseLayout, verticalArrangement și horizontalAlignment. Conținutul este specificat în blocul lambda prin funcțiile DSL items și item.

@Composable
fun SimpleLazyColumn() {
    val itemsList = (1..100).toList()
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(16.dp)
    ) {
        items(itemsList) { item ->
            Text(text = "Element $item")
        }
    }
}

Parametrii LazyColumn: items și item

Blocul DSL LazyColumn oferă funcțiile items și item pentru adăugarea conținutului. items primește o colecție de date, o cheie și o funcție fabrică pentru crearea elementelor. item adaugă un element static în listă.

itemsIndexed este o variantă a items care transmite indexul elementului în plus față de date. Acest lucru este util când poziția elementului este necesară fără calcul separat. items(size) primește doar numărul de elemente și fabrica fără legătura cu o colecție.

Parametrul key în items identifică unic fiecare element. Conform Material Design Guidelines, 2025, cheile îmbunătățesc performanța la actualizarea și animarea elementelor, deoarece Compose poate urmări mutarea sau modificarea unui element specific prin cheie.

Exemplu cu diferite tipuri de elemente

Funcția items cu contentType permite LazyColumn să optimizeze reutilizarea elementelor de diferite tipuri. În exemplul de mai jos, într-o singură listă sunt folosite antete de secțiuni și rânduri obișnuite.

@Composable
fun MixedItemsList() {
    LazyColumn {
        item {
            Text(
                text = "Antet",
                style = MaterialTheme.typography.headlineMedium
            )
        }
        items(
            items = (1..20).toList(),
            key = { it },
            contentType = { "item" }
        ) { item ->
            Text(text = "Rând $item")
        }
    }
}

LazyListState și gestionarea derulării

LazyListState este un obiect de stare al LazyColumn care urmărește poziția curentă de derulare, primul element vizibil și deplasarea. Poate fi creat prin rememberLazyListState() și transmis parametrului state al LazyColumn.

LazyListState oferă metodele animateScrollToItem și scrollToItem pentru derularea programatică la un element specific. animateScrollToItem creează o animație lină de derulare, iar scrollToItem derulează instantaneu. Ambele metode necesită apelare într-o corutină în CompositionContext.

Conform Android Developers, 2024, LazyListState conține și layoutInfo, care oferă informații despre elementele vizibile — indexurile, deplasările și dimensiunile acestora. Acest lucru este util pentru implementarea analiticii, urmărirea vizualizărilor sau derularea infinită.

Exemplu cu derulare programatică

În acest exemplu, LazyColumn este gestionat prin LazyListState. Butonul derulează lista la elementul cu indexul 50 cu o animație lină.

@Composable
fun ScrollableList() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("Derulează la 50")
        }

        LazyColumn(state = listState) {
            items((1..100).toList()) { item ->
                Text(
                    text = "Element $item",
                    modifier = Modifier.padding(8.dp)
                )
            }
        }
    }
}

Optimizarea performanței LazyColumn

Factorul cheie al performanței LazyColumn este utilizarea corectă a cheilor. Fiecare element ar trebui să aibă o cheie stabilă unică prin parametrul key. Fără chei, Compose nu poate reutiliza corect elementele la modificarea datelor, ceea ce duce la recompoziție.

contentType informează LazyColumn care elemente au același tip de layout. Când două elemente cu același contentType intră în zona de procesare, LazyColumn poate reutiliza layoutul lor fără recompoziție. Conform Android Developers Blog, 2024, contentType îmbunătățește performanța cu 30–50% în liste cu diferite tipuri de elemente.

Pentru LazyColumn este important și evitarea parametrilor instabili în funcțiile fabrică. De fiecare dată când parametrul unui element se schimbă, Compose recompozează acel element. Utilizarea remember și derivedStateOf pentru valori stabile reduce numărul de recompoziții.

Tabelul factorilor de performanță

Sticky headers și secțiuni în LazyColumn

stickyHeader este o funcție DSL LazyColumn care fixează antetul secțiunii în partea de sus a listei la derulare. Când secțiunea următoare ajunge în sus, antetul său îl înlocuiește pe cel curent. Acest comportament este familiar utilizatorilor din listele de contacte și calendare.

stickyHeader primește o cheie și o funcție fabrică, similar cu item. Spre deosebire de item obișnuit, stickyHeader rămâne vizibil la derularea conținutului secțiunii sale. Când secțiunea este complet derulată, antetul secțiunii următoare îl înlocuiește pe cel anterior.

Conform Material Design Guidelines, 2025, sticky header îmbunătățește navigarea în liste lungi și reduce încărcarea cognitivă a utilizatorului. Pentru implementarea sticky header, este suficient să înfășurați antetul secțiunii în stickyHeader în poziția corectă față de elementele items.

@Composable
fun SectionedList(sections: Map<String, List<String>>) {
    LazyColumn {
        sections.forEach { (header, items) ->
            stickyHeader {
                Text(
                    text = header,
                    modifier = Modifier.background(Color.White)
                        .padding(16.dp)
                )
            }
            items(items) { item ->
                Text(text = item, modifier = Modifier.padding(8.dp))
            }
        }
    }
}