Flutter动画异常:动画无法进入Completed状态,求专家协助
Flutter动画组件移除后位置跳变且无法完成动画问题
我开发的Speak Out Kids应用有个新游戏功能,这款应用旨在鼓励儿童尤其是自闭症儿童开口说话(灵感来自我的儿子),但我在Flutter动画上卡了三天,遇到了棘手的问题。
功能逻辑
- 通过定时器创建新Widget,它们从屏幕底部出现并向上移动,到达顶部时应消失,测试阶段列表内最多保留3个项
- 在
TestGamePageState中维护一个ItemWidget列表(_items),每个ItemWidget包含简单的Text Widget(如“Item 1”“Item 2”等) - 每个组件由
AnimationController控制其上升动画,当动画结束进入completed状态时,触发Widget的onLeavingScreen回调,调用TestGamePage的removeById(id)方法将组件从_items列表中移除,使其从屏幕消失并为新组件腾出空间
问题现象
一切正常,直到屏幕上同时有两个组件上升:第一个到达顶部后正常消失,但下方的组件会跳至已消失组件的位置,且该组件的动画永远无法进入completed状态,导致它无法从列表中移除,进而出现顶部组件堆积,后续每次只能创建一个组件的情况。
直观展示
- 两个组件正在上升的状态:

- ITEM 1到达顶部被移除后,ITEM 2跳至ITEM 1位置并停留在那里的状态:

我已经准备了简化版本的代码用于复现问题,恳请帮忙查看、测试并指点迷津,我已经为此困扰多日了。🙏
内容的提问来源于stack exchange,提问作者Emerson
相关产品推荐
相关产品推荐

