LazyColumn — cos'è, elenchi efficienti in Compose

Cos'è LazyColumn in Jetpack Compose?

LazyColumn è una funzione composable della libreria Foundation Compose che visualizza un elenco verticale di elementi con caricamento pigro: vengono creati e composti solo gli elementi visibili sullo schermo o nelle vicinanze (zona di prefetch). LazyColumn è apparso in Compose 1.0 (2021) insieme a LazyRow (elenco orizzontale) e LazyVerticalGrid (griglia).

Il caricamento pigro funziona attraverso il meccanismo SubcomposeLayout: LazyColumn misura lo spazio disponibile, richiede l'intervallo visibile a LayoutInfo e compone solo gli elementi in quell'intervallo. Gli elementi che escono dallo schermo abbandonano la composizione (eccetto il buffer di prefetch). Secondo Google (Android Performance, 2026), LazyColumn mantiene 60 FPS durante lo scorrimento di un elenco di 10000+ elementi su dispositivi di fascia media.

Differenza con Column + ScrollState

Column con scorrimento verticale è una disposizione normale di tutti gli elementi uno sotto l'altro con il modificatore verticalScroll applicato. Column non è pigra: tutti gli elementi figlio vengono composti immediatamente, anche se non sono visibili. Per un elenco di 200+ elementi, Column causa un notevole ritardo all'avvio. LazyColumn compone solo gli elementi visibili + buffer (1 schermo avanti/indietro per impostazione predefinita), rendendolo indispensabile per elenchi lunghi.

items API: binding dei dati all'elenco

items API è un insieme di funzioni di estensione per LazyColumn che accettano un elenco di dati e un descrittore DSL per ogni elemento. Le funzioni principali sono: items(count, key, itemContent) per un numero fisso, items(list, key, itemContent) per un elenco, itemsIndexed(list, key, itemContent) con indice. Il parametro key è obbligatorio per le prestazioni — fornisce a Compose un identificatore stabile dell'elemento.

// LazyColumn di base con itemContent
@Composable
fun ArticleList(articles: List<Article>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        // Header — non pigro, sempre all'inizio
        item {
            Text("Ultimi articoli", style = MaterialTheme.typography.headlineMedium)
        }

        // Elenco articoli con chiave per id
        items(articles, key = { it.id }) { article ->
            ArticleCard(
                title = article.title,
                summary = article.summary,
                onClick = { onArticleClick(article.id) }
            )
        }

        // Footer con indicatore di caricamento
        item {
            CircularProgressIndicator(
                modifier = Modifier.fillMaxWidth().padding(16.dp)
            )
        }
    }
}

// Elemento elenco personalizzato
@Composable
fun ArticleCard(title: String, summary: String, onClick: () -> Unit) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .clickable(onClick = onClick)
    ) {
        Column(modifier = Modifier.padding(12.dp)) {
            Text(text = title, style = MaterialTheme.typography.titleMedium)
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = summary, style = MaterialTheme.typography.bodyMedium)
        }
    }
}

item {} vs items(): usa item {} per elementi singoli sempre presenti nell'elenco (intestazione, piè di pagina, separatori). Usa items() per un elenco di dati dinamico. items() accetta un Iterable o Int e un blocco DSL che viene chiamato per ogni elemento. Combina item e items in un unico LazyColumn: l'ordine delle chiamate determina l'ordine di visualizzazione.

LazyListState: gestione della posizione di scorrimento

LazyListState è un oggetto che memorizza lo stato dell'elenco: posizione corrente di scorrimento (firstVisibleItemIndex, firstVisibleItemScrollOffset), elementi visibili (layoutInfo) e metodi di scorrimento programmatico (scrollToItem, animateScrollToItem). LazyListState viene creato tramite rememberLazyListState() e passato a LazyColumn tramite il parametro state.

// LazyColumn con preservazione della posizione di scorrimento
@Composable
fun ScrollingList(items: List<Item>) {
    val listState = rememberLazyListState()

    Box(modifier = Modifier.fillMaxSize()) {
        LazyColumn(state = listState) {
            items(items, key = { it.id }) { item ->
                ListItemView(item = item)
            }
        }

        // Pulsante "Su" appare dopo il 10° elemento
        val showButton by remember {
            derivedStateOf { listState.firstVisibleItemIndex > 10 }
        }

        AnimatedVisibility(visible = showButton) {
            FloatingActionButton(
                modifier = Modifier
                    .align(Alignment.BottomEnd)
                    .padding(16.dp),
                onClick = {
                    coroutineScope.launch {
                        listState.animateScrollToItem(0)
                    }
                }
            ) {
                Icon(Icons.Default.KeyboardArrowUp, "In alto")
            }
        }
    }
}

// Ottenere informazioni sugli elementi visibili
@Composable
fun ListDebugInfo(listState: LazyListState) {
    val visibleItems = listState.layoutInfo.visibleItemsInfo
    val totalItems = listState.layoutInfo.totalItemsCount
    val firstItem = visibleItems.firstOrNull()?.index
    val lastItem = visibleItems.lastOrNull()?.index

    Text("Mostra $firstItem–$lastItem di $totalItems")
}

Lo scorrimento programmatico viene eseguito tramite funzioni suspend di listState: scrollToItem(index, scrollOffset) — movimento istantaneo (senza animazione), animateScrollToItem(index) — con animazione. Per lo scorrimento da una coroutine, usa LaunchedEffect o coroutineScope.launch. Importante: non chiamare funzioni suspend dalla composizione (dentro @Composable) — usa lambda (onClick, LaunchedEffect).

LazyColumn vs RecyclerView: confronto degli approcci

LazyColumn e RecyclerView risolvono lo stesso problema — visualizzazione efficiente di elenchi lunghi. La differenza sta nell'architettura: RecyclerView usa ViewHolder e Adapter (vista Android classica), LazyColumn usa funzioni composable dichiarative senza XML o ViewHolder. La scelta dipende dallo stack tecnologico del progetto: Compose vs UI basata su View.

Raccomandazione di Google (Android Developers, 2026): per i nuovi progetti su Jetpack Compose, usa LazyColumn. Per i progetti basati su View, usa RecyclerView. LazyColumn richiede Compose, che aggiunge circa 3–5 MB all'APK — tienilo in considerazione quando supporti dispositivi vecchi. Se un progetto utilizza già il sistema View, LazyColumn non può coesistere sullo stesso schermo con un layout XML senza AndroidView — in questi casi, è più semplice rimanere con RecyclerView.

LazyVerticalGrid e LazyHorizontalGrid: griglie

LazyVerticalGrid è una versione di LazyColumn per griglie con numero fisso di colonne. LazyHorizontalGrid è una griglia orizzontale con righe fisse. Entrambi i componenti utilizzano gli stessi principi di caricamento pigro e la stessa API items di LazyColumn. Il parametro columns determina il numero di colonne tramite GridCells.Fixed(N) o GridCells.Adaptive(minSize).

// Griglia con colonne adattive
@Composable
fun PhotoGrid(photos: List<Photo>) {
    LazyVerticalGrid(
        columns = GridCells.Adaptive(minSize = 128.dp),
        contentPadding = PaddingValues(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(photos, key = { it.id }) { photo ->
            AsyncImage(
                model = photo.url,
                contentDescription = photo.title,
                modifier = Modifier.aspectRatio(1f)
            )
        }
    }
}

// Elenco orizzontale (LazyRow)
@Composable
fun CategoryCarousel(categories: List<Category>) {
    LazyRow(
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(categories, key = { it.id }) { category ->
            FilterChip(
                selected = category.isSelected,
                onClick = { onCategoryClick(category.id) },
                label = { Text(category.name) }
            )
        }
    }
}

GridCells.Adaptive calcola automaticamente il numero di colonne in base alla dimensione minima della cella. Ad esempio, GridCells.Adaptive(128.dp) su uno schermo largo 360 dp posiziona 2 colonne, su un tablet da 600 dp — 4 colonne. GridCells.Fixed(2) mostra sempre esattamente 2 colonne. Adaptive è preferibile per l'adattamento multi-schermo — si adatta automaticamente alla larghezza dello schermo senza media query.

Prestazioni di LazyColumn: key, contentType, prefetch

Le prestazioni di LazyColumn dipendono da tre fattori: stabilità della chiave (key), tipo di contenuto (contentType) e buffer di prefetch (beyondBounds). Per impostazione predefinita, LazyColumn bufferizza 1 schermo avanti e 1 indietro. Google (Android Developers, 2026) raccomanda di configurare questi parametri per elenchi con diversi tipi di elementi o composizione complessa.

// LazyColumn ottimizzata con contentType e prefetch
@Composable
fun OptimizedFeed(items: List<FeedItem>) {
    val listState = rememberLazyListState()

    LazyColumn(
        state = listState,
        modifier = Modifier.fillMaxSize(),
        beyondBoundsPageCount = 2  // prefetch 2 schermi
    ) {
        items(
            items = items,
            key = { it.id },
            contentType = { it.type }  // divisione per tipo
        ) { item ->
            when (item) {
                is FeedItem.Post -> PostView(item)
                is FeedItem.Ad -> AdView(item)
                is FeedItem.Suggested -> SuggestedView(item)
            }
        }
    }
}

// Misurazione delle prestazioni tramite listState
@Composable
fun ScrollPerformance(listState: LazyListState) {
    val scrollInfo = listState.layoutInfo
    val visibleCount = scrollInfo.visibleItemsInfo.size
    val total = scrollInfo.totalItemsCount

    // derivedStateOf — non ricompone se il valore non è cambiato
    val scrollProgress by remember {
        derivedStateOf {
            if (total > 0) visibleCount.toFloat() / total else 0f
        }
    }

    LinearProgressIndicator(
        progress = scrollProgress,
        modifier = Modifier.fillMaxWidth().height(2.dp)
    )
}

Errori comuni: (1) mancanza di key — gli elementi vengono ricomposti a ogni modifica dell'elenco; (2) uso di mutableStateListOf senza flussi snapshot — le modifiche potrebbero non essere tracciate; (3) chiamata di funzioni suspend all'interno di itemContent — interrompe la composizione; (4) senza contentType per tipi misti — Compose riutilizza la composizione degli annunci per i post di testo, causando artefatti visivi. In IT Sectr aggiungiamo contentType a tutti gli elenchi con tre o più tipi di contenuto.