Jetpack：029-Jetpack中的网格布局

news2024/11/26 20:39:45

文章目录

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: Int
    LazyVerticalGrid(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")
                }
            }
        })
    }
}