Jetpack：029

编程入门行业动态更新时间:2024-10-08 03:26:52

Jetpack：029

文章目录

1. 概念介绍
2. 使用方法
3. 代码与效果
- 3.1 示例代码
- 3.2 运行效果
4. 内容总结

我们在上一章回中介绍了Jetpack中Card相关的内容，本章回中主要介 网格布局。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的网格布局是一种类似表格的布局组件，它提供像表格一样的窗口，开发人员只需要在窗口中放入组件就可以，如果大家有使用Android View开发程序的验验，那么肯定使用过这样的布局。该布局常用的场景是浏览图片，多张图片按照行和列的方式一起呈现在我们面前。

在Jetpack Compse中使用可组合函数LazyVerticalGrid和LazyHorizontalGrid实现垂直和水平方向的网格布局，本章回中将详细介绍它们的使用方法。

2. 使用方法

可组合函数LazyVerticalGrid提供了相关的参数来控制自己，下面是该函数中常用的参数：

columns参数:该参数主要用来网络中的行数和列数；
verticalArrangement参数: 主要用来控制垂直方向内容之间的间隔；
horizontalArrangement参数: 主要用来控制水平方向内容之间的间隔；
content参数:该参数主要用来存放网格布局中的其它组件；

上面的这些参数中，我们重点介绍content参数和columns参数。

content参数的类型是可组合函数，它通过item或者items函数来添加其它组件，我们在介绍LazyColumn可组合函数介绍过，因此大家可以参考我们在LazyColumn内容中的介绍。

接着看一下columns参数，它是GridCells类型，它提供两种布局形式，详细如下：

Adaptive：它只保证网格中各个成员的列间隔，自动排列每行的成员数量；
Fixed:它只保证网格中的列的数量，成员之间的列间隔大小自动计算；

大家现在可能觉得有些抽象，我们将在后面小节中通过代码来演示，下面是程序运行的效果图，这样可能更加直观地说明问题。

该图的上半部分是使用Adaptive实现的效果，图中每一行之间的间隔是固定的，但是网格布局中的列数是自动计算出来的。图中下半部分是使用Fixed实现的效果，图中列的数量是固定的，但是每一列之间的间隔是自动计算出来的。

我们在这里只介绍了LazyVerticalGrid函数的用法，LazyHorizontalGrid函数的用法和它完全相同，不同之处在它提供的是水平方向的网格布局，它提供的参数主要控制网格中的行，因此，我们就不再详细介绍了，大家可以自行去实践。

3. 代码与效果

介绍完可组合函数的用法后，我们通过具体的示例代码来演示网格布局的使用方法。

3.1 示例代码

@Composable
fun Grids() {LazyVerticalGrid(//在保证内容间隔为100dp的前提下，自动排列行和列中的内容，数量不确定columns = GridCells.Adaptive(100.dp)) {items(count = 9, itemContent = {Image(painter = painterResource(id = R.drawable.ic_logo), contentDescription = null) } )}
}@Composable
fun GridsAnother() {LazyVerticalGrid(//在保证内容数量的前提下，自动排列行和列中的内容之间的间隔，间隔不确定//它有一个共同的缺点，无法调整行距columns = GridCells.Fixed(4)) {items(count = 9, itemContent = {Image(painter = painterResource(id = R.drawable.ic_logo), contentDescription = null)} )}
}@Composable
fun GridWithCard() {var index: IntLazyVerticalGrid(columns = GridCells.Fixed(3),horizontalArrangement = Arrangement.spacedBy(8.dp),verticalArrangement = Arrangement.spacedBy(4.dp)) {items(count = 9,
//            span = { GridItemSpan(it) },//通过span创建不规则的Grid，itemContent = {index = it+1//通过各种计算，card不适合放在Grid中，因为它的大小受Grid影响，会自动调节//不过使用水平和垂直的参数后，可以有效地控制各个Card之间的间隔Card ( modifier = Modifier.size(40.dp),){  //通过Box让Card中的内容居中显示Box(modifier = Modifier.align(Alignment.CenterHorizontally)){Text(text = "$index")}}})}
}

我们在上面的示例代码封装了三个独立的函数，前两个函数主要演示columns参数的两种不同设置方式，它们运行效果图在前面的小节中给大家演示过。