LazyVerticalGrid
、 LazyHorizontalGrid
用于显示 Grid 列表;
GridCells.Fixed()
设置要显示的列数;
rememberLazyGridState()
获取滚动状态;
horizontalArrangement
、verticalArrangement
设置间距。
@Composable
fun GridScreen(
modifier: Modifier = Modifier
) {
val lazyVerticalGridState = rememberLazyGridState()
val lazyHorizontalState = rememberLazyGridState()
val list = listOf(1,2,3,4,5,6,7,8,9,10)
Column(
modifier = modifier.fillMaxWidth()
) {
LazyHorizontalGrid(
modifier = modifier.height(120.dp),
rows = GridCells.Fixed(2),
state = lazyHorizontalState,
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
content = {
items(
items = list,
){item ->
Text(
text = "Grid $item",
modifier = modifier
.height(50.dp)
.width(100.dp)
.background(Color.Yellow),
)
}
}
)
LazyVerticalGrid(
columns = GridCells.Fixed(2),
state = lazyVerticalGridState,
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
content = {
items(
items = list,
){item ->
Text(
text = "Grid $item",
modifier = modifier
.height(200.dp)
.width(100.dp)
.background(Color.Green),
)
}
}
)
}
}
参考文档 列表和网格。
Demo:https://github.com/hefengbao/jetpack-compose-demo ,获取代码:
git clone git@github.com:hefengbao/jetpack-compose-demo.git
有0条评论