Flutter Stack组件布局求助：红色容器需超出背景图底部居中

问题分析 #

你的代码存在两个核心问题：

• 冗余的Stack嵌套：外层的Stack和Column完全没必要，徒增布局复杂度；
• 红色容器被固定高度的SizedBox限制：内层Stack的父组件是高度为Get.height*0.29的SizedBox，导致红色容器无法突破这个范围，自然达不到“部分区域超出背景图下方”的效果。

解决方案 #

简化布局结构，用一个主Stack承载所有元素，通过Positioned精准控制红色容器的位置，让它突破背景区域的高度限制：

class TierView extends StatelessWidget {
  const TierView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 顶部背景区域（图片、半透明遮罩、AppBar）
          SizedBox(
            height: Get.height * 0.29,
            width: double.infinity,
            child: Stack(
              children: [
                Image.asset(
                  ImagesConstants.map_two_image,
                  fit: BoxFit.cover, // 确保图片填满容器，优化显示效果
                ),
                Container(
                  height: Get.height * 0.28,
                  color: const Color(0xFF0346A0).withOpacity(.5),
                ),
                Column(
                  children: [
                    Spaces.mid,
                    GlobalAppBar(
                      actionImage: ImagesConstants.filterListLight,
                      bgActionColor: const Color(0xFF1D406E),
                      appBarColor: Colors.transparent,
                      title: "Select Location",
                      actionButton: () {},
                      titleColor: Colors.white,
                    ),
                  ],
                ),
              ],
            ),
          ),
          // 红色容器：底部居中，一半超出背景图下方
          Positioned(
            bottom: -45, // 容器高度90，负数设置让一半区域超出背景下方
            left: (Get.width - Get.width * 0.5) / 2, // 计算左右间距实现水平居中
            child: Container(
              height: 90,
              width: Get.width * 0.5,
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }
}

关键修改点 #

1. 移除外层冗余的Column和Stack，直接用一个主Stack作为Scaffold的body；
2. 将红色容器从内层Stack移到主Stack中，脱离固定高度的SizedBox约束；
3. 通过Positioned的bottom: -45让容器部分超出背景区域，left属性计算实现水平居中；
4. 给Image添加fit: BoxFit.cover，避免图片拉伸或留白问题。

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