Flutter中GridView.Builder出现范围错误：仅显示8项而非20项

核心原因：数组越界 #

从代码和错误截图来看，触发范围错误的直接原因是**containerColors数组长度远小于universityListTitle的长度**（你提到有20个院校数据，但containerColors仅包含8项）。当index遍历到8及以上时，访问containerColors[index]就会触发数组越界错误，渲染流程被中断，导致网格只显示到出错前的8项。

另外代码里存在变量名拼写不一致问题：univerSityListSubtitle首字母为小写u，和universityListTitle的命名风格不符，同时也要确认这个数组的长度是否和universityListTitle一致，避免同样的越界问题。

修复方案 #

方案1：循环复用颜色（推荐） #

如果不需要为每个院校单独设置唯一颜色，可以用取模操作循环复用containerColors里的颜色，彻底避免越界：

color: containerColors[index % containerColors.length].withOpacity(1.0),

方案2：统一数组长度 #

调整containerColors和univerSityListSubtitle的长度，确保它们和universityListTitle的长度（20）完全一致。

方案3：限制最大渲染数量 #

如果暂时无法调整数组长度，可以将itemCount设置为所有数据数组中最短的那个，避免越界：

itemCount: [
  universityListTitle.length,
  univerSityListSubtitle.length,
  containerColors.length
].reduce((a, b) => a < b ? a : b),

额外优化：修正变量名拼写 #

将univerSityListSubtitle改为universityListSubtitle，保持变量命名风格统一，降低后续维护出错概率。

修复后的完整代码示例 #

GridView.builder(
  physics: const NeverScrollableScrollPhysics(),
  shrinkWrap: true,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: MediaQuery.of(context).orientation == Orientation.landscape
        ? 3
        : 2,
    crossAxisSpacing: 8,
    mainAxisSpacing: 8,
    childAspectRatio: 2 / 1,
  ),
  itemCount: universityListTitle.length,
  itemBuilder: (context, index) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        color: containerColors[index % containerColors.length].withOpacity(1.0),
      ),
      child: Center(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                universityListTitle[index],
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 13,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            Text(
              universityListSubtitle[index],
              textAlign: TextAlign.center,
              style: const TextStyle(
                color: Colors.white,
                fontSize: 13,
              ),
            ),
          ],
        ),
      ),
    );
  },
),

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