如何实现Flutter ListView快速滑动不跳过条目，每次仅滚动到下一项

要实现无论滑动速度、滑动距离多大，每次滑动仅滚动到相邻条目的效果，最稳定的方案是自定义ScrollPhysics控制滚动吸附逻辑，无需引入额外依赖，实现代码如下：

import 'package:flutter/gestures.dart';
import 'package:flutter/widgets.dart';

class SingleItemSnapScrollPhysics extends ScrollPhysics {
  /// 单个条目的主轴尺寸：垂直滚动传条目高度，水平滚动传条目宽度
  final double itemMainAxisSize;

  const SingleItemSnapScrollPhysics({
    required this.itemMainAxisSize,
    super.parent,
  });

  @override
  SingleItemSnapScrollPhysics applyTo(ScrollPhysics? ancestor) {
    return SingleItemSnapScrollPhysics(
      itemMainAxisSize: itemMainAxisSize,
      parent: buildParent(ancestor),
    );
  }

  /// 计算吸附的目标位置
  double _calcSnapTarget(ScrollMetrics position, double velocity) {
    final currentPage = position.pixels / itemMainAxisSize;
    double targetPage;
    // 根据滑动速度和偏移判断目标页，确保每次只滑相邻条目
    if (velocity.abs() < tolerance.velocity) {
      targetPage = currentPage.roundToDouble();
    } else if (velocity > 0) {
      targetPage = currentPage.ceil();
    } else {
      targetPage = currentPage.floor();
    }
    // 边界处理，避免滚动超出内容范围
    targetPage = targetPage.clamp(
      position.minScrollExtent / itemMainAxisSize,
      position.maxScrollExtent / itemMainAxisSize,
    );
    return targetPage * itemMainAxisSize;
  }

  @override
  Simulation? createBallisticSimulation(ScrollMetrics position, double velocity) {
    final target = _calcSnapTarget(position, velocity);
    // 已经在目标位置不需要滚动
    if (target == position.pixels) return null;
    // 用弹簧模拟滚动动画，和系统默认滚动手感一致
    return ScrollSpringSimulation(
      spring,
      position.pixels,
      target,
      velocity,
      tolerance: tolerance,
    );
  }

  @override
  bool get allowImplicitScrolling => false;
}

使用方法 #

直接将上述自定义的物理滚动类赋值给ListView的physics属性即可，示例如下：

// 假设有一个高度固定为200的垂直ListView
ListView(
  physics: const SingleItemSnapScrollPhysics(itemMainAxisSize: 200),
  children: List.generate(10, (index) => Container(height: 200, color: Colors.primaries[index])),
)

注意事项 #

• 如果你的条目尺寸是动态计算的，可以在布局完成后通过GlobalKey获取单个条目的主轴尺寸，再传入SingleItemSnapScrollPhysics即可
• 水平滚动的ListView仅需把itemMainAxisSize替换为单个条目的宽度，其余逻辑无需修改
• 不要和其他滚动物理效果叠加使用，避免出现滚动冲突
• 如需调整滚动吸附的动画速度，可以修改ScrollSpringSimulation的弹簧参数，默认参数和系统原生滚动手感一致

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