LazyRow для каруселей
Создайте горизонтально прокручиваемую ленту.
«LazyRow для каруселей» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Прокрутка по горизонтали
Иногда содержимое должно перемещаться влево и вправо, например полка с фильмами. Для этого используется LazyRow — горизонтальный аналог LazyColumn. ↔️
Почему не обычная строка?
Обычная строка сразу создаёт всех дочерних элементов и не умеет прокручиваться. LazyRow прокручивается горизонтально и создаёт только видимые элементы.
Базовый LazyRow
Вы передаёте элементы в LazyRow так же, как в колонку, но они располагаются рядом, а не друг под другом.
LazyRow {
items(movies) { movie ->
MovieCard(movie)
}
}Разделяйте карточки интервалами
Карточкам карусели нужны промежутки. Используйте horizontalArrangement вместе со spacedBy, чтобы задать одинаковое расстояние между карточками.
LazyRow(
horizontalArrangement = Arrangement.spacedBy(12.dp)
) { }Отступы по краям
Добавьте contentPadding, чтобы первая карточка немного выглядывала из-за края, а не обрезалась вплотную к нему.
contentPadding = PaddingValues(horizontal = 16.dp)Задайте размер каждой карточки
Задайте каждому элементу карусели фиксированную ширину, чтобы карточки оставались одинаковыми при перелистывании.
MovieCard(movie, Modifier.width(140.dp))Фрагмент следующей карточки
Сделайте часть следующей карточки видимой, чтобы показать наличие дальнейшего содержимого. Для этого хорошо подходит немного меньшая ширина карточки относительно экрана.
val cardWidth = screenWidth * 0.8f
MovieCard(movie, Modifier.width(cardWidth))Заголовки над каруселями
Карусель обычно располагается под заголовком. Разместите LazyRow внутри колонки, а над ним добавьте заголовок Text.
Column {
Text("Trending Now")
LazyRow { items(movies) { MovieCard(it) } }
}Вложение в LazyColumn
На главном экране часто размещают много каруселей. Поместите несколько строк LazyRow внутрь родительского LazyColumn, чтобы получить ленту в стиле Netflix.
LazyColumn {
items(shelves) { shelf ->
Shelf(shelf)
}
}Каждой строке нужна ширина
LazyRow внутри LazyColumn автоматически занимает всю доступную ширину. Просто убедитесь, что родитель задаёт ему конечную ширину, относительно которой выполняется измерение.
Когда использовать LazyRow
Используйте LazyRow для полок, фильтров в виде чипов, кружков с историями и любого содержимого, которое предполагает горизонтальный свайп, а не прокрутку вниз.
Быстрая проверка
Подумайте о горизонтальной прокрутке.
Итоги: карусели
Вы создали горизонтальные полки с помощью LazyRow: элементы рядом друг с другом, интервалы, отступ в конце, карточки фиксированной ширины и вложение в ленту. 🎬
Изучай Kotlin с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «LazyRow для каруселей» бесплатный?
Да — полный текст урока «LazyRow для каруселей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.
Чему я научусь в уроке «LazyRow для каруселей»?
Создайте горизонтально прокручиваемую ленту. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?
Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «LazyRow для каруселей»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Галереи LazyVerticalGrid
- LazyRow для каруселей
- Адаптивные и фиксированные ячейки сетки
- Состояние прокрутки и программная прокрутка