Flutter如何在保留首个Container宽度的前提下重叠两个Container

方案1：基础重叠（无溢出需求） #

对应CSS负边距的实现，用Transform.translate给第二个Container设置负水平偏移即可，不会改变首个Container的宽度，布局占位也符合预期：

Container(
  // 若首个Container宽度自适应内容，可替换为IntrinsicWidth()包裹Row
  width: 200,
  child: Row(
    children: [
      // 首个Container，正常参与布局计算
      Expanded(
        child: Container(
          height: 100,
          color: Colors.blueAccent,
          child: const Text("首个Container"),
        ),
      ),
      // 第二个Container设置负偏移实现重叠
      Transform.translate(
        offset: const Offset(-30, 0), // 数值为重叠宽度，对应CSS margin-left: -30px
        child: Container(
          width: 60,
          height: 60,
          decoration: const BoxDecoration(
            color: Colors.redAccent,
            shape: BoxShape.circle,
          ),
        ),
      )
    ],
  ),
)

方案2：结合Stack实现溢出Card效果 #

解决Stack不占用布局空间的问题：将首个Container作为Stack的非定位子节点（不包Positioned），Stack会自动适配首个Container的宽高作为自身尺寸，第二个子节点用负偏移实现溢出：

Card(
  clipBehavior: Clip.none, // 必须设置，允许内容溢出Card边界
  child: Stack(
    clipBehavior: Clip.none, // 必须设置，允许内容溢出Stack边界
    children: [
      // 首个Container，决定Stack的整体布局尺寸
      Container(
        width: 200,
        height: 120,
        padding: const EdgeInsets.all(16),
        child: const Text("Card内部内容"),
      ),
      // 第二个Container设置负偏移实现重叠+溢出
      Positioned(
        right: -20,
        top: 30,
        child: Container(
          width: 60,
          height: 60,
          decoration: const BoxDecoration(
            color: Colors.green,
            shape: BoxShape.circle,
          ),
        ),
      )
    ],
  ),
)

注意事项 #

• 若首个Container宽度自适应内容，方案1给外层套IntrinsicWidth即可，无需写死宽度
• 溢出场景下必须给Card和Stack都设置clipBehavior: Clip.none，否则溢出部分会被默认裁剪
• Transform.translate仅改变组件绘制位置，不会影响布局占位计算，完全符合CSS负边距的使用逻辑

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