滚动时点击时颤振弹跳固定在一个位置

Question

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

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

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

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

When you scroll the page by holding on the widget, the widget stays there in one fixed position, that means, like it remains in pressed position

这是我的代码：

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();，但对我来说没有任何效果。

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

Answer 1

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

可以在上面link上搜索flutter_bounce，也可以直接上这个：flutter_bounce

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

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

详情请阅读link的README。它具有所有必要的详细信息。编码愉快:)

Answer 2

你们可以尝试的另一个新软件包是我开发的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
);

滚动时点击时颤振弹跳固定在一个位置

Flutter on tap Bounce fixed at one position when scrolled

flutter

dart

flutter-animation

flutter-widget