无法使用Stack widget时，如何让一个组件覆盖另一个组件？

如果没法用Stack，以下几种思路可以实现组件覆盖效果：

• 利用Transform偏移实现覆盖
  通过Transform.translate调整组件的位置偏移，让上层组件覆盖在底层组件上。代码示例：

Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  child: Transform.translate(
    offset: Offset(50, 50), // 向右向下偏移50
    child: Container(
      width: 100,
      height: 100,
      color: Colors.red.withOpacity(0.5),
    ),
  ),
)

这种方式简单直接，适合小范围的位置调整。

• 自定义布局控制位置
  用CustomSingleChildLayout自定义布局代理，完全掌控子组件的位置，实现精准覆盖。示例：

CustomSingleChildLayout(
  delegate: _OverlayLayoutDelegate(),
  child: Column(
    children: [
      Container(width: 200, height: 200, color: Colors.blue),
      Container(width: 100, height: 100, color: Colors.red.withOpacity(0.5)),
    ],
  ),
)

class _OverlayLayoutDelegate extends SingleChildLayoutDelegate {
  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    return constraints;
  }

  @override
  Offset getPositionForChild(Size parentSize, Size childSize) {
    // 让上层组件偏移到底层组件的右上角位置
    return Offset(50, 50);
  }

  @override
  bool shouldRelayout(covariant SingleChildLayoutDelegate oldDelegate) {
    return false;
  }
}

适合需要复杂布局逻辑的场景，自由度很高。

• 负边距偏移实现覆盖
  给上层组件设置负的margin值，利用父布局的排版规则让它覆盖到底层组件上。示例：

Column(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 100,
      margin: EdgeInsets.only(top: -150, left: 50), // 向上偏移150，向左偏移50
      color: Colors.red.withOpacity(0.5),
    ),
  ],
)

这种方式依赖父布局的方向（比如Column是垂直方向），适合简单的覆盖场景，代码量少。

• 局部使用Overlay实现层叠
  通过Overlay和OverlayEntry在局部插入覆盖组件，类似全局弹窗的局部版。示例：

class LocalOverlayDemo extends StatefulWidget {
  @override
  _LocalOverlayDemoState createState() => _LocalOverlayDemoState();
}

class _LocalOverlayDemoState extends State<LocalOverlayDemo> {
  OverlayEntry? _overlayEntry;

  @override
  void initState() {
    super.initState();
    _overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        left: 50,
        top: 50,
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red.withOpacity(0.5),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Overlay(
        initialEntries: [
          OverlayEntry(
            builder: (context) => Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
          ),
          if (_overlayEntry != null) _overlayEntry!,
        ],
      ),
    );
  }

  @override
  void dispose() {
    _overlayEntry?.remove();
    super.dispose();
  }
}

如果你的场景允许使用Overlay而不能用Stack，这是个不错的替代方案，适合需要动态显示/隐藏覆盖组件的场景。

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