Flutter中更改Stack内AnimatedPositioned父级并实现平滑位移的实现问题

核心问题解答 #

• Flutter中不能直接更改组件的父级归属：你构思的直接将同一个Widget实例从底部Stack移除后添加到中央Stack的方案不可行。因为Flutter的Widget是不可变的配置对象，而非渲染实体，同一个Widget实例挂载到不同父节点会触发Element树匹配异常，无法直接保留原有状态和渲染属性。
• 要实现类似DOM移动节点的效果，不需要真的移动Widget实例，只需要保证前后渲染的组件配置、状态完全一致，同时通过过渡动画衔接位置变化即可，视觉上和直接移动节点没有区别。

可行实现方案（原有思路的改良版，实测可用） #

实现步骤： #

1. 给需要移动的目标组件绑定GlobalKey，点击组件时通过以下代码获取它在屏幕上的绝对坐标和实际尺寸，作为动画的起始参数：

final renderObj = targetGlobalKey.currentContext?.findRenderObject() as RenderBox?;
final startOffset = renderObj?.localToGlobal(Offset.zero); // 组件在屏幕的左上角坐标
final size = renderObj?.size; // 组件的实际尺寸

2. 临时隐藏底部Stack中的原组件：可以直接将该组件从Stream生成的子组件列表中移除，也可以临时设置Opacity为0避免闪烁。
3. 在页面的根级Stack（你可以在最外层套一个全屏Stack，层级高于底部Stack和中央Stack）中插入一个和目标组件完全相同的临时过渡组件，将它的初始位置设置为上一步拿到的startOffset，尺寸设置为拿到的size。
4. 驱动该临时过渡组件执行位移动画，目标位置为中央Stack的预期摆放位置，动画结束后销毁临时过渡组件，同时将该组件的配置和对应的状态数据添加到中央Stack的子组件列表中，由中央Stack正常渲染即可。

状态保留方案： #

如果需要保留组件的内部状态（比如用户输入、动画进度等），将状态提升到两个Stack的共同父级，或者用状态管理工具（Provider、Riverpod、Bloc等）统一存储该组件的状态数据，不管是在底部Stack渲染还是中央Stack渲染，都从同一个状态源读取配置，就能实现状态完全同步，和直接移动DOM节点的效果完全一致。

需求示意图 #

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