Flutter引导页实现问题：顶部展示图片+底部堆叠形状

核心调整点 #

• 顶部独立图片：替换DecorationImage为Image.asset组件，直接作为独立UI元素展示，而非容器背景
• 底部堆叠形状：通过Stack嵌套定位容器模拟堆叠层次感，也可结合自定义路径实现复杂形状

修正后的代码示例 #

Scaffold(
  backgroundColor: AppStyles.bgColor,
  body: SizedBox(
    width: Get.width,
    height: Get.height,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        // 顶部独立展示的图片
        const Padding(
          padding: EdgeInsets.only(top: 100),
          child: Image(
            width: 100,
            height: 200,
            fit: BoxFit.cover,
            image: AssetImage("lib/assets/images/one.png"),
          ),
        ),
        // 底部堆叠形状区域
        Stack(
          children: [
            // 底层主形状
            Container(
              width: Get.width,
              height: Get.height * 0.45,
              color: Colors.blue,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
            ),
            // 上层堆叠的卡片（模拟堆叠效果）
            Positioned(
              bottom: 40,
              left: 20,
              right: 20,
              child: Container(
                height: 80,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.2),
                      blurRadius: 8,
                      offset: const Offset(0, 2),
                    )
                  ],
                ),
              ),
            ),
            Positioned(
              bottom: 20,
              left: 40,
              right: 40,
              child: Container(
                height: 80,
                decoration: BoxDecoration(
                  color: Colors.lightBlue[100],
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),
          ],
        )
      ],
    ),
  ),
);

代码说明 #

1. 顶部图片：用Image.asset直接替代容器背景图，确保是独立的视觉元素，完全符合需求
2. 底部堆叠效果：通过Stack+Positioned实现多层容器的错位堆叠，添加阴影和圆角增强层次感；如果需要更复杂的曲线/异形堆叠，可替换为ClipPath自定义绘制路径
3. 布局优化：使用MainAxisAlignment.spaceBetween让顶部图片和底部区域分别占据上下空间，中间预留位置可添加引导文本、跳转按钮等引导页必备元素

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