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

Question

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

• 弹跳按钮颤动
• 创建点击时颤振反弹

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

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

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

当您通过按住小部件滚动页面时，小部件会停留在一个固定位置，这意味着，就像它保持按下位置一样

这是我的代码：

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提供的开发人员。

您可以在上面的链接中搜索flutter_bounce，也可以直接转到以下内容：flutter_bounce

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

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

有关更多详细信息，请随时阅读链接的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
);