FlowRow с переносом чипов
Создайте настоящую компоновку с переносом с нуля.
«FlowRow с переносом чипов» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Как работает Flow Row
Строка с переносом размещает дочерние элементы слева направо, а затем переносит их на новую строку, когда заканчивается доступная ширина. Идеально подходит для тегов и фильтров. 🏷️
Начните с компонуемого элемента Layout
Инструмент Вам уже знаком: компонуемый элемент Layout. Логика переноса полностью определяется тем, как Вы измеряете и размещаете дочерние элементы.
Layout(content, modifier) { measurables, constraints ->
}Измеряйте дочерние элементы без жёстких ограничений
Измеряйте каждый элемент с ограничением родителя maxWidth, но без минимального значения, чтобы элементы подстраивались под содержимое, а не растягивались на всю ширину.
val placeables = measurables.map {
it.measure(constraints.copy(minWidth = 0))
}Отслеживайте текущую ширину строки
Перебирайте размещаемые элементы и храните текущую ширину строки. Каждый добавленный элемент увеличивает её на собственную ширину.
Переносите элементы при переполнении строки
Если добавление следующего элемента превысит maxWidth, сбросьте ширину строки и опуститесь на высоту самого высокого элемента завершённой строки.
if (rowWidth + placeable.width > maxWidth) {
y += rowHeight
rowWidth = 0
}Запоминайте позицию каждого элемента
По мере перебора сохраняйте выбранные координаты x и y каждого элемента в списке. На этапе размещения Вы воспроизведёте эти позиции.
Вычислите общую высоту
После последней строки высота компоновки равна итоговой координате y плюс высота этой строки. Ширина просто равна максимальной ширине ограничения.
Сообщите размер и разместите элементы
Вызовите layout с общей шириной и высотой, затем переберите сохранённые позиции и вызовите placeRelative для каждого размещаемого элемента.
layout(maxWidth, totalHeight) {
placeables.forEachIndexed { i, p ->
p.placeRelative(positions[i])
}
}Добавьте горизонтальные интервалы
Добавляйте небольшой промежуток между элементами, прибавляя значение spacing к ширине строки после каждого элемента. Вертикальные промежутки работают так же.
Compose также предоставляет FlowRow
Официальный FlowRow из библиотеки компоновки делает всё это за Вас. Создав его самостоятельно, Вы увидите, как именно работает эта магия. ✨
FlowRow { Chip("Kotlin"); Chip("Compose") }Вы создали настоящую компоновку
Вы измерили дочерние элементы, переносили строки по ширине и вручную разместили каждый элемент. Это созданная с нуля собственная компоновка промышленного уровня. 🎉
Быстрая проверка
Что заставляет строку с переносом начать новую строку?
Итоги: FlowRow с переносом элементов
Вы измеряли элементы без жёстких ограничений, отслеживали ширину строки и при переполнении переносили элементы на новую строку, а затем размещали каждый из них. Это FlowRow, созданный с нуля. ✅
Изучай Kotlin с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «FlowRow с переносом чипов» бесплатный?
Да — полный текст урока «FlowRow с переносом чипов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.
Чему я научусь в уроке «FlowRow с переносом чипов»?
Создайте настоящую компоновку с переносом с нуля. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?
Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «FlowRow с переносом чипов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Модель измерения и размещения
- Написание компоновки Composable
- Ограничения и внутренние измерения
- FlowRow с переносом чипов