flutter - 如何使用gestureDetector onPanUpdate以连续顺序播放动画和删除所有动画

Question

这是我在其中包含GestureDetectorandonPanUpdate回调的 statefulWidget。这意味着如果指针与屏幕接触，我们可以做一些正确的事情。如果用户在屏幕上拖动，我在这里添加一个 generateBox。在 generateBox() 方法中，我包含了一个简单的动画，它根据 pi 的值旋转，并且在调用动画完成onEnd回调后 500 毫秒后，我从第一个索引 0（零）中删除数组 List数组列表的元素。

这是我想用 Flutter 解决的动画。

我用 Flutter尝试了相同的上述动画，但它没有按预期工作。

当我们开始拖动时，onPanUpdate 回调正在生成所有容器并生成动画，但它并没有按连续顺序删除屏幕上的所有容器，正如我提到的，当动画在 TweenAnimationBuilder 的 onEnd 回调中结束时删除它们。正如我在上面的动画 gif 中想要的那样。

我知道 Dart 和 Flutter 中优秀的 Flutterist 和 GDE 可以很好地解决这个问题。

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var myWidgetList = <Widget>[];
  var xPosition = 0.0;
  var yPosition = 0.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          xPosition = details.localPosition.dx;
          yPosition = details.localPosition.dy;

          myWidgetList.add(generateBox());
        });
      },
      child: Scaffold(
        body: Stack(
          children: myWidgetList.toList(),
        ),
      ),
    );
  }

  // To Generate Animated Box for 500 milliseconds.

  Widget generateBox() {
    return Positioned(
      left: xPosition,
      top: yPosition,
      child: TweenAnimationBuilder<double>(
        tween: Tween<double>(begin: 0, end: pi),
        duration: const Duration(milliseconds: 500),
        builder: (_, double angle, __) {
          return Transform.rotate(
            angle: angle,
            child: Container(
              width: 80,
              height: 80,
              decoration: BoxDecoration(
                border: Border.all(
                  width: 3,
                  color: Colors.grey[800],
                ),
                borderRadius: const BorderRadius.all(
                  Radius.circular(20),
                ),
              ),
            ),
          );
        },
        onEnd: () {
          myWidgetList.remove(myWidgetList[0]);
        },
      ),
    );
  }
}

标签： flutterdartflutter-layoutflutter-animationflutter-test