在Flutter中实现排行榜滑动阻尼效果
在开发排行榜模块时，UI提出了一个需求，希望滑动时能够增加阻尼效果，每次只能滑动一个Item的宽度，若未达到边界则回弹。这种效果类似于 PageView 的滑动体验，能够更好地限制滑动范围，并提供更为流畅的体验。
预览效果
效果大致如下图所示：
实现方法
针对这种需求，我们可以通过自定义 ScrollPhysics 来实现。下面是具体实现代码。
自定义 ScrollPhysics
首先，我们创建一个名为 CustomScrollPhysics 的类，继承自 ScrollPhysics。在该类中，我们通过对滑动进行控制，来实现指定宽度的滑动，并在未达到滑动目标时回弹。
import 'package:flutter/material.dart';// 自定义滑动吸附布局
class CustomScrollPhysics extends ScrollPhysics {final double itemDimension;const CustomScrollPhysics({required this.itemDimension, super.parent});CustomScrollPhysics applyTo(ScrollPhysics? ancestor) {return CustomScrollPhysics(itemDimension: itemDimension, parent: buildParent(ancestor));}double _getPage(ScrollMetrics position) {return position.pixels / itemDimension;}double _getPixels(double page) {return page * itemDimension;}double _getTargetPixels(ScrollMetrics position, Tolerance tolerance, double velocity) {double page = _getPage(position);if (velocity < -tolerance.velocity) {page -= 0.5;} else if (velocity > tolerance.velocity) {page += 0.5;}return _getPixels(page.roundToDouble());}Simulation? createBallisticSimulation(ScrollMetrics position, double velocity) {// 如果超出范围且不返回，使用父级的物理模拟以返回到边界if ((velocity <= 0.0 && position.pixels <= position.minScrollExtent) ||(velocity >= 0.0 && position.pixels >= position.maxScrollExtent)) {return super.createBallisticSimulation(position, velocity);}final Tolerance tolerance = this.tolerance;final double target = _getTargetPixels(position, tolerance, velocity);if (target != position.pixels) {return ScrollSpringSimulation(spring, position.pixels, target, velocity, tolerance: tolerance);}return null;}bool get allowImplicitScrolling => false;
}
参数解释
• itemDimension：定义每次滑动的最大距离，这里可以设置为单个Item的宽度。
• _getTargetPixels：根据滑动的速度和方向，计算滑动的最终位置，若未达到边界则回弹。
• createBallisticSimulation：负责创建弹簧效果的模拟，确保每次滑动达到指定的距离。
使用 CustomScrollPhysics
将 CustomScrollPhysics 应用到需要此效果的 ListView 中即可。以下是 ListView 的代码示例：
ListView.separated(padding: EdgeInsets.only(left: 12.w, right: lastItemRightPadding),scrollDirection: Axis.horizontal,physics: CustomScrollPhysics(itemDimension: columnItemWidth + 20.w),// 其他参数...
);
在这里，itemDimension 指定了滑动的宽度，每次滑动将固定一个Item的宽度（在示例中设置为屏幕宽度的2/3），从而实现预期效果。
总结
通过自定义 ScrollPhysics，我们成功地在排行榜模块中实现了阻尼效果，让滑动体验更具限制性和弹性。此方法适用于各种需要自定义滑动物理的场景，不仅提升了视觉效果，也让用户操作更加直观。
