Flutter中如何移除Scaffold内Stack-PageView上方的多余空白

核心问题原因 #

1. SafeArea 会自动为状态栏预留顶部空白，这是图片上方出现空白的主要诱因；
2. 图片外层的 SizedBox 未设置合理尺寸，且未借助布局组件让图片填充可用空间。

具体修复步骤 #

步骤1：调整或移除SafeArea

如果引导页需要全屏显示，二选一即可：

// 方案一：直接移除SafeArea（推荐全屏场景）
body: Stack(...)

// 方案二：保留SafeArea但禁用顶部状态栏预留
body: SafeArea(
  top: false, // 关键参数：取消顶部空白预留
  child: Stack(...),
)

步骤2：让图片填充可用空间

修改OnBoardPage内的Column布局，用Expanded包裹图片，确保它占据文本之外的所有空间：

OnBoardPage(
  boardColumn: Column(
    mainAxisSize: MainAxisSize.max,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Expanded( // 替换原SizedBox，让图片自动填充剩余空间
        child: Image.asset(
          'assets/images/1.png',
          fit: BoxFit.cover, // 适配容器同时保持图片比例
        ),
      ),
      // 下方文本组件保持不变
      const Padding(
        padding: EdgeInsets.only(left: 16.0, bottom: 10),
        child: Text(
          'Welcome to Fiesto',
          textAlign: TextAlign.left,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 44,
            color: Colors.white),
        ),
      ),
      const Padding(
        padding: EdgeInsets.only(left: 16.0),
        child: Text(
          'Book restaurants, cafes, banquet halls, marriage halls, etc',
          textAlign: TextAlign.left,
          style: TextStyle(
            fontWeight: FontWeight.normal,
            fontSize: 22,
            color: Colors.white),
        ),
      ),
    ],
  ),
)

步骤3：统一所有引导页布局

将其余OnBoardPage的图片布局按上述方式修改，保证页面一致性。

针对Scaffold->Column->Expanded结构项目的通用解决方案 #

遇到类似顶部空白时，按以下方向排查：

• 检查是否存在SafeArea自动添加的padding，可通过MediaQuery.removePadding或设置SafeArea(top: false)解决；
• 确认Column的mainAxisAlignment设置，若需子组件填充空间，配合Expanded使用；
• 检查图片/容器的尺寸配置，避免因未明确尺寸导致的布局留白。

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