Jetpack Compose嵌套LazyColumn报错问题及解决方案咨询

我开发了一个Compose视图，用于展示条目列表（未来还会扩展更多内容），并编写了对应代码。发现外层带verticalScroll修饰符的Column内部包含LazyColumn时，抛出异常：

java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed

已搜索多时未找到合适方案，请问该如何解决？

相关代码 #

data class ItemHolder(
    val header: String,
    val subItems: List<String>,
    val footer: String
)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Create items
        val items = (1..20).map { itemIndex ->
            ItemHolder(
                header = "Header of $itemIndex",
                subItems =  (1..30).map { subItemIndex ->
                    "Sub item $subItemIndex of $itemIndex"
                },
                footer = "Footer of $itemIndex"
            )
        }

        setContent {
            Column(
                modifier = Modifier.verticalScroll(rememberScrollState())
            ) {
                Text(text = "Items:")
                ItemList(items = items)
            }
        }
    }
}

// Displays the list of items
@Composable
fun ItemList(items: List<ItemHolder>) {
    LazyColumn {
        items(items = items) {
            Item(item = it)
        }
    }
}

// Displays a single item
@Composable
fun Item(item: ItemHolder) {
    var subItemsVisible by remember { mutableStateOf(false) }

    // Displays the header of the item
    Row {
        Text(text = item.header)
        Button(
            onClick = { subItemsVisible = !subItemsVisible },
            content = {
                Text(text = if (subItemsVisible) "Hide" else "Show")
            }
        )
    }

    // Displays the sub items of the item
    AnimatedVisibility(visible = subItemsVisible) {
        Column {
            for (subItem in item.subItems) {
                Text(text = subItem)
            }
        }
    }

    // Displays the footer of the item
    Text(text = item.footer)
}

这个错误的核心是：带verticalScroll的Column会给子组件传递无限大的垂直高度约束，而LazyColumn本身需要有限高度来确定尺寸，两者冲突触发异常。以下是两种实用解决思路：

思路1：统一用LazyColumn承载所有内容（推荐） #

既然未来还要扩展内容，直接把顶部的标题也纳入LazyColumn是最符合Compose最佳实践的方案，彻底避免嵌套滚动组件的冲突：

修改setContent里的布局：

setContent {
    LazyColumn {
        // 添加顶部标题
        item {
            Text(text = "Items:")
        }
        // 原有条目列表
        items(items = items) {
            Item(item = it)
        }
    }
}

同时简化ItemList，让它直接渲染条目：

@Composable
fun ItemList(items: List<ItemHolder>) {
    items.forEach {
        Item(item = it)
    }
}

这种方案不仅解决了异常，还避免了嵌套滚动带来的性能损耗，适合长期扩展。

思路2：给LazyColumn设置明确高度约束 #

如果必须保留外层可滚动的Column，可以通过修饰符给LazyColumn指定有限高度：

比如设置固定最大高度：

Column(
    modifier = Modifier.verticalScroll(rememberScrollState())
) {
    Text(text = "Items:")
    ItemList(
        items = items,
        modifier = Modifier.heightIn(max = 400.dp)
    )
}

或者让ItemList接收modifier参数，在调用时传递约束：

@Composable
fun ItemList(items: List<ItemHolder>, modifier: Modifier = Modifier) {
    LazyColumn(modifier = modifier) {
        items(items = items) {
            Item(item = it)
        }
    }
}

额外优化：子项列表改用LazyColumn #

当前Item里的子项用Column循环渲染，当subItems数量较多时会影响性能，建议替换为LazyColumn：

AnimatedVisibility(visible = subItemsVisible) {
    LazyColumn {
        items(item.subItems) { subItem ->
            Text(text = subItem)
        }
    }
}

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