Flutter 颤振：弹跳按钮动画滚动问题

我想在我的颤振应用程序中添加一些平滑和流体动画，特别是在应用程序上的按钮上（也在颤振上制作）

因此，我跟随在我的按钮上添加了弹跳动画。一切正常，但我注意到一个与滚动相关的“bug”：

当我触摸按钮并按住它，然后拖动向下或向上滚动（始终按住）时，按钮将保持向下状态，并且不会返回到其原始位置（有关详细信息，请参阅GIF）

注意：此问题不会出现在Reflecty应用程序上

要复制此“bug”，您可以在此处下载弹跳，然后创建一个滚动条，其中包含一些弹跳按钮，如下所示：

return Scaffold(
      body: Container(
        width: double.infinity,
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              AnimatedButton(),
              // [...] Many others animated button here 
            ],
          ),
        ),
      ),
    );

返回脚手架(
主体：容器(
宽度：double.infinity，
子：SingleChildScrollView(
子：列(
mainAxisSize:mainAxisSize.max，
儿童：[
AnimatedButton（），
//[…]此处还有许多其他动画按钮
],
),
),
),
);

我试图添加一个

onVerticalDragEnd

回调来恢复之后的状态，但是更糟了，因为不再能够滚动（滚动似乎只在按钮上被捕捉）

任何帮助都将不胜感激：）

---

提前谢谢

您可以在下面复制粘贴运行完整代码
当

onTapDown

和滚动将触发

onTapCancel

您可以将

\u controller.reverse（）在
\u onTapCancel（）


代码片段

void _onTapCancel() {
    print("on tap cancel");
    _controller.reverse();
  }

工作演示


完整代码

import 'package:flutter/material.dart';

class AnimatedButton extends StatefulWidget {
  @override
  _AnimatedButtonState createState() => _AnimatedButtonState();
}

class _AnimatedButtonState extends State<AnimatedButton>
    with SingleTickerProviderStateMixin {
  double _scale;
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 200),
      lowerBound: 0.0,
      upperBound: 0.1,
    )..addListener(() {
        setState(() {});
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _onTapDown(TapDownDetails details) {
    _controller.forward();
  }

  void _onTapUp(TapUpDetails details) {
    print("onTapUp");
    _controller.reverse();
  }

  void _onTapCancel() {
    print("on tap cancel");
    _controller.reverse();
  }

  @override
  Widget build(BuildContext context) {
    _scale = 1 - _controller.value;

    return GestureDetector(
      onTapDown: _onTapDown,
      onTapUp: _onTapUp,
      onTapCancel: _onTapCancel,
      child: Transform.scale(
        scale: _scale,
        child: _animatedButtonUI,
      ),
    );
  }

  Widget get _animatedButtonUI => Container(
        height: 100,
        width: 250,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100),
          boxShadow: [
            BoxShadow(
              color: Color(0x80000000),
              blurRadius: 30.0,
              offset: Offset(0.0, 30.0),
            ),
          ],
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Color(0xFFA7BFE8),
              Color(0xFF6190E8),
            ],
          ),
        ),
        child: Center(
          child: Text(
            'tap!',
            style: TextStyle(
              fontSize: 30,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ),
      );
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
              AnimatedButton(),
            ],
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
类AnimatedButton扩展StatefulWidget{
@凌驾
_AnimatedButtonState createState（）=>\u AnimatedButtonState（）；
}
类_AnimatedButtonState扩展状态
使用SingleTickerProviderStateMixin{
双标度；
动画控制器_控制器；
@凌驾
void initState（）{
super.initState（）；
_控制器=动画控制器(
vsync:这个,，
持续时间：持续时间（毫秒：200），
lowerBound:0.0，
上限：0.1，
)…addListener（）{
setState（（）{}）；
});
}
@凌驾
无效处置（）{
_controller.dispose（）；
super.dispose（）；
}
void\u onTapDown（tappdown详细信息）{
_controller.forward（）；
}
void\u onTapUp（TapUpDetails）{
打印（“onTapUp”）；
_controller.reverse（）；
}
void _onTapCancel（）{
打印（“点击取消”）；
_controller.reverse（）；
}
@凌驾
小部件构建（构建上下文）{
_比例=1-_控制器值；
返回手势检测器(
onTapDown:\u onTapDown，
onTapUp:\u onTapUp，
onTapCancel:_onTapCancel，
子：Transform.scale(
比例：_比例，
孩子：_animatedButtonUI，
),
);
}
Widget get\u animatedButtonUI=>容器(
身高：100，
宽度：250，
装饰：盒子装饰(
边界半径：边界半径。圆形（100），
boxShadow：[
箱形阴影(
颜色：颜色（0x8000000），
半径：30.0，
偏移量：偏移量（0.0,30.0），
),
],
梯度：线性梯度(
开始：Alignment.topLeft，
结束：对齐。右下角，
颜色：[
颜色（0xFFA7BFE8），
颜色（0xFF6190E8），
],
),
),
儿童：中心(
子：文本(
“轻敲！”，
样式：TextStyle(
尺寸：30，
fontWeight:fontWeight.bold，
颜色：颜色，白色，
),
),
),
);
}
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyHomePage（标题：“颤振演示主页”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
int _计数器=0；
void _incrementCounter（）{
设置状态（）{
_计数器++；
});
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：容器(
宽度：double.infinity，
子：SingleChildScrollView(
子：列(
mainAxisSize:mainAxisSize.max，
儿童：[
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
AnimatedButton（），
],
),
),
),
);
}
}