LazyColumn no Jetpack Compose — o que é, propriedades e como funciona

O que é LazyColumn no Jetpack Compose

LazyColumn é uma função composable que implementa uma lista vertical rolável com carregamento diferido. Ao contrário do Column, que renderiza todos os filhos de uma vez, o LazyColumn cria apenas os elementos que estão dentro da viewport.

O mecanismo de carregamento diferido no LazyColumn é baseado na reutilização de elementos: quando um elemento é ocultado durante a rolagem, sua composição e layout podem ser reutilizados para um novo elemento exibido. Isso economiza memória e tempo de CPU, especialmente em listas longas.

De acordo com o Android Developers Blog, 2024, o LazyColumn pode lidar eficientemente com listas de dezenas de milhares de elementos sem degradação significativa de desempenho. Cada elemento no LazyColumn tem uma chave (key) que ajuda o Compose a identificar e preservar o estado do elemento quando a lista muda.

Assinatura básica do LazyColumn

LazyColumn aceita os parâmetros modifier, state, contentPadding, reverseLayout, verticalArrangement e horizontalAlignment. O conteúdo é definido em um bloco lambda por meio das funções 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 = "Item $item")
        }
    }
}

Parâmetros do LazyColumn: items e item

O bloco DSL do LazyColumn fornece as funções items e item para adicionar conteúdo. items aceita uma coleção de dados, uma chave e uma função fábrica para criar elementos. item adiciona um único elemento estático à lista.

itemsIndexed é uma variante de items que passa o índice do elemento além dos dados. Isso é útil quando você precisa saber a posição do elemento sem cálculo separado. items(size) aceita apenas o número de elementos e uma fábrica sem vincular a uma coleção.

O parâmetro key em items identifica exclusivamente cada elemento. De acordo com as Material Design Guidelines, 2025, as chaves melhoram o desempenho ao atualizar e animar elementos, pois o Compose pode rastrear o movimento ou alteração de um elemento específico pela chave.

Exemplo com diferentes tipos de elementos

A função items com contentType permite que o LazyColumn otimize a reutilização de elementos de diferentes tipos. No exemplo abaixo, cabeçalhos de seção e linhas regulares são usados em uma única lista.

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

LazyListState e gerenciamento de rolagem

LazyListState é um objeto de estado do LazyColumn que rastreia a posição atual de rolagem, o primeiro elemento visível e o deslocamento. Pode ser criado por meio de rememberLazyListState() e passado para o parâmetro state do LazyColumn.

LazyListState fornece os métodos animateScrollToItem e scrollToItem para rolagem programática até um elemento específico. animateScrollToItem cria uma animação suave de rolagem, enquanto scrollToItem rola instantaneamente. Ambos os métodos exigem chamada dentro de uma corrotina no CompositionContext.

De acordo com Android Developers, 2024, o LazyListState também contém layoutInfo, que fornece informações sobre os elementos visíveis — seus índices, deslocamentos e tamanhos. Isso é útil para implementar análises, rastreamento de visualizações ou rolagem infinita.

Exemplo com rolagem programática

Neste exemplo, o LazyColumn é controlado por meio do LazyListState. Um botão rola a lista até o elemento com índice 50 com uma animação suave.

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

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

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

Otimização de desempenho do LazyColumn

O principal fator de desempenho do LazyColumn é o uso correto de chaves. Cada elemento deve ter uma chave estável única por meio do parâmetro key. Sem chaves, o Compose não pode reutilizar corretamente os elementos quando os dados mudam, levando à recomposição.

contentType informa ao LazyColumn quais elementos têm o mesmo tipo de layout. Quando dois elementos com o mesmo contentType entram no pool de reciclagem, o LazyColumn pode reutilizar seu layout sem recomposição. De acordo com o Android Developers Blog, 2024, o contentType melhora o desempenho em 30–50% em listas com diferentes tipos de elementos.

Para o LazyColumn, também é importante evitar parâmetros instáveis em funções fábrica. Cada vez que um parâmetro de elemento muda, o Compose recompõe esse elemento. Usar remember e derivedStateOf para valores estáveis reduz o número de recomposições.

Tabela de fatores de desempenho

Sticky headers e seções no LazyColumn

stickyHeader é uma função DSL do LazyColumn que fixa um cabeçalho de seção no topo da lista durante a rolagem. Quando a próxima seção atinge o topo, seu cabeçalho substitui o atual. Esse comportamento é familiar aos usuários de listas de contatos e calendários.

stickyHeader aceita uma chave e uma função fábrica, semelhante ao item. Ao contrário de um item normal, o stickyHeader permanece visível enquanto rola pelo conteúdo de sua seção. Quando uma seção é totalmente rolada, o cabeçalho da próxima seção empurra o anterior para fora.

De acordo com as Material Design Guidelines, 2025, os sticky headers melhoram a navegação em listas longas e reduzem a carga cognitiva do usuário. Para implementar um sticky header, basta envolver um cabeçalho de seção em stickyHeader na posição correta em relação aos elementos 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))
            }
        }
    }
}