Flutter中如何解决请求API时出现的RangeError异常？

问题根源 #

你遇到的RangeError是因为列表为空（[]）但你尝试用[0]访问第一个元素，而你只用==null判断，可空列表不等于null，所以这个判断完全无效。不管是预告片相关列表还是genres列表，只要API返回空数组而非null，就会触发这个错误。

解决方案 #

核心是同时判断列表非null且非空，以下是具体实现方式：

• 预告片按钮显示逻辑：
  假设存储预告片数据的列表是trailers，修改判断逻辑：

  // 先判断列表存在且不为空，再显示按钮
  if (trailers != null && trailers.isNotEmpty) {
    // 渲染播放预告片按钮
    ElevatedButton(
      onPressed: () { /* 处理播放逻辑 */ },
      child: const Text('播放预告片'),
    );
  }
  

• 访问genres列表第一个元素：
  同样先做非空校验，或者用Flutter空安全的便捷写法：

  // 传统写法
  String genreName = '未知类型';
  if (genres != null && genres.isNotEmpty) {
    genreName = genres[0].name;
  }
  
  // 空安全写法（Flutter 2.0+）
  String? genreName = genres?.firstOrNull?.name ?? '未知类型';
  

补充说明 #

如果你的API返回的空列表是null和[]两种情况都有，上面的判断逻辑能同时覆盖。如果用的是较新的Flutter版本，推荐用?.和??的空安全语法，代码更简洁且不易出错。

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