如何调整 LazyVerticalGrid 中项目的高度？答案

【问题标题】：How to level the height of items in LazyVerticalGrid?如何调整 LazyVerticalGrid 中项目的高度？
【发布时间】：2021-12-12 16:28:59
【问题描述】：

我正在使用LazyVerticalGrid 来显示项目列表。

LazyVerticalGrid(
            cells = GridCells.Fixed(2),
            modifier = Modifier.fillMaxSize(),
            state = listState,
            content = {
                    Box(modifier = boxModifier) {
                        ProductItemView(
                            item = items[index]
                        )
                    }
                }
            }
        )

有时我的一些物品比它们旁边的物品高（附件）

如何调整所有项目的高度？还是我应该使用VerticalGrid() 以外的东西？

【问题讨论】：

您是否在 Jetpack Compose 的 1.2.0-alpha05 版本中尝试过这个，他们刚刚使 LazyVerticalGrid 稳定。如果它仍然存在将其作为错误提出可能是个好主意

标签： android kotlin android-jetpack-compose android-jetpack

【解决方案1】：

发生的情况是哪个项目的文本大于一行，它会扩展

为了保持统一的高度，您必须为每个孩子设置一个最小高度Box，为此，您可以使用Modifier，如下所示。

//Adjust 200.dp as your requirement
Box(modifier = Modifier.height(200.dp))

这样，无论内容的长度/大小如何，每个框都将具有相同的高度。

【讨论】：

【解决方案2】：

如果您为您的 Composables 提供一个固定的高度，您最终可能会得到 Composables 不显示您的子 Composables 的某些部分，在您的情况下，它可能是 Textcomposable。

第一个简单的方法是设置一个最小高度Modifier.heightIn(min = 200.dp)，这可能会根据您的 Box 对齐方式在您的可组合物下方或上方留下空间，如果您的可组合物高于 200.dp，它将具有与您相同的效果现在，所以它不是或添加任何固定高度是不够的。

更好的方法是使用 onTextLayout 来获取文本的行数和高度以添加较少的行数作为填充

@Composable
fun GridSnackCardWithTitle(
    modifier: Modifier = Modifier,
    snack: Snack,
) {
    Column(
        modifier = modifier
            .heightIn(min = 200.dp)
            .shadow(1.dp, shape = RoundedCornerShape(5.dp))
            .background(Color.White),

        ) {

        val density = LocalDensity.current.density

        Image(
            contentScale = ContentScale.None,
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(1f)
                .clip(RoundedCornerShape(8.dp))
                .clickable { },
            painter = rememberImagePainter(
                data = snack.imageUrl,
                builder = {
                    placeholder(drawableResId = R.drawable.placeholder)
                }
            ),
            contentDescription = null
        )

        Spacer(modifier = Modifier.height(4.dp))
        var padding by remember { mutableStateOf(0.dp) }
        Text(
            modifier = Modifier.padding(start = 4.dp, end = 4.dp, bottom = padding),
            text = "Snack ${snack.name}",
            fontSize = 20.sp,
            onTextLayout = {
                val lineCount = it.lineCount
                val height = (it.size.height / density).dp

                println("lineCount: $lineCount, Height: $height")
                padding = if (lineCount > 1) 0.dp else height
            }
        )
        
    }
}

结果

【讨论】：

【解决方案3】：

通常通过将Modifier.fillMaxHeight 添加到包含项目并将Modifier.height(IntrinsicSize.Max) 添加到容器来解决此类问题。

问题在于，在这种情况下，我们无法访问容器 Modifier：在 Compose 1.1.* 源代码中有一个 Row，但我们无法通过修饰符，而在 1.2.* 中根本没有 Row。

我认为这样的要求是公平的，但现在你可以在LazyColumn自己做：

val columnsCount = 2
val itemsCount = 10
LazyColumn(
    modifier = Modifier.fillMaxSize()
) {
    items((itemsCount + 1) / columnsCount) { i ->
        Row(Modifier.height(IntrinsicSize.Max)) {
            for (j in 0 until columnsCount) {
                val index = i * columnsCount + j
                if (index < itemsCount) {
                    Text(
                        LoremIpsum(index).values.first(),
                        modifier = Modifier
                            .fillMaxHeight()
                            .weight(1f)
                            .background(
                                when (index % 3) {
                                    0 -> Color.LightGray
                                    1 -> Color.DarkGray
                                    else -> Color.Gray
                                }
                            )
                    )
                } else {
                    Spacer(Modifier.weight(1f))
                }
            }
        }
    }
}

【讨论】：