如何解决Jetpack Compose懒加载布局嵌套崩溃问题

核心问题 #

你嵌套的内部LazyVerticalGrid使用了fillMaxSize()修饰符，这会导致Compose无法正确计算布局尺寸，触发无限测量循环，最终引发崩溃。懒加载布局（LazyVerticalGrid、LazyColumn等）必须有明确的尺寸约束，不能让它无限制填充父布局。

具体修复步骤 #

1. 移除内部懒加载布局的fillMaxSize()，替换为固定高度或自适应内容的约束，比如指定具体高度、使用heightIn()限制范围，或用wrapContentHeight()自适应内容高度。
2. 删除重复的statusBarsPadding()，外层布局已设置该修饰符，内部无需重复添加，避免多余内边距影响布局。

修复后的代码示例：

LazyVerticalGrid(
    modifier = Modifier
        .fillMaxSize()
        .statusBarsPadding(),
    columns = GridCells.Fixed(2)
) {
    item(span = { GridItemSpan(2) }) {
        SearchBar(onClick = { mainNavController.navigate(ScreenDestination.Search) }) {
            Text(text = stringResource(id = R.string.search_hint))
        }
    }
    item {
        LazyVerticalGrid(
            modifier = Modifier
                .height(200.dp) // 指定固定高度，或替换为wrapContentHeight()自适应
                .fillMaxWidth(), // 宽度填充父项可用空间
            columns = GridCells.Fixed(4)
        ) {
            item(span = { GridItemSpan(2) }) {
                Button(onClick = { /*TODO*/ }) {
                    Text(text = "test")
                }
            }
            item(span = { GridItemSpan(2) }) {
                Button(onClick = { /*TODO*/ }) {
                    Text(text = "test")
                }
            }
        }
    }
}

额外优化建议 #

• 若需内部懒加载布局自适应内容高度，使用wrapContentHeight()时，要确保内部内容不会无限延伸（避免嵌套更多无约束的懒加载布局）。
• 优先用单个LazyVerticalGrid结合GridItemSpan控制不同项的跨度，替代嵌套多个懒加载布局的方案，既能避免测量冲突，也能提升布局性能。

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