为什么设置crossAxisCount≥2时GridView.builder会报RangeError索引越界错误

错误原因 #

该索引越界错误和crossAxisCount的设置没有直接关联，核心是当前代码存在两处缺失：

• 没有给GridView.builder指定itemCount参数，Flutter默认会按无限子项处理，当设置每行展示2个元素时，渲染第二列元素时会取下标为1的位置，而你的数据源总长度仅为1，就会触发越界报错。
• 若使用的是动态异步加载的数据源，itemBuilder中没有做下标合法性校验也会触发该问题。

修复方案 #

1. 给GridView.builder补充itemCount参数，取值为实际数据源的长度，示例代码如下：

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 16,
    crossAxisSpacing: 16,
  ),
  // 补充此行，将yourDataList替换为实际的数据源变量名
  itemCount: yourDataList.length,
  itemBuilder: (context, index) {
    // 此处返回你自定义的网格子项组件
    return YourGridItem(data: yourDataList[index]);
  }
)

2. 如果是异步加载的数据源，初始状态下可能为空，建议增加数据源非空判断，避免初始渲染时报错：

// 数据源非空时渲染网格，否则展示空态提示
yourDataList.isNotEmpty ? GridView.builder(
  // 其余配置和上面一致
) : const Center(child: Text("暂无数据"))

内容的提问来源于stack exchange，提问作者Saroj Kumar Padhi-421