Jetpack Compose中Card内Modifier.fillMaxHeight()失效问题求助

问题描述 #

在Jetpack Compose的Card组件内的Row中添加竖线Divider时，使用fillMaxHeight()无法让Divider充满Row高度，实际未显示竖线。尝试动态设置Divider高度的方法仅初始状态生效，调换onSizeChanged与height()顺序后还抛出java.lang.IllegalArgumentException: Can't represent a size of 348160 in Constraints异常。

问题原因 #

1. Card的Modifier配置错误：给Card设置.fillMaxSize()会让Card占满整个屏幕高度，既不符合列表Item的布局需求，还会导致Row的高度约束异常。
2. Row的高度无有效约束：默认Row的高度为wrapContentSize，Divider的fillMaxHeight()没有明确的高度参照，无法正常拉伸。

解决方案 #

步骤1：修正Card的Modifier #

移除Card的.fillMaxSize()，替换为.fillMaxWidth()，让Card宽度充满父容器，高度由内部内容自适应：

Card (
    elevation = 10.dp,
    modifier = modifier
        .fillMaxWidth() // 替换fillMaxSize为fillMaxWidth
        .padding(
            top = 30.dp,
            start = 30.dp,
            end = 30.dp,
            bottom = 30.dp
        )
        .border(
            width = 0.8.dp,
            color = Color.DarkGray,
            shape = RectangleShape
        )
) {
    // 内部Row代码
}

步骤2：给Row添加IntrinsicSize约束 #

给Row设置.height(IntrinsicSize.Max)，让Row先测量所有子项的最大高度，再将自身高度同步为该值，此时Divider的fillMaxHeight()就能正确拉伸：

Row(
    modifier = Modifier.height(IntrinsicSize.Max) // 添加该行约束
) {
    Text(
        text = testText,
        fontSize = 30.sp,
        modifier =
            Modifier
                .padding(horizontal = 15.dp, vertical = 20.dp)
                .weight(0.5f)
    )

    Divider(
        modifier = Modifier
            .fillMaxHeight() // 现在可正常生效
            .width(0.5.dp),
        color = Color.Black
    )
}

完整修正后的List函数代码 #

@Composable
fun List(
    modifier: Modifier = Modifier
) {
    val testList = listOf("test1", "test2")

    LazyColumn(
        modifier = modifier
    ) {
        items(testList) { testText ->
            Card(
                elevation = 10.dp,
                modifier = modifier
                    .fillMaxWidth()
                    .padding(
                        top = 30.dp,
                        start = 30.dp,
                        end = 30.dp,
                        bottom = 30.dp
                    )
                    .border(
                        width = 0.8.dp,
                        color = Color.DarkGray,
                        shape = RectangleShape
                    )
            ) {
                Row(modifier = Modifier.height(IntrinsicSize.Max)) {
                    Text(
                        text = testText,
                        fontSize = 30.sp,
                        modifier =
                            Modifier
                                .padding(horizontal = 15.dp, vertical = 20.dp)
                                .weight(0.5f)
                    )

                    Divider(
                        modifier = Modifier
                            .fillMaxHeight()
                            .width(0.5.dp),
                        color = Color.Black
                    )
                }
            }
        }
    }
}

额外说明 #

• IntrinsicSize.Max 的作用是让Composable先完成子项的尺寸测量，取最大高度作为自身高度，确保子项可以用fillMaxHeight()填充整个容器高度。
• 避免在LazyColumn的Item中使用fillMaxSize()，这会导致Item占满剩余屏幕空间，破坏列表的滚动布局逻辑。

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