Flutter ListView.builder一次性加载全部项及加载更多异常问题咨询

核心问题 #

不是嵌套ListView本身导致的，主要是这两个关键点：

• shrinkWrap: true会强制ListView.builder一次性计算并渲染所有子项的高度，包括触发加载的index == length条目，所以页面一加载就会触发加载逻辑。
• 没有加载状态控制，每次setState更新列表长度后，ListView重新build时，index == length的条件再次满足，又会触发加载，形成循环调用。
• 加上内部ListView设置了NeverScrollableScrollPhysics()，滚动由外部ListView处理，但shrinkWrap让内部ListView撑满所有内容，所谓的“底部”一开始就在可视范围内，自然提前触发加载。

修复步骤 #

1. 添加加载状态变量：避免重复触发加载请求
2. 移除shrinkWrap: true：用Expanded/Flexible包裹内部ListView，让它只渲染可见条目，而非一次性加载所有
3. 优化加载触发逻辑：只有在未加载状态下，才执行加载操作

修改后的代码示例 #

bool _isLoading = false;
int length = 10; // 初始列表长度

// 嵌套在外部ListView中的代码
Expanded(
  child: ListView.builder(
    physics: NeverScrollableScrollPhysics(),
    itemBuilder: (context, index) {
      if (index == length) {
        if (!_isLoading) {
          _isLoading = true;
          // 模拟网络请求
          Future.delayed(Duration(seconds: 2)).then((value) {
            setState(() {
              length += 10;
              _isLoading = false;
            });
          });
        }
        return Center(child: CircularProgressIndicator());
      }

      return Container(
        color: Colors.red,
        padding: EdgeInsets.all(24.0),
        margin: EdgeInsets.all(12.0),
        child: Text(index.toString()),
      );
    },
    itemCount: length + 1,
  ),
)

额外建议 #

如果想在外部ListView滚动到底部时触发加载，更可靠的方式是给外部ListView绑定ScrollController，监听滚动位置判断是否到达底部，再执行加载逻辑，这样能彻底避免嵌套ListView带来的判断误差。

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