Создайте прокручиваемую сетку

Вы можете управлять большими наборами данных и динамическим контентом с помощью ленивых сеток, повышая производительность приложений. С помощью ленивых компонуемых сеток вы можете отображать элементы в прокручиваемом контейнере, распределенном по нескольким столбцам или строкам.

Совместимость версий

Для этой реализации требуется, чтобы для 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)
        }
    }
}
LazyListSnippets.kt

Ключевые моменты о коде

  • Составной элемент 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 каждый.

Результаты

Рисунок 1. Горизонтальная прокручиваемая сетка с использованием LazyHorizontalGrid .

Коллекции, содержащие это руководство

Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:

Списки и сетки позволяют вашему приложению отображать коллекции в визуально приятной форме, удобной для использования пользователями.
Сборник кратких руководств
Узнайте, как компонуемые функции позволяют легко создавать красивые компоненты пользовательского интерфейса на основе системы проектирования Material Design.
Сборник кратких руководств
В этой серии видеороликов представлены различные API Compose, быстро показано, что доступно и как их использовать.
Сборник кратких руководств

Есть вопросы или отзывы

Перейдите на нашу страницу часто задаваемых вопросов и узнайте о кратких руководствах или свяжитесь с нами и сообщите нам свои мысли.
Перейти к часто задаваемым вопросам Оставить отзыв