Вы можете управлять большими наборами данных и динамическим контентом с помощью ленивых сеток, повышая производительность приложений. С помощью ленивых компонуемых сеток вы можете отображать элементы в прокручиваемом контейнере, распределенном по нескольким столбцам или строкам.
Совместимость версий
Для этой реализации требуется, чтобы для minSDK вашего проекта был установлен уровень API 21 или выше.
Зависимости
Определите ориентацию сетки
Компонуемые элементы LazyHorizontalGrid
и LazyVerticalGrid
обеспечивают поддержку отображения элементов в сетке. Ленивая вертикальная сетка отображает элементы в контейнере с возможностью вертикальной прокрутки, распределенном по нескольким столбцам, тогда как ленивые горизонтальные сетки имеют такое же поведение на горизонтальной оси.
Создайте прокручиваемую сетку
Следующий код создает сетку горизонтальной прокрутки с тремя столбцами:
@Composable fun ScrollingGrid() { val itemsList = (0..15).toList() val itemModifier = Modifier .border(1.dp, Color.Blue) .width(80.dp) .wrapContentSize() LazyHorizontalGrid( rows = GridCells.Fixed(3), horizontalArrangement = Arrangement.spacedBy(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp) ) { items(itemsList) { Text("Item is $it", itemModifier) } item { Text("Single item", itemModifier) } } }
Ключевые моменты о коде
- Составной элемент
LazyHorizontalGrid
определяет горизонтальную ориентацию сетки.- Чтобы создать вертикальную сетку, используйте вместо этого
LazyVerticalGrid
.
- Чтобы создать вертикальную сетку, используйте вместо этого
- Свойство
rows
определяет, как упорядочить содержимое сетки.- Для вертикальной сетки используйте свойство
columns
, чтобы указать расположение.
- Для вертикальной сетки используйте свойство
-
items(itemsList)
добавляетitemsList
вLazyHorizontalGrid
. Лямбда отображает компонуемыйText
для каждого элемента и устанавливает текст в описание элемента. -
item()
добавляет один элемент вLazyHorizontalGrid
, а лямбда-выражение визуализирует одиночныйText
, который можно компоновать аналогичноitems()
. -
GridCells.Fixed
определяет количество строк или столбцов. Чтобы создать сетку с максимально возможным количеством строк, задайте количество строк с помощью
GridCells.Adaptive
.В следующем коде значение
20.dp
указывает, что каждый столбец имеет размер не менее 20.dp и все столбцы имеют одинаковую ширину. Если ширина экрана 88.dp, имеется 4 столбца по 22.dp каждый.
Результаты
LazyHorizontalGrid
. Коллекции, содержащие это руководство
Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=ru)
Отобразить список или сетку
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=ru)
Отображать интерактивные компоненты
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=ru)