Jetpack Compose嵌套Lazy组件崩溃，求无三方库解决方案

问题原因 #

崩溃是因为LazyColumn给子项的高度约束是无限的，而嵌套在其中的LazyVerticalStaggeredGrid作为滚动组件，无法在无限高度约束下完成测量，这是Compose滚动组件的硬性限制。

无第三方库的解决方案（推荐） #

用单个LazyVerticalStaggeredGrid承载所有内容，把目录标题设置为跨列的item，紧跟对应目录的图片列表。这种方式既保留了「目录名+对应文件」的结构，又避免了嵌套滚动组件。

修改后的代码 #

@Composable
fun ImageScreen(modifier: Modifier = Modifier) {
    val viewModel: MainViewModel = hiltViewModel()
    val imagesState by viewModel.imageList.collectAsState()
    val directoryList = imagesState.toList()

    LazyVerticalStaggeredGrid(
        columns = StaggeredGridCells.Fixed(2),
        modifier = modifier.fillMaxSize(),
        contentPadding = PaddingValues(8.dp),
        verticalItemSpacing = 8.dp,
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        directoryList.forEach { (directoryName, images) ->
            // 目录标题：跨2列显示
            item(span = { StaggeredGridItemSpan.FullLine }) {
                Text(
                    text = directoryName,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 12.dp, horizontal = 4.dp),
                    style = MaterialTheme.typography.titleMedium
                )
            }
            // 当前目录下的图片列表
            items(images) { image ->
                ImageItem(
                    modifier = Modifier
                        .clickable {}
                        .fillMaxWidth(),
                    image = image
                )
            }
        }
    }
}

方案说明 #

• 通过StaggeredGridItemSpan.FullLine让目录标题占据整行宽度，实现和原需求一致的视觉层级
• 单个滚动容器避免了无限高度约束问题，同时保持了懒加载特性，性能不受影响

备选方案（不推荐） #

如果必须使用LazyColumn作为外层容器，需要给嵌套的LazyVerticalStaggeredGrid设置固定高度，但这种方式灵活性差（比如图片高度不固定时会出现显示问题）：

// 假设每个ImageItem高度固定为150.dp，间距8.dp
LazyColumn(modifier = modifier.fillMaxSize()) {
    items(directoryList) { directoryWithList ->
        Text(text = directoryWithList.first)
        val imageCount = directoryWithList.second.size
        val rows = (imageCount + 1) / 2 // 每行2个，计算总行数
        val gridHeight = rows * (150.dp + 8.dp) - 8.dp // 计算网格总高度（减去最后一行底部间距）
        
        LazyVerticalStaggeredGrid(
            columns = StaggeredGridCells.Fixed(2),
            modifier = Modifier.height(gridHeight) // 设置固定高度
        ) {
            items(directoryWithList.second) { image ->
                ImageItem(modifier = Modifier.clickable {}, image = image)
            }
        }
    }
}

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