You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.01 03:33:19