如何使LazyVerticalGrid的所有Item保持统一高度？

要让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(), // 强制填充单元格高度，同一行高度会对齐到最高条目
                verticalArrangement = Arrangement.SpaceBetween // 让价格固定在条目底部（可选）
            ) {
                Text(
                    text = item.title,
                    maxLines = 2, // 限制标题最大行数
                    overflow = TextOverflow.Ellipsis // 溢出时显示省略号
                )
                Text(text = item.price)
            }
        }
    }
}

核心要点：

• fillMaxHeight()让Column填充整个网格单元格，同一行的单元格高度会自动对齐到该行最高条目，保证同行高度一致
• maxLines和TextOverflow.Ellipsis避免长文本无限制撑高容器
• Arrangement.SpaceBetween可让价格固定在底部，视觉上更整齐

方案二：设置固定高度 #

如果需要所有条目高度完全统一（不受内容长度影响），可以直接给条目容器设置固定高度，配合文本溢出处理：

@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)
                    .height(120.dp), // 设置固定高度，所有条目高度完全一致
                verticalArrangement = Arrangement.SpaceBetween
            ) {
                Text(
                    text = item.title,
                    maxLines = 2,
                    overflow = TextOverflow.Ellipsis
                )
                Text(text = item.price)
            }
        }
    }
}

这种方式适合对条目高度有明确要求的场景，需要根据内容预估合适的高度值。

内容的提问来源于stack exchange，提问作者Delug3