Адаптивные и фиксированные ячейки сетки
Настройте адаптацию сеток к ширине экрана.
«Адаптивные и фиксированные ячейки сетки» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Два способа задать размер ячеек
Сетка должна знать ширину своих столбцов. Compose предлагает две стратегии: фиксированное количество столбцов с помощью Fixed и минимальную ширину с помощью Adaptive. 📐
Итоги по Fixed
Вы уже познакомились с GridCells.Fixed(n). Он всегда отображает n столбцов, поэтому ячейки увеличиваются или уменьшаются, чтобы соответствовать ширине экрана.
columns = GridCells.Fixed(3)Проблема Fixed
На телефоне 3 столбца выглядят отлично. На планшете те же 3 столбца становятся неудобно широкими. Fixed не адаптируется к большим экранам.
Знакомьтесь: Adaptive
С помощью GridCells.Adaptive(minSize) Вы задаёте минимальную ширину ячейки. Compose размещает максимально возможное количество столбцов, а затем растягивает их, чтобы заполнить доступное пространство.
columns = GridCells.Adaptive(minSize = 120.dp)Как Adaptive определяет количество столбцов
Compose делит доступную ширину на значение minSize, чтобы определить количество столбцов. На более широком экране автоматически помещается больше столбцов.
Адаптация по умолчанию
Адаптивные сетки хорошо выглядят на телефонах, складных устройствах и планшетах без дополнительного кода. Одно значение minSize подходит для любого экрана. 📱
Выбор minSize
Выберите такое значение minSize, при котором содержимое остаётся читаемым даже в самой маленькой ячейке. Слишком маленькое значение создаёт тесноту, а слишком большое приведёт к тому, что на небольших телефонах останется один столбец.
GridCells.Adaptive(minSize = 96.dp)Когда Fixed всё же лучше
Используйте Fixed, когда дизайн требует точного количества столбцов, например для календарной недели из 7 дней, которая всегда должна состоять ровно из 7 столбцов.
GridCells.Fixed(7)Сочетание с интервалами
Обе стратегии сочетаются с параметрами размещения. В Adaptive значение minSize измеряется до добавления интервалов, поэтому оставьте место для зазоров.
LazyVerticalGrid(
columns = GridCells.Adaptive(120.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) { }LazyHorizontalGrid тоже
Те же ячейки Fixed и Adaptive работают в LazyHorizontalGrid, который прокручивается вбок и заполняет строки сверху вниз.
LazyHorizontalGrid(rows = GridCells.Adaptive(80.dp)) { }Простое правило
По умолчанию выбирайте Adaptive для галерей содержимого, чтобы они масштабировались на разных устройствах. Используйте Fixed для макетов, которым требуется точное и осмысленное количество столбцов.
Быстрая проверка
Выберите адаптивный вариант.
Итоги: размеры ячеек
Вы сравнили точное количество столбцов в Fixed с минимальной шириной ячеек в Adaptive. Adaptive масштабируется на разных устройствах, а Fixed фиксирует заданное количество столбцов. 🎯
Изучай Kotlin с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «Адаптивные и фиксированные ячейки сетки» бесплатный?
Да — полный текст урока «Адаптивные и фиксированные ячейки сетки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.
Чему я научусь в уроке «Адаптивные и фиксированные ячейки сетки»?
Настройте адаптацию сеток к ширине экрана. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?
Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Адаптивные и фиксированные ячейки сетки»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Галереи LazyVerticalGrid
- LazyRow для каруселей
- Адаптивные и фиксированные ячейки сетки
- Состояние прокрутки и программная прокрутка