Jetpack Compose中Surface无法填充Row整高问题求助

问题分析 #

在LazyColumn的卡片布局中，Row包含两列内容：第一列因包含LazyRow导致无法使用Modifier.height(IntrinsicSize.Min)（Lazy类组件不支持固有尺寸测量，会触发崩溃）；第二列的Surface组件无法通过fillMaxHeight()自动填充第一列的高度，手动监听尺寸变化又会在无LazyRow时出现高度异常。

方案一：使用ConstraintLayout（推荐） #

通过ConstraintLayout的约束关系，强制第二列的高度与第一列完全匹配，同时避免固有尺寸测量的限制。

修改后的完整代码：

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 2.dp, vertical = 4.dp),
    elevation = 4.dp
) {
    ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
        val (leftColumn, rightSurface) = createRefs()

        // 第一列内容
        Column(
            modifier = Modifier
                .fillMaxWidth(0.7f)
                .constrainAs(leftColumn) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    start.linkTo(parent.start)
                }
        ) {
            Surface(
                color = MaterialTheme.colors.primaryVariant,
                modifier = Modifier.fillMaxWidth(),
            ) {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    Text(
                        text = historyOrderItem.id.toString(),
                        style = MaterialTheme.typography.h6,
                        modifier = Modifier.padding(4.dp)
                    )
                    Text(
                        text = historyOrderItem.status,
                        style = MaterialTheme.typography.h6,
                        modifier = Modifier.padding(4.dp)
                    )
                }
            }
            LazyRow(modifier = Modifier.fillMaxWidth()) {
                items(items = historyOrderItem.items, key = { it.itemId }) {
                    ItemDoneOrderShort(it)
                }
            }
            Spacer(modifier = Modifier.weight(1f))
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.End
            ) {
                TextButton(onClick = { onCopy(historyOrderItem) }) {
                    Text(
                        text = "ПОВТОРИТЬ",
                        style = MaterialTheme.typography.h6,
                        textAlign = TextAlign.Right,
                        maxLines = 1,
                    )
                }
            }
        }

        // 第二列Surface
        Surface(
            color = MaterialTheme.colors.colorAccent,
            modifier = Modifier.constrainAs(rightSurface) {
                top.linkTo(leftColumn.top)
                bottom.linkTo(leftColumn.bottom)
                start.linkTo(leftColumn.end)
                end.linkTo(parent.end)
                width = Dimension.fillToConstraints
            }
        ) {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Text(
                    text = "Оплатить",
                    textAlign = TextAlign.Center,
                    style = MaterialTheme.typography.h5,
                )
            }
        }
    }
}

原理说明

• 通过constrainAs将第二列的top和bottom与第一列的对应位置绑定，确保两者高度完全一致。
• 无需依赖固有尺寸测量，彻底避免LazyRow带来的崩溃问题。
• 布局逻辑清晰，适配有无LazyRow的场景，不会出现高度异常。

方案二：Row配合weight修饰符 #

如果不想引入ConstraintLayout，可以通过Row的weight分配宽度，同时让第二列填充Row的高度。

修改后的核心代码：

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 2.dp, vertical = 4.dp),
    elevation = 4.dp
) {
    Row(modifier = Modifier.fillMaxWidth()) {
        // 第一列：占70%宽度，高度由内容撑开
        Column(Modifier.weight(0.7f)) {
            // 原第一列内容（Surface、LazyRow、Spacer、TextButton）
        }

        // 第二列：占30%宽度，填充Row的全部高度
        Surface(
            color = MaterialTheme.colors.colorAccent,
            modifier = Modifier.weight(0.3f).fillMaxHeight()
        ) {
            // 原第二列内容
        }
    }
}

原理说明

• 第一列通过weight(0.7f)占据70%宽度，其高度由内部的LazyRow、按钮等内容撑开。
• 第二列通过weight(0.3f)占据剩余宽度，fillMaxHeight()会自动填充Row的高度（即第一列的高度）。
• 第一列内的Spacer(modifier = Modifier.weight(1f))会让Column填充Row的高度，确保内容布局正常。

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