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

Использовать сетку очень просто, она выглядит почти так же, как использование ленивого столбца, с добавленным описанием для вертикальных столбцов сетки.

Используя Jetpack Compose, вы можете сделать это с помощью пары строк кода. Итак, давайте посмотрим, как это сделать:

@Composable
fun GridItem(title: String, modifier: Modifier = Modifier) {
    Text(
        text = title,
        textAlign = TextAlign.Center,
        modifier = modifier
            .fillMaxWidth()
            .background(whiteColor)
            .wrapContentWidth(),
        color = MaterialTheme.colorScheme.primary
    )
}
LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(list) { item ->
        GridItem(item)
    }
}

      
                

                    
                    
                
            

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    verticalArrangement = Arrangement.spacedBy(16.dp),
    horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    items(list) { item ->
        GridItem(item)
    }
}

      
                

                    
                    
                
            

Мы можем определить пользовательские диапазоны

LazyVerticalGrid(
    columns = GridCells.Fixed(3),
    verticalArrangement = Arrangement.spacedBy(16.dp),
    horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    items(list.size, span = {GridItemSpan(if(it == 0) 3 else 1)}) { idx ->
        GridItem(list[idx])
    }
}

Оставайтесь на связи

• LinkedIn