时间戳

首页 > 解决方案 > Flutter on tap 滚动时弹跳固定在一个位置

flutter - Flutter on tap 滚动时弹跳固定在一个位置

问题描述

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

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

有人已经为上面的小部件创建了一个错误，但没有找到解决方案。您可以在此处找到问题：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(); ，但对我来说没有任何效果。

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

标签： flutterdartflutter-animationflutter-widget

解决方案

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

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

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

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

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

推荐阅读