如何在Flutter的Column/Row中添加不占空间且覆盖相邻组件的Widget？

当然可以不用全局Stack，试试这两种简洁的方式：

方法一：用Transform.translate做视觉偏移 #

通过Transform.translate只改变图标的视觉位置，不占用原始布局空间，直接让图标覆盖在相邻组件交界处。

Column(
  children: [
    Container(
      height: 100,
      color: Colors.blue,
    ),
    // 覆盖在两个组件之间的图标
    Transform.translate(
      // 向上偏移图标高度的一半，刚好卡在交界处
      offset: Offset(0, -20),
      child: Icon(
        Icons.circle,
        size: 40,
        color: Colors.red,
      ),
    ),
    Container(
      height: 100,
      color: Colors.green,
    ),
  ],
)

调整offset的数值就能精准控制图标位置，换成Row的话，只需要修改水平方向的偏移值（比如Offset(-20, 0)）。

方法二：给单个组件套局部Stack #

把图标放到相邻组件的Stack子项里，用Positioned让它超出组件范围，覆盖到另一个组件上，不用给整个Column/Row套大Stack。

Column(
  children: [
    Stack(
      children: [
        Container(
          height: 100,
          color: Colors.blue,
        ),
        // 定位到容器底部中央，超出后覆盖下方组件
        Positioned(
          bottom: -20, // 超出容器底部20px
          left: 0,
          right: 0,
          child: Center(
            child: Icon(
              Icons.circle,
              size: 40,
              color: Colors.red,
            ),
          ),
        ),
      ],
    ),
    Container(
      height: 100,
      color: Colors.green,
    ),
  ],
)

这种方式把图标归属到单个组件的布局里，定位逻辑更聚焦，不会影响整个Column/Row的布局结构。

内容的提问来源于stack exchange，提问作者Mr. Clear