Flutter项目部分屏幕尺寸下通知栏与Toolbar出现间隙如何解决？

你遇到的间隙问题可通过以下几种方式排查解决： #

方案1：修正SafeArea嵌套逻辑 #

这类间隙90%以上的情况是错误地将Scaffold整体包裹在了SafeArea内部导致的：SafeArea会自动在顶部预留出状态栏高度的边距，而AppBar本身默认已经做了状态栏适配，两者叠加就会产生多余间隙。
正确的嵌套方式是仅将SafeArea放在Scaffold的body属性内，代码示例：

// 错误写法
@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      appBar: AppBar(title: const Text("页面标题")),
      body: const Text("页面内容"),
    ),
  );
}

// 正确写法
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text("页面标题")),
    body: const SafeArea(
      child: Text("页面内容"),
    ),
  );
}

方案2：调整AppBar适配属性 #

如果没有嵌套错误，请确认AppBar的primary属性保持为true（默认值即为true，若手动修改为false请改回），该属性会自动让AppBar适配顶部状态栏高度，同时不要手动修改toolbarHeight为小于默认值的高度。
你也可以手动配置Scaffold的extendBodyBehindAppBar属性为false，避免内容延伸到AppBar下方导致的视觉间隙：

Scaffold(
  extendBodyBehindAppBar: false,
  appBar: AppBar(
    primary: true,
    title: const Text("页面标题"),
  ),
  body: ...
)

方案3：手动移除顶部多余边距 #

如果以上方案都无效，可以手动给AppBar包裹MediaQuery.removePadding移除顶部系统默认边距：

Scaffold(
  appBar: PreferredSize(
    preferredSize: const Size.fromHeight(kToolbarHeight),
    child: MediaQuery.removePadding(
      context: context,
      removeTop: true,
      child: AppBar(
        title: const Text("页面标题"),
      ),
    ),
  ),
  body: ...
)

问题对应现象参考图：

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