Flutter中如何使用ScrollController检测ListView的滚动速度

实现思路 #

ScrollController本身没有直接暴露滚动速度的API，我们可以通过监听滚动偏移的变化、结合时间差计算实时速度，再设定阈值区分快慢滚动状态，满足检测和通知的需求。

完整实现步骤 #

• 第一步：初始化ScrollController和辅助变量
  预先定义1000像素/秒作为快慢滚动的分界阈值，可根据业务需求自行调整。

  final ScrollController _scrollController = ScrollController();
  // 存储上一次计算时的滚动偏移
  double _lastScrollOffset = 0;
  // 存储上一次计算的时间戳
  DateTime _lastCalculateTime = DateTime.now();
  // 快慢滚动阈值，单位：像素/秒
  final double _speedThreshold = 1000;
  

• 第二步：给ScrollController添加滚动监听
  在initState中注册滚动监听，每次滚动回调时计算实时速度，匹配对应状态发送通知：

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_calculateScrollVelocity);
  }
  
  void _calculateScrollVelocity() {
    final currentOffset = _scrollController.position.pixels;
    final currentTime = DateTime.now();
    // 计算时间差，转换为秒单位
    final timeDiff = currentTime.difference(_lastCalculateTime).inMilliseconds / 1000;
    // 过滤小于16ms的回调（约60帧刷新间隔），避免时间差过小导致计算异常
    if (timeDiff < 0.016) return;
    // 计算滚动速度，取绝对值忽略上下滚动方向
    final velocity = ((currentOffset - _lastScrollOffset) / timeDiff).abs();
  
    // 匹配滚动状态发送对应通知
    if (velocity > _speedThreshold) {
      _sendNotification("当前为快速滚动状态");
    } else {
      _sendNotification("当前为慢速滚动状态");
    }
  
    // 更新辅助变量用于下次计算
    _lastScrollOffset = currentOffset;
    _lastCalculateTime = currentTime;
  }
  
  void _sendNotification(String content) {
    // 可替换为自定义通知逻辑：Toast、事件总线广播、状态更新等
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(content), duration: const Duration(milliseconds: 200))
    );
  }
  

• 第三步：将ScrollController绑定到目标ListView

  ListView.builder(
    controller: _scrollController,
    itemCount: 100,
    itemBuilder: (context, index) => ListTile(title: Text("列表项 $index")),
  )
  

• 第四步：页面销毁时释放资源，避免内存泄漏

  @override
  void dispose() {
    _scrollController.removeListener(_calculateScrollVelocity);
    _scrollController.dispose();
    super.dispose();
  }
  

注意事项 #

1. 速度阈值可根据产品需求自行调整，普通用户手动滚动速度大多在500-2000像素/秒区间，可多测试后确定最优值
2. 滚动停止时（惯性滚动结束后）速度会降至0，可额外监听_scrollController.position.isScrolling属性判断滚动是否停止，避免发送无效通知
3. 若需要更高精度的速度值，可累加多次滚动回调的偏移和时间差做平均计算，减少单帧波动带来的计算误差

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