Flutter无依赖实现无限滚动：解决快速滚动重复加载问题

你的问题核心是快速滚动时提前加载的触发条件被多次命中，导致重复请求。只需要加个加载状态标记就能解决，既保留提前加载的流畅体验，又不会重复触发请求，完全不需要依赖第三方包。

具体实现步骤 #

• 先定义两个状态变量：

  • bool _isLoading = false;：标记是否正在加载数据
  • bool _hasReachedEnd = false;：标记是否已加载完所有数据（可选，用来停止无效触发）

• 修改你的_onScroll函数：

_onScroll() async {
  // 正在加载或已到底，直接返回
  if (_isLoading || _hasReachedEnd) return;

  // 满足提前加载条件（距离底部1000像素）且未超出滚动范围
  if (_postScrollController.offset >=
          _postScrollController.position.maxScrollExtent - 1000 &&
      !_postScrollController.position.outOfRange) {
    _isLoading = true;
    try {
      // 调用加载下一页数据的函数
      await _fetchNextPageData();
      // 根据实际业务判断是否还有更多数据，没有则标记已到底
      _hasReachedEnd = _isNoMoreData();
    } catch (e) {
      // 处理加载失败的情况，比如提示用户
      print('加载失败: $e');
    } finally {
      // 无论成功失败，都解锁加载状态
      _isLoading = false;
    }
  }
}

• 补充核心逻辑示例：

Future<void> _fetchNextPageData() async {
  // 这里写请求接口获取下一页数据的逻辑
  // 示例：
  // final newData = await Api.getNextPage(page: _currentPage);
  // _dataList.addAll(newData);
  // _currentPage++;
  setState(() {}); // 更新UI
}

bool _isNoMoreData() {
  // 根据实际场景判断，比如新返回的数据为空，或者当前页等于总页数
  // return newData.isEmpty;
  return false;
}

原理说明 #

通过_isLoading这个状态锁，在数据加载过程中，即使滚动再次触发_onScroll函数，也会直接返回，不会重复执行加载逻辑。加载完成后解锁，才能响应下一次触发。加上_hasReachedEnd可以避免在没有更多数据时还继续触发无效请求。

这样修改后，既保留了提前1000像素加载的流畅体验，又彻底解决了快速滚动时重复触发的问题。

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