如何在 Flutter 中使用 Android 滚动行为为容器移动设置动画？答案

【问题标题】：How to animate container movement with Android scroll behavior in Flutter?如何在 Flutter 中使用 Android 滚动行为为容器移动设置动画？
【发布时间】：2020-01-23 22:21:12
【问题描述】：

我的目标是，有一个可以在垂直轴上拖动的容器。移开手指后，容器应该以我在结束触摸后的速度向前移动一点。我希望在您停止在 Android 手机上滚动并且它会继续滚动更进一步后获得完全相同的动画/感觉。

这是目前的样子：

这是我的代码：

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  double _offeset = 0;

  double get offset => _offeset;

  set offset(double offeset) {
    if(offeset < 500)
    setState(() {
      _offeset = offeset;
    });
  }

  AnimationController controller;
  ClampingScrollSimulation simulation;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(vsync: this, upperBound: 5)
      ..addListener(() {
        offset += controller.value;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned(
            top: offset,
            left: 0,
            right: 0,
            child: GestureDetector(
              onVerticalDragUpdate: (DragUpdateDetails details) {
                offset += details.delta.dy;
              },
              onVerticalDragEnd: (DragEndDetails details) {
                simulation = ClampingScrollSimulation(
                   position: 0, velocity: details.primaryVelocity,
                );
                controller.animateWith(simulation);
              },
              child: Container(height: 50, width: 50, color: Colors.red),
            ),
          ),
        ],
      ),
    );
  }
}

问题是，这不是 Android 滚动动画，我不知道如何获取它。（感觉动画是线性的，过早停止，并没有利用速度参数）我什至在使用ClampingScrollSimulation 类，在 Flutter 中的所有 Scroll 小部件中都使用该类来模拟 Android 滚动。

【问题讨论】：

标签： animation flutter dart widget

【解决方案1】：

解决方案是将_controller.value 与_controller.velocity 相乘。像这样：

offset += controller.value * _controller.velocity / 100;

【讨论】：