Flutter技术问询：如何用自定义Animator替代Navigator重实现Hero Transition

一、原生Hero Transition的核心实现机制 #

你的观察完全正确，Hero动画确实依赖Navigator的Overlay层实现跨路由过渡，具体流程如下：

• 注册与追踪：每个Hero组件会在Navigator内置的HeroController中注册，该控制器负责监听路由入栈/出栈事件，匹配源路由和目标路由中tag一致的Hero。
• Widget克隆与Overlay渲染：触发动画时，框架会克隆源Hero和目标Hero的Widget树，将克隆后的Widget放入HeroOverlay（属于Navigator的全局Overlay层，位于路由内容上方）。这个克隆体是独立于原路由Widget树的临时节点，专门用于过渡动画。
• 原始Widget的隐藏与交互保留：动画期间，原位置的Hero会被替换为Offstage组件（仅隐藏渲染，不会从Widget树中移除），因此原始Widget依然能响应父级的交互逻辑（比如Sliver的滚动、布局更新），动画结束后会自动恢复可见性。
• 动画同步与穿梭构建：过渡过程中，框架通过HeroFlightShuttleBuilder生成一个统一的"穿梭"Widget，基于源Hero的初始布局和目标Hero的最终状态，使用路由动画的参数（比如进度值）驱动位置、尺寸、透明度的平滑过渡，确保动画的连贯性。

二、自定义场景（折叠式导航器内）的Hero过渡实现思路 #

如果无法依赖Navigator的原生Hero机制，你可以手动复刻核心逻辑，适配折叠式导航器的内部状态切换：

• 自定义本地Overlay：在折叠式导航器的上层添加一个Overlay组件，专门承载过渡中的Hero Widget，替代Navigator的全局Overlay。
• 手动匹配与克隆：监听折叠式导航器的状态切换事件，通过tag匹配需要过渡的AppBar/NavigationBar组件，使用GlobalKey获取它们的布局信息，克隆对应的Widget树。
• 原始组件的临时隐藏：动画期间，通过Visibility或Offstage隐藏原始位置的目标组件，避免和Overlay中的克隆体重叠。
• 自定义动画控制器：使用AnimationController创建过渡动画，根据动画进度更新克隆Widget的位置、尺寸、透明度，同步匹配目标状态。动画结束后，销毁克隆体并恢复原始组件的可见性。
• 复用原生Hero的穿梭逻辑：可以直接复用HeroFlightShuttleBuilder的逻辑，简化过渡Widget的构建，保证动画效果和原生Hero一致。

内容的提问来源于stack exchange，提问作者Walrus