Flutter使用SingleChildScrollView滑动到底部监听器触发两次问题求助

触发两次的核心原因 #

• ScrollController的滚动监听回调每发生一帧滚动变化就会触发，滚动到底部的过程中会有多个连续帧满足offset >= maxScrollExtent的条件，直接调用_next()就会被多次执行
• 判断逻辑没有加加载状态拦截，第一次触发_next()后controller.busy状态更新是异步的，状态更新前的后续滚动回调依然会满足判断条件，再次触发_next()
• 可能存在重复添加监听器的问题：如果没有在页面销毁时移除滚动监听，页面多次重建会导致同一个ScrollController被绑定多个监听回调，每次触发滚动每个回调都会执行一次_next()
• 部分平台滚动回弹效果会导致多次命中底部判断逻辑：安卓默认的滚动回弹效果会让滚动位置在触底后回弹，过程中可能多次满足触底条件

修复方案 #

1. 增加加载状态拦截 #

在滚动判断逻辑中加入busy状态判断，加载中的时候直接忽略滚动触发，修改监听代码如下：

scrollController.addListener(() {
  if (scrollController.offset >=
          scrollController.position.maxScrollExtent &&
      !scrollController.position.outOfRange &&
      !controller.busy) { // 新增加载状态判断
    _next();
  }
});

同时要确保_next()方法执行第一时间就把controller.busy设为true，避免状态更新延迟导致的重复触发。

2. 添加防抖逻辑 #

增加时间间隔判断，短时间内只允许触发一次加载，避免连续帧多次触发：

int _lastTriggerTime = 0;
scrollController.addListener(() {
  final now = DateTime.now().millisecondsSinceEpoch;
  // 两次加载间隔最小为500ms，可自行调整
  if (now - _lastTriggerTime < 500) return;
  if (scrollController.offset >=
          scrollController.position.maxScrollExtent &&
      !scrollController.position.outOfRange &&
      !controller.busy) {
    _lastTriggerTime = now;
    _next();
  }
});

3. 规范监听器的生命周期管理 #

必须在页面初始化时添加监听，销毁时移除监听，避免重复绑定：

@override
void initState() {
  super.initState();
  scrollController.addListener(scrollListener);
}

@override
void dispose() {
  scrollController.removeListener(scrollListener);
  scrollController.dispose();
  super.dispose();
}

void scrollListener() {
  // 滚动判断逻辑写在这里
}

4. 增加滚动方向判断 #

只有向下滚动的时候才判断是否触底，避免回弹过程向上滚动时误触发：

import 'package:flutter/rendering.dart';

scrollController.addListener(() {
  // 仅处理向下滚动的场景
  if (scrollController.position.userScrollDirection != ScrollDirection.reverse) return;
  if (scrollController.offset >=
          scrollController.position.maxScrollExtent &&
      !scrollController.position.outOfRange &&
      !controller.busy) {
    _next();
  }
});

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