Grid — это API Jetpack Compose, позволяющий гибко реализовывать двухмерную компоновку. С помощью этого API вы можете отображать элементы в многоколоночной или многострочной компоновке, адаптирующейся к доступному размеру контейнера.
Grid . Чем Grid отличается от аналогичных компонуемых объектов?
Compose уже предлагает аналогичные компоненты, такие как LazyVerticalGrid . Эти компоненты в основном предназначены для визуализации больших однородных наборов данных — например, для отображения каталога контента в приложении для потокового видео. Эти компоненты НЕ предназначены для структурной компоновки экрана или сложных компонентов.
Также можно реализовать двухмерную компоновку, комбинируя несколько элементов типа Row и Column . Однако у этого подхода есть некоторые недостатки, такие как глубокая иерархия и сложности с адаптацией.
В таблице ниже представлен обзор того, какие шаблоны подходят для каждого API:
| Компонент | Цель |
|---|---|
LazyVerticalGrid , LazyStaggeredGrid , LazyHorizontalGrid | Визуализация больших однородных наборов данных, требующих отложенной загрузки. |
Row , Column , FlexBox | Одномерная планировка |
Grid | Двумерная компоновка |
Терминология
Ознакомьтесь со следующей терминологией, чтобы понять, как работает Grid .
Линия сетки
Сетка состоит из линий, идущих горизонтально и вертикально. Если ваша сетка имеет три строки, то в ней четыре горизонтальные линии, включая линию после последней строки. На следующем изображении каждая пунктирная линия представляет собой линию сетки:
Трасса сетки
Полоса сетки — это пространство между двумя линиями сетки. Полоса строки находится между двумя горизонтальными линиями, а полоса столбца — между двумя вертикальными линиями. Чтобы определить размер этих полос, задайте им размер при создании сетки.
Сетчатая ячейка
Ячейка сетки — это точка пересечения строки и столбца.
Сетка
Сетчатая область состоит из нескольких ячеек. Вы можете определить сетку, задав элементу возможность занимать несколько дорожек.
Разрыв в сети
Промежуток между дорожками сетки — это промежутк между ними. В этот промежуток нельзя поместить элемент пользовательского интерфейса, но можно перекрыть его.
