android - 如何调整 LazyVerticalGrid 中项目的高度？

Question

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

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

有时我的一些元素比它们旁边的元素高(附件)

如何调整所有项目的高度？或者我应该使用 VerticalGrid 以外的其他东西吗？ ()?

Answer 1

如果你给你的可组合物一个固定的高度，你最终可能会得到不显示你 child 可组合物的某些部分的可组合物，在你的情况下它可能是 Text可组合的。
第一种简单的方法是设置最小高度 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
            }
        )
        
    }
}

结果