在Flutter中实现排行榜滑动阻尼效果

在Flutter中实现排行榜滑动阻尼效果

在开发排行榜模块时,UI提出了一个需求,希望滑动时能够增加阻尼效果,每次只能滑动一个Item的宽度,若未达到边界则回弹。这种效果类似于 PageView 的滑动体验,能够更好地限制滑动范围,并提供更为流畅的体验。

预览效果

效果大致如下图所示:

实现方法

针对这种需求,我们可以通过自定义 ScrollPhysics 来实现。下面是具体实现代码。

自定义 ScrollPhysics

首先,我们创建一个名为 CustomScrollPhysics 的类,继承自 ScrollPhysics。在该类中,我们通过对滑动进行控制,来实现指定宽度的滑动,并在未达到滑动目标时回弹。

dart 复制代码
import 'package:flutter/material.dart';

// 自定义滑动吸附布局
class CustomScrollPhysics extends ScrollPhysics {
  final double itemDimension;

  const CustomScrollPhysics({required this.itemDimension, super.parent});

  @override
  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());
  }

  @override
  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;
  }

  @override
  bool get allowImplicitScrolling => false;
}

参数解释

复制代码
•	itemDimension:定义每次滑动的最大距离,这里可以设置为单个Item的宽度。
•	_getTargetPixels:根据滑动的速度和方向,计算滑动的最终位置,若未达到边界则回弹。
•	createBallisticSimulation:负责创建弹簧效果的模拟,确保每次滑动达到指定的距离。

使用 CustomScrollPhysics

将 CustomScrollPhysics 应用到需要此效果的 ListView 中即可。以下是 ListView 的代码示例:

dart 复制代码
ListView.separated(
  padding: EdgeInsets.only(left: 12.w, right: lastItemRightPadding),
  scrollDirection: Axis.horizontal,
  physics: CustomScrollPhysics(itemDimension: columnItemWidth + 20.w),
  // 其他参数...
);

在这里,itemDimension 指定了滑动的宽度,每次滑动将固定一个Item的宽度(在示例中设置为屏幕宽度的2/3),从而实现预期效果。

总结

通过自定义 ScrollPhysics,我们成功地在排行榜模块中实现了阻尼效果,让滑动体验更具限制性和弹性。此方法适用于各种需要自定义滑动物理的场景,不仅提升了视觉效果,也让用户操作更加直观。

相关推荐
Bryce李小白3 天前
Flutter 自定义 View 权威指引
flutter
恋猫de小郭3 天前
Fluttercon EU 2025 :Let‘s go far with Flutter
android·开发语言·flutter·ios·golang
SoaringHeart4 天前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
许泽宇的技术分享4 天前
Flutter + Ollama:开启本地AI的全平台新纪元 —— 从零剖析一款现代化AI客户端的技术奥秘
人工智能·flutter
molihuan5 天前
开源 全平台 哔哩哔哩缓存视频合并 Github地址:https://github.com/molihuan/hlbmerge_flutter
android·flutter·缓存·ffmpeg·开源·github·音视频
dora5 天前
Flutter中dart和原生代码的通信之MethodChannel
android·flutter
brave7236 天前
Riverpod 3.0.0 版本中 Provider 类型选择指南
flutter
ZFJ_张福杰6 天前
【区块链】Fiat24 深度解读(含 Flutter 集成与 SDK 骨架)
flutter·web3·区块链·钱包
古希腊被code拿捏的神6 天前
【Flutter】抽象类的运用(abstract与implements的实践)
flutter
ZFJ_张福杰6 天前
【Flutter】GetX最佳实践与避坑指南
android·flutter·ios·getx