Jetpack Compose中如何让FlowRow最后一项宽度与其他项一致？

你的问题出在使用weight(0.5f)时，FlowRow最后一行只有单个item时，weight会让它占据整行宽度，导致和前一行item宽度不一致。以下两种方案可以解决：

方案1：固定每个Item的宽度（保留FlowRow） #

通过BoxWithConstraints获取父容器的可用宽度，计算出每个item的固定宽度，确保所有item宽度一致：

BoxWithConstraints(modifier = Modifier.padding(horizontal = 12.dp)) {
    // 计算每个item宽度：(总宽度 - 水平间距) / 列数
    val itemWidth = (maxWidth - 16.dp) / 2
    FlowRow(
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        (0..4).forEach { _ ->
            Card(
                shape = MaterialTheme.shapes.large,
                elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
                modifier = Modifier.width(itemWidth)
            ) {
                Column(modifier = Modifier.padding(12.dp)) {
                    // 内容区域
                }
            }
        }
    }
}

方案2：改用LazyVerticalGrid（更适配固定列数场景） #

如果你的布局是固定2列的网格，LazyVerticalGrid比FlowRow更适合这种场景，自动保证每列宽度一致：

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    modifier = Modifier.padding(horizontal = 12.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp),
    horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    items(5) {
        Card(
            shape = MaterialTheme.shapes.large,
            elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
            modifier = Modifier.fillMaxWidth()
        ) {
            Column(modifier = Modifier.padding(12.dp)) {
                // 内容区域
            }
        }
    }
}

说明 #

• 方案1保留FlowRow的使用，通过手动计算固定宽度实现一致效果；
• 方案2更符合固定列数的网格布局需求，代码更简洁，无需手动计算宽度。

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