嵌套Column的LazyColumn报无限高度约束错误，该如何解决？

问题场景 #

我开发了一个包含多个子组件的Column布局页面，结构如下：

Child1()
Child2()
Child3()

其中Child3内部包含一个LazyColumn，代码如下：

Card(
    modifier = Modifier
        .padding(vertical = 16.dp)
        .fillMaxWidth(),
    shape = MaterialTheme.shapes.large,
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.onSecondaryContainer
    )
) {
    LazyColumn(modifier = Modifier.fillMaxHeight()) {
        // 列表内容项
    }
}

运行时抛出错误：

Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll())

尝试将LazyColumn移至顶部，但数据属于Child3，该如何解决？

解决方案 #

1. 给Child3分配剩余可用空间 #

问题核心是外层Column未限制高度，导致内部LazyColumn拿到无限高度约束。给Child3的Card或LazyColumn添加weight(1f)，让它占据Column剩余的所有空间：

// 修改Child3中的Card modifier
Card(
    modifier = Modifier
        .padding(vertical = 16.dp)
        .fillMaxWidth()
        .weight(1f), // 添加weight属性
    shape = MaterialTheme.shapes.large,
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.onSecondaryContainer
    )
) {
    LazyColumn(modifier = Modifier.fillMaxHeight()) {
        // 列表内容项
    }
}

2. 用LazyColumn替换外层Column #

如果整个页面需要滚动，直接把外层Column换成LazyColumn，将Child1、Child2、Child3都作为独立item放入：

LazyColumn {
    item { Child1() }
    item { Child2() }
    item { Child3() } // Child3内部的LazyColumn可正常保留，外层LazyColumn会给它合理的高度约束
}

3. 给Child3设置固定高度 #

如果不需要Child3占据剩余空间，可直接给它设置固定高度或比例高度：

Card(
    modifier = Modifier
        .padding(vertical = 16.dp)
        .fillMaxWidth()
        .height(300.dp), // 固定高度
    shape = MaterialTheme.shapes.large,
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.onSecondaryContainer
    )
) {
    LazyColumn(modifier = Modifier.fillMaxHeight()) {
        // 列表内容项
    }
}

也可以用fillMaxHeight(0.6f)让它占据父布局60%的高度。

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