Flutter 动画问题：动画永远无法达到“完成”状态 - 需要专家建议

Question

我已经被 Flutter 中的动画问题困住了三天，这是我创建的应用程序（Speak Out Kids）中的一个新功能（游戏），该功能是为了鼓励儿童，尤其是患有自闭症的儿童（受到启发）我的儿子）。

我创建了一个简化版本，以便更轻松地重现问题并在这里与您分享： Dart 文件： https://drive.google.com/file/d/1304v9pdo359VJhZAeFIosdkhNBG8-xkB/view?usp=sharing

这是一个 DartPad，您可以在其中直接在网络上看到问题： https://dartpad.dev/?id=7aaf487dab7dd29cbd4557d7387ddab0

基本上，新的小部件是用计时器创建的，它们出现在屏幕底部并开始向上移动，当到达顶部时它们应该消失。列表中同时出现的项目不得超过 3 个（出于本次测试的目的）。在 TestGamePageState 中，我有一个 ItemWidget 列表（List _items）（其中包含一个带有“Item 1”、“Item 2”等的简单文本小部件）。每个项目都是由动画控制器创建和控制的，该控制器管理项目在屏幕上的上升。当它到达动画结束时，它会从列表中删除，这应该使它从屏幕上消失，并为要创建的新项目腾出空间。这是通过动画状态的侦听器完成的，当它完成达到“完成”状态时，它会调用小部件的回调方法“onLeavingScreen”，该方法传递方法removeById(id);来自 TestGamePage，这又从列表 _items 中删除小部件。

一切都很完美，直到我有2个小部件同时在屏幕上升起，当第一个到达顶部时，它按应有的方式消失，但下面的小部件会跳跃并出现在消失的地方，并且对于最后一个，它的动画永远不会达到已完成的状态，这导致它永远不会离开列表，从而导致项目堆积在顶部，这样，屏幕上一次只会创建一个项目，所以它仍然存在。

为了说明这一点，我附上了两张图片，第一张是两个项目上升的，第二张是在项目 1 到达顶部后从列表中删除的，而项目 2 神秘地跳到了项目 1 的位置并停留在那里，从未出现过。离开名单：

如果您能看一下、测试一下并提供一些线索，我将不胜感激，因为我已经被困了好几天（实际上是晚上）。 🙏

Answer 1

该特定实现的解决方案是在 ItemWidget 构造函数上将“required ValueKey key”更改为“required super.key”。