Flutter on tap 滚动时弹跳固定在一个位置答案

【问题标题】：Flutter on tap Bounce fixed at one position when scrolledFlutter on tap 滚动时弹跳固定在一个位置
【发布时间】：2020-07-31 09:06:09
【问题描述】：

我正在我的小部件上使用On Tap Bounce 功能。我参考了这些链接以获取信息：

我得到了这个名为 bouncing_widget 的包，这对于解决方法来说已经足够了，但是它有一个限制，即 它不适合滚动小部件。您无法通过点击使用此颤动弹跳小部件的小部件来滚动页面

有人已经为上述小部件创建了一个错误，但没有找到解决方案。您可以在这里找到问题：Bouncing Widget GitHub Issue

所以，我决定制作自己的小部件来为我完成这项工作。我已经制作了这个小部件，它工作正常，但有一个限制，即，

当您按住小部件滚动页面时，小部件会停留在一个固定位置，也就是说，就像它保持在按下位置一样

这是我的代码：

import 'package:flutter/material.dart';

class CLBounceWidget extends StatefulWidget {
  final Function onPressed;
  final Widget child;

  CLBounceWidget({Key key, @required this.onPressed, @required this.child}): super(key:key);

  @override
  CLBounceWidgetState createState() => CLBounceWidgetState();
}

class CLBounceWidgetState extends State<CLBounceWidget> with SingleTickerProviderStateMixin{
  double _scale;
  final Duration duration = Duration(milliseconds: 200);
  AnimationController _animationController;

  //Getting onPressed Calback
  VoidCallback get onPressed => widget.onPressed;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: duration,
      lowerBound: 0.0,
      upperBound: 0.1
    )..addListener((){ setState((){}); });

    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _animationController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _scale = 1 - _animationController.value;
    return GestureDetector(
      onTapDown: _onTapDown,
      onTapUp: _onTapUp,
      child: Transform.scale(
        scale: _scale,
        child: widget.child
      )
    );
  }

  // Triggering the onPressed callback with a check
  void _onTapTrigger(){
    if(onPressed != null){
      onPressed();
    }
  }

  //Start the animation
  _onTapDown(TapDownDetails details){
    _animationController.forward();
  }

  // We revise the animation and notify the user of the event
  _onTapUp(TapUpDetails details){
    Future.delayed(Duration(milliseconds: 100), (){
      _animationController.reverse();
    });

    //Finally calling the callback function
    _onTapTrigger();
  }
}

另外：我试过这样做，但不使用Future，但是这样动画只有在长按时才会发生，只需_onTapTrigger() 有效：

_onTapUp(TapUpDetails details){
  _animationController.reverse();
  _onTapTrigger();
}

尝试过：我尝试过使用onLongPress、onLongPressEnd、onLongPressMoveUpdate 至少执行_animationController.reverse();，但没有任何结果对我来说。

我希望在按住小部件的同时滚动页面时小部件保持正常，就像普通小部件执行的那样。

【问题讨论】：

标签： flutter dart flutter-animation flutter-widget

【解决方案1】：

你们可以尝试的另一个新软件包是我开发的flutter_bounceable。如果你们更喜欢更简单、交互式和可自定义的反弹小部件，那么这个软件包就是为你准备的。

Bounceable(
  onTap: yourFunction, // set to null if want to disable bounceable
  child: YourWidget(),
  duration: const Duration(milliseconds: 200), // optional
  reverseDuration: const Duration(milliseconds: 200), // optional
  curve: Curves.decelerate, // optional
  reverseCurve: Curves.decelerate, // optional
);

【讨论】：

【解决方案2】：

因为，经过长时间的研究和数小时的辛勤工作，我终于找到了我愿意在我的项目中拥有的东西。 我在 Flutter pub.dev 上创建了一个包，以帮助其他需要 flutter_bounce 包的开发人员。

你可以在上面的链接搜索flutter_bounce，也可以直接去这个：flutter_bounce

要使用它，你只需要这样做：

Bounce(
  duration: Duration(milliseconds: 110),
  onPressed: (){ YOUR_FUNCTION },
  child: YOUR_WIDGET
)

欲了解更多详情，请随时阅读链接的README。它包含所有必要的细节。快乐编码:)

【讨论】：