Flutter中召唤师熟练度ID匹配英雄API获头像遇RangeError问题

核心问题分析 #

你遇到的RangeError本质是错误地用同一个索引关联了两个长度、顺序都不匹配的列表：

• SummonerMastery列表是玩家拥有熟练度的英雄集合，数量远少于全英雄列表
• 直接用index同时访问SummonerMasteries和ChampionList.data，要么拿到错误的英雄，要么因索引超出某一列表长度触发越界错误

正确实现思路 #

1. 将英雄数据转为字典映射：把全英雄列表转换成以championId（整数类型）为键、英雄对象为值的Map，这样可以通过ID快速查找对应英雄，避免索引依赖
2. 以熟练度列表为基准构建GridView：GridView的itemCount使用熟练度列表的长度，每个item根据当前熟练度的championId从字典中查找英雄

代码修改示例 #

1. 预处理英雄数据为Map（可在RemoteService获取数据后执行）

// 假设你已获取到ChampionList实例
Map<int, Champion> championMap = {};
// 遍历全英雄列表，将key转成int后作为Map的键
ChampionList.data.forEach((key, champion) {
  int championId = int.parse(champion.key);
  championMap[championId] = champion;
});

2. 修改GridView.builder实现

GridView.builder(
  // 用召唤师熟练度列表的长度作为item数量，而非全英雄列表
  itemCount: summonerMasteries.length,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemBuilder: (context, index) {
    // 获取当前索引对应的熟练度数据
    final mastery = summonerMasteries[index];
    // 通过championId从映射中查找对应的英雄
    final matchedChampion = championMap[mastery.championId];

    return Card(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          if (matchedChampion != null)
            Image.network(
              // 拼接英雄头像URL
              'http://ddragon.leagueoflegends.com/cdn/12.22.1/img/champion/${matchedChampion.image.full}',
              width: 80,
              height: 80,
              fit: BoxFit.cover,
            ),
          // 显示英雄名称，找不到则显示默认文本
          Text(matchedChampion?.name ?? '未知英雄'),
          Text('熟练度等级: ${mastery.championLevel}'),
        ],
      ),
    );
  },
)

关键注意点 #

• 类型匹配：DDragon API返回的英雄key是字符串类型，而SummonerMastery的championId是整数，必须转换为同一类型才能正确匹配
• 空安全处理：添加null判断，避免因API数据缺失或匹配失败导致的崩溃

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