能否在主容器边框处实现容器叠加UI？无需Stack可行吗？

当然可以实现，下面是两种无需使用Stack组件的可行方案：

方案1：负margin偏移 + 父容器留白 #

主容器通过padding在对应位置留出空间，小容器利用负margin偏移到主容器的边框区域，借助Flutter子组件的绘制顺序（后添加的组件层级更高）实现叠加效果。

示例代码：

Container(
  // 顶部留出小容器的高度，避免内部内容被遮挡
  padding: const EdgeInsets.only(top: 20),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey, width: 1),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    children: [
      // 小容器通过负margin向上偏移，覆盖在主容器边框上
      Container(
        margin: const EdgeInsets.only(top: -30),
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(color: Colors.grey, width: 1),
          borderRadius: BorderRadius.circular(4),
        ),
        child: const Text("标题"),
      ),
      // 主容器内部内容
      const Padding(
        padding: EdgeInsets.all(16),
        child: Text("主容器内部内容"),
      ),
    ],
  ),
)

方案2：Transform.translate平移 #

通过Transform.translate组件直接控制小容器的位置，将其平移到主容器的边框处，同样需要父容器提前留白避免内容遮挡。

示例代码：

Container(
  padding: const EdgeInsets.only(top: 20),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey, width: 1),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    children: [
      Transform.translate(
        // 向上平移指定距离，让小容器覆盖在主容器边框上
        offset: const Offset(0, -30),
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Colors.grey, width: 1),
            borderRadius: BorderRadius.circular(4),
          ),
          child: const Text("标题"),
        ),
      ),
      const Padding(
        padding: EdgeInsets.all(16),
        child: Text("主容器内部内容"),
      ),
    ],
  ),
)

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