Jetpack Compose：如何让Row内Card匹配父布局高度？

你在Jetpack Compose的Row布局里使用Card时，遇到了高度不一致的问题——第一个Card因包含圆形进度条高度更高，其他Card无法自动填充整个Row的高度。以下是具体解决方法：

要让所有Card填满Row的高度，需要从两方面调整：

• 让Row基于最高子项的高度确定自身高度，并允许子项填充该高度
• 让Card及其内部布局填充可用高度

修改后的代码 #

fun RowOne(mainActivityViewModel: MainActivityViewModel) {
    val circleSize = 120.dp
    val strokeWidth = 2.dp
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Max) // 让Row高度匹配最高子项
    ) {
        Card(
            modifier = Modifier
                .padding(5.dp)
                .weight(1F)
                .fillMaxHeight(), // 填充Row高度
            elevation = CardDefaults.cardElevation(4.dp)
        ) {
            Column(
                modifier = Modifier.fillMaxHeight(), // 填充Card高度
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                TextSubHeader("Battery Percentage")
                circularBatteryBar(circleSize, mainActivityViewModel, strokeWidth)
            }
        }
        Card(
            modifier = Modifier
                .padding(5.dp)
                .weight(1F)
                .fillMaxHeight(), // 填充Row高度
            elevation = CardDefaults.cardElevation(4.dp)
        ) {
            Column(
                modifier = Modifier.fillMaxHeight(), // 填充Card高度
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center // 让内容居中显示
            ) {
                TextSubHeader("Battery Health")
            }
        }
        Text(
            modifier = Modifier
                .weight(1F)
                .padding(5.dp)
                .fillMaxHeight(), // 同样填充高度
            text = "AAAAA",
            textAlign = TextAlign.Center,
            maxLines = 1,
            verticalAlignment = Alignment.CenterVertically // 文本垂直居中
        )
    }
}

关键调整说明 #

1. Row设置IntrinsicSize.Max：让Row的高度由内部最高的子元素决定，为所有子项提供统一的高度基准。
2. 子项添加fillMaxHeight()：Card和Text组件通过这个修饰符填充Row的整体高度，避免高度不一致。
3. Card内部Column填充高度：给Column添加fillMaxHeight()后，可通过verticalArrangement控制内容的垂直位置（比如居中、顶部对齐），避免内容仅占Card顶部区域。

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