Jetpack Compose中LazyVerticalGrid嵌套滚动报错的解决求助

问题原因 #

你同时使用了两个垂直滚动容器：外层Column的.verticalScroll()和内层的LazyVerticalGrid。Column的滚动修饰符会给子组件传递无限高度约束，而LazyVerticalGrid本身依赖确定的高度范围实现滚动加载，因此触发了测量错误。

解决方案 #

1. 移除冗余的外层滚动 #

直接去掉Column的.verticalScroll(rememberScrollState())修饰符，让LazyVerticalGrid自身处理滚动逻辑。如果Column内还有其他非滚动的头部/尾部内容，直接放在Column中，给LazyVerticalGrid所在的Surface添加.weight(1f)，确保网格占满剩余可用高度。

2. 实现多选状态管理 #

用mutableStateListOf维护选中项的状态，将选中状态和切换逻辑传递给列表项组件。

修改后的完整代码示例 #

父组件布局 #

@Composable
fun MultiSelectGridScreen(list: List<String>) {
    // 维护选中项的状态
    val selectedItems = remember { mutableStateListOf<String>() }

    Column(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(10.dp),
    ) {
        // 可选：非滚动的头部内容
        // Text(
        //     text = "多选网格",
        //     modifier = Modifier.padding(16.dp),
        //     fontSize = 20.sp,
        //     fontWeight = FontWeight.Bold
        // )

        Surface(
            color = Color.White,
            modifier = Modifier.weight(1f) // 让网格占满剩余高度
        ) {
            LazyVerticalGrid(
                state = rememberLazyGridState(),
                modifier = Modifier.fillMaxSize(),
                columns = GridCells.Fixed(2),
                contentPadding = PaddingValues(8.dp) // 可选：添加内边距优化布局
            ) {
                // 可选：网格内部的滚动头部
                // item {
                //     Text(
                //         text = "网格头部",
                //         modifier = Modifier.fillMaxWidth().padding(16.dp),
                //         fontSize = 16.sp
                //     )
                // }

                itemsIndexed(items = list) { index, item ->
                    val isSelected = selectedItems.contains(item)
                    ListItemView_New(
                        text = item,
                        model = list[index],
                        position = index,
                        isSelected = isSelected,
                        onSelectionChanged = { targetItem, selected ->
                            if (selected) {
                                selectedItems.add(targetItem)
                            } else {
                                selectedItems.remove(targetItem)
                            }
                        }
                    )
                }

                // 可选：网格内部的滚动尾部
                // item {
                //     Text(
                //         text = "网格尾部",
                //         modifier = Modifier.fillMaxWidth().padding(16.dp),
                //         fontSize = 16.sp
                //     )
                // }
            }
        }

        // 可选：非滚动的尾部内容，比如显示选中数量
        // Text(
        //     text = "已选中 ${selectedItems.size} 项",
        //     modifier = Modifier.padding(16.dp),
        //     fontSize = 16.sp,
        //     color = Color.Black
        // )
    }
}

列表项组件 #

@Composable
fun ListItemView_New(
    model: String,
    position: Int,
    text: String,
    isSelected: Boolean,
    onSelectionChanged: (String, Boolean) -> Unit
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(vertical = 6.dp, horizontal = 16.dp)
            .clickable { 
                // 点击整个列表项也能切换选中状态
                onSelectionChanged(model, !isSelected) 
            },
    ) {
        Checkbox(
            checked = isSelected,
            onCheckedChange = { onSelectionChanged(model, it) },
            colors = CheckboxDefaults.colors(
                checkedColor = Color.Black,
                uncheckedColor = Color.Gray,
            ),
            modifier = Modifier.align(Alignment.CenterStart),
        )

        Text(
            text = text,
            fontSize = 18.sp,
            color = if (isSelected) Color.Black else Color.Gray,
            fontWeight = FontWeight.Normal,
            modifier = Modifier
                .align(Alignment.CenterStart)
                .padding(start = 48.dp),
        )
    }
}

关键说明 #

• 去掉外层滚动后，LazyVerticalGrid可以正确获取确定的高度约束，解决测量错误。
• 用mutableStateListOf管理选中状态，能自动触发Compose重组，更新UI。
• 给列表项添加.clickable修饰符，提升用户体验，点击文字区域也能切换选中状态。

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