Контейнеры макета

Jetpack Compose предоставляет несколько контейнеров макетов, которые помогут вам структурировать и упорядочить компоненты пользовательского интерфейса. Базовые composable-функции макета, такие как Row и Column, подходят для простых задач, но для многих приложений требуются более адаптивные контейнеры, которые могут подстраиваться под разные размеры экрана и растущие объемы пользовательских данных.

К контейнерам макета относятся:

• Ленивые списки и сетки. Компоненты, такие как LazyColumn, LazyRow и LazyVerticalGrid, которые эффективно отображают большие наборы данных или наборы данных динамического размера, составляя и размещая только элементы, видимые в данный момент в области просмотра.
• Пейджер. Контейнеры, такие как HorizontalPager и VerticalPager, которые позволяют пользователям пролистывать или прокручивать страницы контента.
• Поточные макеты. Адаптивные одномерные контейнеры (FlowRow и FlowColumn), которые автоматически переносят элементы, не помещающиеся в строку или столбец, на следующую строку или в следующий столбец.
• Сетка. Гибкая двумерная структура, в которой элементы отображаются в виде нескольких столбцов или строк, адаптирующихся к размеру контейнера.
• FlexBox. Адаптивный контейнер, созданный на основе CSS Flexbox. Он позволяет точно настраивать перенос, увеличение, уменьшение и выравнивание элементов по главной и поперечной осям, чтобы заполнить доступное пространство.

Выберите правильный контейнер макета

При создании макетов в Compose выбор между базовыми и более продвинутыми контейнерами макетов зависит от вашего дизайна, от того, должны ли элементы переноситься при ограниченном пространстве, и от того, как элементы динамически изменяют размер.

В следующей таблице приведены возможности каждого из контейнеров макета Compose 1D:

Контейнер	Перенос элементов на новые строки	Рост по товарам	Уменьшение размера отдельных элементов	Начальный размер для каждого объекта	Элементы увеличиваются, чтобы заполнить доступное пространство в нескольких строках	Как изменить порядок элементов	Отложенная загрузка	Для чего подходит:
Строка / столбец	❌	✅ (через weight) только одна строка	❌	❌	❌	❌	❌	Одинаковые строки с небольшим фиксированным количеством элементов. Элементы помещаются в доступные границы и не требуют переноса на несколько строк.
FlowRow / FlowColumn	✅	Доступ ограничен	❌	❌	Частичное	❌	❌	Заменено на FlexBox.
LazyRow / LazyColumn	❌	❌	❌	❌	❌	❌	✅	Длинные или бесконечные списки элементов, в которых для оптимизации производительности необходимо отображать только видимые элементы. Динамические или большие наборы данных, прокручиваемые в одном направлении.
FlexBox	✅	✅	✅	✅	✅	✅	❌	Макеты, требующие адаптивных возможностей, таких как указание начального размера, динамическое увеличение/уменьшение элемента (grow/shrink), визуальное изменение порядка (order) или выравнивание по поперечной оси на уровне элемента (alignSelf). Размещение объектов разного размера.

В таблице ниже приведены возможности Grid и других похожих composable-функций.

Контейнер	Строгое соответствие 2D	Объединение элементов (столбцы)	Объединение элементов (строки)	Отложенная загрузка	Для чего подходит:
Сетка	✅	✅ (через GridArea)	✅	❌	Структурные двухмерные макеты, в которых все элементы находятся на экране и требуют явного горизонтального и вертикального выравнивания. Адаптивная реструктуризация макетов для разных размеров экрана.
LazyVerticalGrid	✅	✅ (через span)	❌	✅	Ленты с вертикальной прокруткой и большие каталоги, в которых нужны столбцы.
LazyStaggeredGrid	❌ (только 1D)	Частично (только на весь экран)	❌	✅	Прокрутка лент с элементами разной высоты.
LazyHorizontalGrid	✅	❌	✅	✅	Карусели с горизонтальной прокруткой или данные, разбитые на несколько строк.
Как объединить строки и столбцы	❌	❌	❌	❌	Простая сборка компонентов, например размещение текстовой метки рядом со значком.