Flutter：如何告知ListView的itemBuilder已无更多数据？

你现在的ListView.builder默认会无限触发itemBuilder，因为它的itemCount默认是null——框架会一直认为还有数据要加载。要解决这个问题，核心是通过**明确控制itemCount**来告诉框架什么时候停止调用itemBuilder，下面给你两种实用的实现方式：

方法一：给ListView.builder设置itemCount（适配你原有的分割线逻辑） #

首先在你的RandomWordsState里加一个状态变量，标记是否还有更多数据可加载：

bool _hasMore = true; // 初始假设还有更多数据

然后修改你的_buildSuggestions方法，通过itemCount限制触发范围，并在合适的时机更新_hasMore状态：

Widget _buildSuggestions() {
  return ListView.builder(
    padding: const EdgeInsets.all(16.0),
    // 关键：设置itemCount，当没有更多数据时，仅显示现有内容的长度（含分割线）
    // 计算逻辑：现有数据项数*2（每个数据项+一条分割线） + （还有更多的话加1个加载项）
    itemCount: _suggestions.length * 2 + (_hasMore ? 1 : 0),
    itemBuilder: (context, i) {
      // 处理加载提示项
      if (i == _suggestions.length * 2) {
        if (_hasMore) {
          // 模拟加载更多数据（实际场景可替换为API请求）
          Future.delayed(const Duration(seconds: 1), () {
            final newWords = generateWordPairs().take(10).toList();
            setState(() {
              if (newWords.isEmpty) {
                // 没有新数据了，标记状态
                _hasMore = false;
              } else {
                _suggestions.addAll(newWords);
              }
            });
          });
          return const Center(child: CircularProgressIndicator());
        } else {
          // 没有更多数据时，显示提示或者返回空组件
          return const Center(child: Text('没有更多数据啦'));
        }
      }

      // 原有的分割线逻辑
      if (i.isOdd) return const Divider();

      final index = i ~/ 2;
      // 现在因为有itemCount限制，index不会超出_suggestions的长度
      return _buildRow(_suggestions[index]);
    },
  );
}

方法二：改用ListView.separated（更清晰的分割线处理） #

如果你的分割线只是用来分隔列表项，ListView.separated会比builder更直观——它把列表项和分割线的逻辑分开，不用再手动处理奇数索引的分割线：

同样先加状态变量bool _hasMore = true;，然后修改方法：

Widget _buildSuggestions() {
  return ListView.separated(
    padding: const EdgeInsets.all(16.0),
    // itemCount直接对应数据项的数量，加上可选的加载提示项
    itemCount: _suggestions.length + (_hasMore ? 1 : 0),
    // 自动在列表项之间添加分割线
    separatorBuilder: (context, index) => const Divider(),
    itemBuilder: (context, i) {
      // 处理加载/无数据提示
      if (i == _suggestions.length) {
        if (_hasMore) {
          Future.delayed(const Duration(seconds: 1), () {
            final newWords = generateWordPairs().take(10).toList();
            setState(() {
              _hasMore = newWords.isNotEmpty;
              if (_hasMore) _suggestions.addAll(newWords);
            });
          });
          return const Center(child: CircularProgressIndicator());
        } else {
          return const Center(child: Text('已加载全部内容'));
        }
      }
      // 直接返回数据项，不用再处理分割线的索引逻辑
      return _buildRow(_suggestions[i]);
    },
  );
}

核心逻辑总结 #

不管用哪种方式，核心都是：

• 用一个状态变量（比如_hasMore）跟踪是否还有更多数据
• 给ListView设置明确的itemCount，当没有更多数据时，itemCount等于现有数据的长度（加上可选的提示项）
• 当加载不到新数据时，更新状态变量，让itemCount不再增加，框架就会停止调用itemBuilder了

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