Jetpack Compose Academy · Урок

items и itemsIndexed

Отображайте набор строк с данными.

«items и itemsIndexed» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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. 🎯

Часто задаваемые вопросы

Урок «items и itemsIndexed» бесплатный?

Да — полный текст урока «items и itemsIndexed» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.

Чему я научусь в уроке «items и itemsIndexed»?

Отображайте набор строк с данными. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?

Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «items и itemsIndexed»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?

Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Jetpack Compose Academy