Jetpack Compose Academy · Aula

items e itemsIndexed

Renderize uma coleção de linhas de dados.

items e itemsIndexed é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

From Data to Rows

Your data usually lives in a list, like a List of strings or objects. The items block turns each element into a row on screen.

The items Function

Call items with your collection and a lambda. Compose runs the lambda for each element it needs to show.

LazyColumn {
    items(fruits) { fruit ->
        Text(fruit)
    }
}

The Element Parameter

The lambda receives one element at a time. Name it clearly, like fruit or user, then build UI from that single value.

items(users) { user ->
    Text(user.name)
}

Build a Whole Row

The lambda can hold any layout, not just Text. Wrap several composables in a Row to make a richer list item.

items(users) { user ->
    Row { Text(user.name); Text(user.age.toString()) }
}

When You Need the Position

Sometimes you want the row's index, like showing a rank number or alternating colors. Plain items doesn't give you that.

Meet itemsIndexed

Use itemsIndexed when you need the position. Its lambda receives both the index and the element together.

itemsIndexed(songs) { index, song ->
    Text("$index: $song")
}

Index Comes First

Order matters: in itemsIndexed the index is the first parameter and the element is the second. Swapping them is a common slip.

itemsIndexed(tasks) { i, task ->
    Text("Step ${i + 1}: $task")
}

Numbering Made Easy

Index starts at zero, so add one for human-friendly numbering. This makes ranked or step-by-step lists feel natural.

Add a Single Fixed Row

Need one standalone row, like a header or footer? Use item (singular) for a single piece of content among your items blocks.

LazyColumn {
    item { Text("My List") }
    items(data) { Text(it) }
}

Mix and Match Freely

Inside one LazyColumn you can combine several item and items calls. They render in the order you declare them.

Pick the Right Tool

Reach for items when the element is enough, and itemsIndexed when you also need each row's position. That's the whole choice.

Quick Check

Pick the right builder for the job.

Recap: items and itemsIndexed

Use items to map data to rows, itemsIndexed when you need the position, and item for a single fixed row. Mix them freely. 🎯

Perguntas Frequentes

A aula “items e itemsIndexed” é grátis?

Sim — o texto completo de “items e itemsIndexed” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.

O que vou aprender em “items e itemsIndexed”?

Renderize uma coleção de linhas de dados. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Jetpack Compose Academy?

Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “items e itemsIndexed”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Jetpack Compose Academy?

Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Jetpack Compose Academy