Flutter中ListView.builder自动跳转到索引15导致数组越界错误求助

哥们，我看了你的问题描述和代码，这情况我做Flutter项目时也碰到过，大概率是嵌套滚动组件冲突+多层BlocBuilder重复构建搞出来的问题，咱们一步步拆解解决：

问题核心分析 #

1. 嵌套的SingleChildScrollView+ListView冲突
   你在外层用了SingleChildScrollView，里面又套了ListView.builder，虽然设了shrinkWrap: true，但Flutter的滚动布局计算偶尔会“抽风”——当父组件和子组件同时处理滚动逻辑时，可能导致ListView错误计算需要渲染的item数量，出现超出实际列表长度的索引请求（比如你遇到的跳到15）。

2. 多层BlocBuilder重复触发构建
   页面里套了两层BlocBuilder：外层监听status == loaded，内层又监听works变化。这种嵌套很容易导致状态更新时组件重复构建，叠加滚动布局的计算误差，就触发了越界错误。

3. 状态更新的潜在小隐患
   虽然你说debug时数据是对的，但还是要确认state.copyWith时works是否完整赋值——比如response.body?.data是不是长度正确的List，有没有序列化时的隐性问题？不过这个概率相对低，顺手排查下更稳妥。

具体解决方案 #

1. 简化BlocBuilder，去掉不必要的嵌套

把两层BlocBuilder合并成一层，直接监听关键状态变化，避免重复构建：

BlocBuilder<HomePageBloc, HomePageState>(
  buildWhen: (previous, current) => 
    previous.status != current.status || previous.works != current.works,
  builder: (context, state) {
    if (state.status == HomeStatus.loading) {
      return const Center(child: CircularProgressIndicator());
    } else if (state.status == HomeStatus.loaded) {
      return SingleChildScrollView(
        physics: const BouncingScrollPhysics(),
        child: Column(
          children: [
            ListView.builder(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              // 禁止ListView自己滚动，交给父级SingleChildScrollView处理
              physics: const NeverScrollableScrollPhysics(),
              itemCount: state.works.length,
              itemBuilder: (BuildContext context, int index) {
                return WorkCard(work: state.works[index]);
              },
            ),
          ],
        ),
      );
    } else {
      // 处理加载失败的情况
      return const Center(child: Text("加载失败"));
    }
  },
),

2. 给内层ListView添加NeverScrollableScrollPhysics()

外层已经有SingleChildScrollView负责滚动，内层ListView不需要自己处理滚动逻辑，加上这个属性能彻底避免滚动冲突，让布局计算更准确。

3. 确认Bloc状态更新的正确性

在Bloc的事件处理里加个打印，确认获取到的列表长度符合预期：

var response = await apiService.apiWorkGetLastWorksPost();
if (response.body!.statusCode == Global.ResponseStatusCode.Ok.value) {
  print("获取到的works长度：${response.body?.data?.length}"); // 加这行确认
  emit(
    state.copyWith(
      status: HomeStatus.loaded,
      works: response.body?.data ?? [], // 加空列表默认值，避免null
    ),
  );
}

4. 检查WorkCard的布局约束

有时候WorkCard内部如果有无限高度/宽度的布局问题（比如滥用Expanded），也会导致ListView的item计算异常，确认下WorkCard的约束是否正常。

为什么手动设itemCount为4就正常？ #

因为手动限制了渲染数量，就算布局计算有问题，也不会超出4的索引范围，所以不会报错，但这只是临时规避，不是根本解决办法。

按上面的步骤调整后，应该就能解决索引跳15导致的越界问题了，你可以试试！

备注：内容来源于stack exchange，提问作者Manuel Mannino