Flutter列表数据存在却触发RangeError(index)，ListView仅显示13条数据后报错的问题求助

从你的错误信息和代码细节来看，问题的核心大概率是部分数据的genre_ids数组为空导致的索引越界：你的MovieCard组件里直接访问tvShows[index]["genre_ids"][0]，如果某条数据的genre_ids是空数组，就会抛出RangeError (index): Invalid value: Valid value range is empty: 0——这正好匹配你遇到的场景：前13条数据的genre_ids都有值，第14条及之后的部分数据genre_ids为空，渲染到这一项时直接崩溃。

另外还有一个容易忽略的小问题：你的getPopularShows方法获取数据后，没有调用setState((){})通知Flutter更新UI。虽然你说tvShows的长度已经是20，但如果没有触发UI重建，ListView可能无法正确响应数据变化（不过这不是当前崩溃的直接原因，但也是需要修复的基础问题）。

具体修复步骤： #

1. 处理genre_ids为空的安全判断 #

修改itemBuilder里的genreId赋值逻辑，先判断数组是否为空，再取值：

genreId: tvShows[index]["genre_ids"].isNotEmpty 
    ? tvShows[index]["genre_ids"][0].toString() 
    : "0", // 这里可以替换成你需要的默认分类ID或占位值

2. 在API请求完成后触发UI更新 #

更新getPopularShows方法，确保数据获取完成后调用setState通知Flutter重建UI：

void getPopularShows() async {
  final params = {
    "api_key": "apikey",
    "language": "en-US",
    "page": "1"
  };
  Uri url = Uri.https('api.themoviedb.org', '/3/tv/popular', params);
  http.Response res = await http.get(url);
  var body = cnv.jsonDecode(res.body);
  setState(() { // 添加这行代码触发UI更新
    body["results"].forEach((value) {
      tvShows.add(value);
    });
  });
}

3. 额外优化：添加数据安全校验（可选） #

为了避免其他潜在的空值问题，你可以在itemBuilder里增加一层安全判断，比如：

itemBuilder: (context, index) {
  final show = tvShows[index];
  // 校验必要字段是否存在且有效
  if (show["genre_ids"] == null || show["genre_ids"].isEmpty) {
    // 可以返回一个占位Widget，或者直接跳过该条目
    return SizedBox(width: 150, child: Center(child: Text("无分类")));
  }
  return MovieCard(
    overview: show["overview"],
    id: show["id"].toString(),
    index: index,
    title: show["name"],
    rating: show["vote_average"].toString(),
    imageUrl: show["poster_path"],
    genreId: show["genre_ids"][0].toString(),
  );
},

至于为什么另一个同结构的组件能正常工作？很简单：那个接口返回的所有数据的genre_ids都不为空，所以没有触发这个索引越界错误。

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