填充 LazyVerticalGrid Item 中的剩余空间

Question

我使用 LazyVerticalGrid 来显示具有动态内容的项目，但我希望始终具有相同的高度，无论项目大小如何。如何实现这一点？现在，即使列包含 fillMaxHeight 修饰符，结果也是相同的。

@Composable
fun VerticalGrid() {
    val products = listOf(
        Product("Product 11111111111111", "100"),
        Product("Product 2222222222222222", "200"),
        Product("Product 3", "300"),
        Product("Product 4", "400"),
        Product("Product 5", "500"),
        Product("Product 6", "600"),
        Product("Product 7", "700"),
        Product("Product 8", "800")
    )
    LazyVerticalGrid(
        cells = GridCells.Fixed(2),
        verticalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.size_small)),
        horizontalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.size_small)),
        modifier = Modifier.background(colorResource(id = R.color.light_gray_background))
    ) {
        itemsIndexed(products) { _, item ->
            Column(
                modifier = Modifier
                    .background(Color.White)
                    .padding(16.dp)
                    .fillMaxHeight()
            ) {
                Text(text = item.title)
                Text(text = item.price)
            }
        }
    }
}

Answer 1

您需要将 minLines = 2, maxLines = 2 添加到最后一个文本视图。 所以

Text(text = item.price)

将会

Text(text = item.price, minLines = 2, maxLines = 2)

这有什么帮助？ minLine = 2，确保无论如何我们总是至少绘制 2 条线，这使得卡片的大小始终是静态的，以防价格不覆盖 2 条线。 maxLine = 2，确保我们始终拥有最多 2 行，即使价格值超过 2 行。

奖励：您可以使用溢出 = TextOverflow.Ellipsis 或溢出 = TextOverflow.Clip 来剪辑价格数据（如果到达第二行末尾并且仍然需要打印价格），或者在第二行末尾添加省略号.

Answer 2

将 LazyVerticalGrid 更改为 LazyVerticalStaggeredGrid

https://developer.android.com/jetpack/compose/lists#lazy-staggered-grid

LazyVerticalStaggeredGrid(
columns = StaggeredGridCells.Adaptive(200.dp),
verticalItemSpacing = 4.dp,
horizontalArrangement = Arrangement.spacedBy(4.dp),
content = {
    items(randomSizedPhotos) { photo ->
        AsyncImage(
            model = photo,
            contentScale = ContentScale.Crop,
            contentDescription = null,
            modifier = Modifier.fillMaxWidth().wrapContentHeight()
        )
    }
},
modifier = Modifier.fillMaxSize()

）