Flutter 如何在不修改已有Stack结构的前提下在其子节点间插入覆盖组件

以下两种方案都可以在不修改原有Stack子节点列表的前提下，达成container1 → container2 → container3的层叠顺序：

方案1：CompositedTransform 联动对齐（适配外层带Transform的场景，推荐） #

该方案利用Flutter自带的变换同步组件，不受外层Transform、旋转、缩放等效果的影响，定位精度100%：

• 先声明一个全局LayerLink对象，用于位置同步

final LayerLink container1Link = LayerLink();
final LayerLink container3Link = LayerLink();

• 给原有Stack内的两个子节点分别套上CompositedTransformTarget绑定对应的Link，不需要修改原有Stack的子节点数量

// 原有被Transform包裹的Stack代码示例
Transform(
  transform: yourTransformMatrix,
  child: Stack(
    children: [
      CompositedTransformTarget(
        link: container1Link,
        child: container1,
      ),
      CompositedTransformTarget(
        link: container3Link,
        child: container3,
      ),
    ],
  )
)

• 给上述整个组件套一个父级Stack，父Stack的子节点按如下顺序排列，自动实现目标层叠效果

Stack(
  clipBehavior: Clip.none,
  children: [
    // 原有被Transform包裹的整个组件，把container3设置为全透明仅保留位置同步
    Opacity(
      opacity: 0,
      child: /* 上面的原有Transform+Stack组件 */,
    ),
    // 同步container1位置的container2
    CompositedTransformFollower(
      link: container1Link,
      showWhenUnlinked: false,
      offset: Offset.zero,
      child: container2,
    ),
    // 同步container3位置的顶层container3
    CompositedTransformFollower(
      link: container3Link,
      showWhenUnlinked: false,
      offset: Offset.zero,
      child: container3,
    )
  ],
)

方案2：zIndex 强制指定层级（轻量场景适用） #

如果所有组件都处于同一个合成层下，可以直接通过设置渲染对象的z轴优先级调整层叠顺序，不需要改动节点结构：

• 给container1设置zIndex = 0，container2设置zIndex = 1，container3设置zIndex = 2
• Flutter渲染时会优先按照z值从低到高层叠，和组件在树中的排列顺序无关，直接达到目标效果

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