coco
70 lines
1.9 KiB
Markdown
70 lines
1.9 KiB
Markdown
<!---
|
|
This is the API of version 1.2.0
|
|
-->
|
|
|
|
# LazyVerticalGrid
|
|
|
|
Jetpack Compose provides an API for displaying grid or grid elements.
|
|
|
|
# Example
|
|
|
|
To arrange list items in a grid, ``LazyVerticalGrid`` provides a cells parameter that controls how cells are formed into columns.
|
|
The following example displays the items in a grid, using ``GridCells.Adaptive`` to set the width of each column at least 128.dp:
|
|
|
|
|
|
|
|
<p align="left">
|
|
<img src ="{{ site.images }}/foundation/lazyverticalgrid/lazyverticalgrid.png" height=100 width=300 />
|
|
</p>
|
|
|
|
```kotlin
|
|
@Composable
|
|
fun LazyVerticalGridDemo(){
|
|
val list = (1..10).map { it.toString() }
|
|
|
|
LazyVerticalGrid(
|
|
columns = GridCells.Adaptive(128.dp),
|
|
|
|
// content padding
|
|
contentPadding = PaddingValues(
|
|
start = 12.dp,
|
|
top = 16.dp,
|
|
end = 12.dp,
|
|
bottom = 16.dp
|
|
),
|
|
content = {
|
|
items(list.size) { index ->
|
|
Card(
|
|
backgroundColor = Color.Red,
|
|
modifier = Modifier
|
|
.padding(4.dp)
|
|
.fillMaxWidth(),
|
|
elevation = 8.dp,
|
|
) {
|
|
Text(
|
|
text = list[index],
|
|
fontWeight = FontWeight.Bold,
|
|
fontSize = 30.sp,
|
|
color = Color(0xFFFFFFFF),
|
|
textAlign = TextAlign.Center,
|
|
modifier = Modifier.padding(16.dp)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
)
|
|
}
|
|
```
|
|
|
|
Apart from ``GridCells.Adaptive`` there are other types of cells that provide the number of columns per row. As follows
|
|
```
|
|
colums = GridCells.Fixed(2)
|
|
```
|
|
The above code will display 2 columns in 1 row.
|
|
|
|
|
|
|
|
## See also:
|
|
* [Official Docs]({{ site.composedoc }}/foundation/lazy/package-summary#LazyVerticalGrid)
|
|
* [Full Example Code]({{ site.samplefolder }}/foundation/LazyVerticalGridDemo.kt)
|