Flutter构建ListView时触发RangeError(index)错误求助

我一眼就看出问题所在了——你遇到的RangeError (index): Invalid value: Valid value range is empty: 0错误，本质上是两个核心原因导致的：

问题根源分析 #

1. ListView.builder缺少itemCount参数
   你没有给ListView.builder指定itemCount，这会让Flutter默认认为这个列表有无限多的条目需要构建。但初始时_movies是空数组，当builder尝试访问索引0时，自然就会触发数组越界错误。
2. 异步数据加载的时机不匹配
   initState里的HTTP请求是异步执行的，组件首次渲染时_movies还处于空数组状态，这时候ListView已经开始尝试构建条目，空数组访问索引必然报错。

修复方案 #

下面是修改后的完整代码，我标注了关键改动点：

1. 更新_fetchMovies方法，添加itemCount和加载状态处理 #

Widget _fetchMovies() {
  // 数据未加载完成时，显示加载指示器
  if (_movies.isEmpty) {
    return const Center(child: CircularProgressIndicator());
  }
  
  return ListView.builder(
    padding: const EdgeInsets.all(16.0),
    // 关键：指定列表条目数量为_movies的长度
    itemCount: _movies.length,
    itemBuilder: (context, i) {
      return Card(
        child: Container(
          height: 250.0,
          child: Padding(
            padding: const EdgeInsets.all(2.0),
            child: Row(
              children: <Widget>[
                Align(
                  child: Hero(
                    child: Image.network("https://image.tmdb.org/t/p/w500"+_movies[i].getPoster()),
                    tag: _movies[i].getTitle()
                  ), 
                  alignment: Alignment.center,
                ),
                Expanded(
                  child: Stack(
                    children: <Widget>[
                      Align(
                        child: Text(
                          _movies[i].getTitle(),
                          style: const TextStyle(fontSize: 11.0, fontWeight: FontWeight.bold),
                        ), 
                        alignment: Alignment.topCenter,
                      ),
                      Align(
                        child: Padding(
                          padding: const EdgeInsets.all(4.0),
                          child: Text(
                            _movies[i].getOverview(),
                            maxLines: 8,
                            overflow: TextOverflow.ellipsis,
                            style: const TextStyle(fontSize: 12.0, fontStyle: FontStyle.italic)
                          )
                        ), 
                        alignment: Alignment.centerRight,
                      ),
                      Align(
                        child: Text(
                          _movies[i].getReleaseDate(),
                          style: const TextStyle(fontSize: 11.0, fontWeight: FontWeight.bold),
                        ), 
                        alignment: Alignment.bottomRight,
                      ),
                    ]
                  )
                )
              ]
            )
          )
        )
      );
    }
  );
}

2. 确保数据加载后触发UI更新 #

你的initState代码已经在添加电影到_movies，但别忘了调用setState()通知Flutter重新渲染，否则数据加载完成后UI不会自动更新：

@override
void initState() {
  super.initState();
  http.get(_apiGatewayURL)
      .then((response) => response.body)
      .then(json.decode)
      .then((movies) {
        movies.forEach(_addMovie);
        // 关键：调用setState触发UI刷新
        setState(() {});
      });
}

额外优化建议 #

• 可以添加HTTP请求失败的处理逻辑，比如显示错误提示文本
• 若API返回空数组，可显示“暂无电影数据”的友好提示，避免一直显示加载指示器

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