Flutter中两个Container组件堆叠布局问题求助

你的代码问题出在Positioned组件的放置位置错误——Positioned必须作为Stack的直接子组件才能生效，你现在把它放在Column里，定位规则根本不生效，自然达不到堆叠效果。

修正后的代码 #

body: Stack(
  children: [
    // Container A：作为底层容器
    Container(
      width: double.maxFinite,
      height: 300,
      // 这里添加你的A容器内容，比如背景色等
      color: Colors.blue,
    ),
    // Container B：通过Positioned定位在A上方
    Positioned(
      top: 250, // 距离Stack顶部250，刚好覆盖A的底部50px区域（A高度300）
      left: 0,
      right: 0,
      child: Container(
        height: 500,
        decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(25.0),
            topRight: Radius.circular(25.0),
          ),
        ),
      ),
    ),
  ],
),

关键说明 #

• 移除了多余的Column，直接把两个容器作为Stack的子元素
• Positioned的top值设为250（300-50），让黄色容器B从蓝色容器A的底部往上50px的位置开始堆叠，和你提供的效果图匹配
• 不需要给Container B设置width: double.maxFinite，因为Positioned已经通过left:0和right:0让它铺满横向空间

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