Jetpack Compose：在可滚动Column中使用LazyVerticalStaggeredGrid崩溃问题解决

问题根源 #

LazyVerticalStaggeredGrid本身是自带垂直滚动功能的懒加载组件，把它嵌套在带有verticalScroll修饰符的Column中时，两个组件会同时尝试处理垂直滚动事件，且在布局测量阶段出现冲突，这就是应用崩溃的核心原因。

解决方案 #

根据你的布局需求，选择以下合适的处理方式：

1. 直接移除外层Column的滚动（仅网格内容）

如果布局里只有LazyVerticalStaggeredGrid，去掉Column的verticalScroll修饰符，让网格自身处理滚动即可：

错误示例：

Column(
    modifier = Modifier.verticalScroll(rememberScrollState())
) {
    LazyVerticalStaggeredGrid(
        columns = StaggeredGridCells.Fixed(2),
        content = {
            items(100) {
                Text("Item $it", modifier = Modifier.padding(8.dp))
            }
        }
    )
}

修正后：

LazyVerticalStaggeredGrid(
    columns = StaggeredGridCells.Fixed(2),
    modifier = Modifier.fillMaxSize()
) {
    items(100) {
        Text("Item $it", modifier = Modifier.padding(8.dp))
    }
}

2. 将额外内容整合到网格的头部/尾部（推荐）

如果Column里还有其他非滚动内容（比如标题、按钮），可以把这些内容添加到LazyVerticalStaggeredGrid的item中，并用StaggeredGridItemSpan.FullLine让内容占满整行，实现和原Column一致的布局效果，同时由网格统一处理滚动：

LazyVerticalStaggeredGrid(
    columns = StaggeredGridCells.Fixed(2),
    modifier = Modifier.fillMaxSize()
) {
    // 头部内容（占满整行）
    item(span = StaggeredGridItemSpan.FullLine) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("页面标题", fontSize = 24.sp, fontWeight = FontWeight.Bold)
            Button(onClick = { /* 执行操作 */ }) {
                Text("点击按钮")
            }
        }
    }

    // 网格列表内容
    items(100) {
        Text("Item $it", modifier = Modifier.padding(8.dp))
    }

    // 可选：尾部内容
    item(span = StaggeredGridItemSpan.FullLine) {
        Text("底部说明", modifier = Modifier.padding(16.dp))
    }
}

3. 给网格设置固定高度（特殊场景）

如果必须保留外层可滚动Column，只能给LazyVerticalStaggeredGrid设置固定高度，让Column能正确测量网格的尺寸，避免冲突。但这种方式灵活性差，不推荐作为常规方案：

Column(
    modifier = Modifier.verticalScroll(rememberScrollState())
) {
    Text("顶部固定内容", modifier = Modifier.padding(16.dp))

    LazyVerticalStaggeredGrid(
        columns = StaggeredGridCells.Fixed(2),
        modifier = Modifier
            .height(400.dp) // 设置固定高度
            .padding(8.dp)
    ) {
        items(20) {
            Text("Item $it", modifier = Modifier.padding(4.dp))
        }
    }

    Text("底部固定内容", modifier = Modifier.padding(16.dp))
}

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