LazyColumn in Jetpack Compose — cos’è, proprietà e come funziona

Cos’è LazyColumn in Jetpack Compose

LazyColumn è una funzione composable che implementa un elenco verticale scorrevole con caricamento differito. A differenza di Column, che rende tutti gli elementi figli in una volta, LazyColumn crea solo gli elementi che rientrano nell’area visibile.

Il meccanismo di caricamento differito in LazyColumn si basa sul riutilizzo degli elementi: quando un elemento viene nascosto durante lo scorrimento, la sua composizione e il suo layout possono essere riutilizzati per un nuovo elemento visualizzato. Ciò consente di risparmiare memoria e tempo CPU, specialmente negli elenchi lunghi.

Secondo Android Developers Blog, 2024, LazyColumn può gestire efficientemente elenchi di decine di migliaia di elementi senza un significativo degrado delle prestazioni. Ogni elemento in LazyColumn ha una chiave (key) che aiuta Compose a identificare e preservare lo stato dell’elemento quando l’elenco cambia.

Firma base di LazyColumn

LazyColumn accetta i parametri modifier, state, contentPadding, reverseLayout, verticalArrangement e horizontalAlignment. Il contenuto viene definito in un blocco lambda tramite le funzioni DSL items e 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 = "Elemento $item")
        }
    }
}

Parametri di LazyColumn: items e item

Il blocco DSL di LazyColumn fornisce le funzioni items e item per aggiungere contenuto. items accetta una raccolta di dati, una chiave e una funzione factory per creare elementi. item aggiunge un singolo elemento statico all’elenco.

itemsIndexed è una variante di items che passa l’indice dell’elemento oltre ai dati. Ciò è utile quando è necessario conoscere la posizione dell’elemento senza calcolo separato. items(size) accetta solo il numero di elementi e una factory senza vincolarsi a una raccolta.

Il parametro key in items identifica in modo univoco ogni elemento. Secondo le Material Design Guidelines, 2025, le chiavi migliorano le prestazioni durante l’aggiornamento e l’animazione degli elementi, poiché Compose può tracciare lo spostamento o la modifica di un elemento specifico tramite la sua chiave.

Esempio con diversi tipi di elementi

La funzione items con contentType consente a LazyColumn di ottimizzare il riutilizzo di elementi di diversi tipi. Nell’esempio seguente, intestazioni di sezione e righe regolari vengono utilizzate in un unico elenco.

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

LazyListState e gestione dello scorrimento

LazyListState è un oggetto di stato di LazyColumn che tiene traccia della posizione corrente di scorrimento, del primo elemento visibile e dell’offset. Può essere creato tramite rememberLazyListState() e passato al parametro state di LazyColumn.

LazyListState fornisce i metodi animateScrollToItem e scrollToItem per lo scorrimento programmatico verso un elemento specifico. animateScrollToItem crea un’animazione di scorrimento fluida, mentre scrollToItem scorre istantaneamente. Entrambi i metodi richiedono la chiamata all’interno di una coroutine in CompositionContext.

Secondo Android Developers, 2024, LazyListState contiene anche layoutInfo, che fornisce informazioni sugli elementi visibili — i loro indici, offset e dimensioni. Ciò è utile per implementare analisi, tracciamento delle visualizzazioni o scorrimento infinito.

Esempio con scorrimento programmatico

In questo esempio, LazyColumn viene controllato tramite LazyListState. Un pulsante scorre l’elenco fino all’elemento con indice 50 con un’animazione fluida.

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

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("Scorri a 50")
        }

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

Ottimizzazione delle prestazioni di LazyColumn

Il fattore chiave delle prestazioni di LazyColumn è l’uso corretto delle chiavi. Ogni elemento dovrebbe avere una chiave stabile univoca tramite il parametro key. Senza chiavi, Compose non può riutilizzare correttamente gli elementi quando i dati cambiano, portando alla ricomposizione.

contentType comunica a LazyColumn quali elementi hanno lo stesso tipo di layout. Quando due elementi con lo stesso contentType entrano nel pool di riciclo, LazyColumn può riutilizzare il loro layout senza ricomposizione. Secondo Android Developers Blog, 2024, contentType migliora le prestazioni del 30–50% negli elenchi con diversi tipi di elementi.

Per LazyColumn, è anche importante evitare parametri instabili nelle funzioni factory. Ogni volta che un parametro di un elemento cambia, Compose ricompone quell’elemento. L’uso di remember e derivedStateOf per valori stabili riduce il numero di ricomposizioni.

Tabella dei fattori di prestazione

Sticky headers e sezioni in LazyColumn

stickyHeader è una funzione DSL di LazyColumn che fissa un’intestazione di sezione nella parte superiore dell’elenco durante lo scorrimento. Quando la sezione successiva raggiunge la parte superiore, la sua intestazione sostituisce quella corrente. Questo comportamento è familiare agli utenti dagli elenchi di contatti e calendari.

stickyHeader accetta una chiave e una funzione factory, simile a item. A differenza di un item normale, stickyHeader rimane visibile mentre si scorre attraverso il contenuto della sua sezione. Quando una sezione viene completamente scorsa, l’intestazione della sezione successiva spinge via quella precedente.

Secondo le Material Design Guidelines, 2025, gli sticky header migliorano la navigazione negli elenchi lunghi e riducono il carico cognitivo dell’utente. Per implementare uno sticky header, basta avvolgere un’intestazione di sezione in stickyHeader nella posizione corretta rispetto agli elementi 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))
            }
        }
    }
}