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

原创

于 2024-10-25 17:19:55 发布 · 952 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #physics #滚动效果

在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});

  @override
  CustomScrollPhysics applyTo(ScrollPhysics? ancestor) {
   
   
    return CustomScrollPhysics(itemDim