Flutter：实现白色容器滚动覆盖红色背景的堆叠布局效果咨询

你要的这种视觉效果，其实可以简化实现，原代码里有一些冗余设置可以优化，下面是更简洁的实现思路和代码：

优化思路 #

• 红色背景不需要铺满全屏，只需要顶部固定高度（和下方容器的top间距对应）即可，多余部分会被白色区域覆盖
• 滚动容器的高度不需要设为屏幕高度，用minHeight保证容器至少占满剩余屏幕空间，内容超出时自然滚动
• 统一设置背景色，避免重复定义

优化后代码 #

Scaffold(
  backgroundColor: const Color.fromRGBO(250, 250, 250, 1),
  body: Stack(
    children: [
      // 顶部红色背景区域
      Container(
        height: 250,
        color: Colors.red,
      ),
      // 可滚动的白色圆角容器
      SingleChildScrollView(
        child: Container(
          margin: const EdgeInsets.only(top: 230), // 比红色区域高度小20，露出部分红色背景
          padding: const EdgeInsets.all(16), // 可选：给内容加内边距
          minHeight: MediaQuery.of(context).size.height - 230,
          width: double.infinity,
          decoration: const BoxDecoration(
            color: Color.fromRGBO(250, 250, 250, 1),
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(48),
              topRight: Radius.circular(48),
            ),
          ),
          // 这里可以添加你的滚动内容，比如Text、ListView等
          child: const Column(
            children: [
              Text("这里是滚动内容"),
              // 更多内容...
            ],
          ),
        ),
      ),
    ],
  ),
);

关键说明 #

1. 红色容器只设置固定高度250，刚好对应下方容器的margin.top（这里设为230，露出20px的红色背景，和你提供的效果图匹配）
2. 滚动容器用minHeight确保即使内容不足，也能占满剩余屏幕空间，避免底部留白
3. 去掉了多余的Positioned组件，因为Stack默认就是从上到下排列，用margin就能实现偏移效果
4. 可以直接在滚动容器的child里添加你的内容，内容超出屏幕时会自动滚动

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