Jetpack Compose：LazyVerticalGrid嵌套可滚动Column无法滚动问题

出现这个错误是因为Jetpack Compose不允许嵌套同方向的滚动布局（垂直方向的Column滚动和LazyVerticalGrid滚动逻辑冲突），给你两种可行的解决办法：

方法一：用LazyColumn替代外层Column（推荐） #

把原本Column里的所有元素都放到LazyColumn中，Grid也作为LazyColumn的一个子项，这样整个页面的滚动逻辑统一由LazyColumn处理，既保留Grid的懒加载性能，又能实现全页面滚动：

LazyColumn {
    // 放置原本Column里的非网格元素
    item {
        Text(text = "这是顶部的标题")
        // 其他需要展示的元素...
    }
    
    // 把LazyVerticalGrid作为LazyColumn的一个子项
    item {
        LazyVerticalGrid(columns = GridCells.Fixed(2)) {
            items(20) { index ->
                Box(
                    modifier = Modifier
                        .size(100.dp)
                        .background(Color.Gray)
                        .padding(8.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "网格项 $index")
                }
            }
        }
    }
}

方法二：禁用Grid的滚动（小数据量可用） #

如果不想改用LazyColumn，可以给LazyVerticalGrid设置userScrollEnabled = false，让它不再处理滚动，把滚动控制权交给外层的Column。但注意这种方法会让Grid失去懒加载特性，所有网格项会一次性渲染，数据量大时会有性能问题：

Column(Modifier.verticalScroll(rememberScrollState())) {
    Text(text = "顶部内容")
    // 其他元素...
    
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        modifier = Modifier.userScrollEnabled(false)
    ) {
        items(20) { index ->
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Gray)
                    .padding(8.dp),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "网格项 $index")
            }
        }
    }
}

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