Flutter iOS端如何移除AppBar上方的多余空白？

这是iOS平台特有的状态栏适配问题，Flutter默认会为AppBar预留状态栏间距，当自定义toolbarHeight时，预留间距会和自定义高度叠加，导致顶部出现多余空白，图标无法垂直对齐。以下是几种实用的解决方式：

方法一：自定义PreferredSizeWidget（推荐） #

直接绕过默认AppBar的状态栏间距逻辑，完全自定义顶部栏布局和高度，确保图标完美居中：

Scaffold(
  appBar: PreferredSize(
    preferredSize: const Size.fromHeight(70), // 直接设置顶部栏总高度
    child: Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: SvgPicture.asset(
        Assets.mainLogo,
        width: 7.w,
      ),
    ),
  ),
);

方法二：移除AppBar的顶部内边距 #

通过toolbarPadding去掉顶部预留的状态栏间距，同时配合systemOverlayStyle确保状态栏图标和AppBar颜色适配：

Scaffold(
  appBar: AppBar(
    toolbarHeight: 70,
    backgroundColor: Colors.white,
    title: SvgPicture.asset(
      Assets.mainLogo,
      width: 7.w,
    ),
    centerTitle: true,
    toolbarPadding: const EdgeInsets.only(top: 0), // 移除顶部内边距
    systemOverlayStyle: const SystemUiOverlayStyle(
      statusBarColor: Colors.white, // 状态栏颜色与AppBar一致
      statusBarIconBrightness: Brightness.dark, // 适配深色状态栏图标
    ),
  ),
);

方法三：调整AppBar的整体高度计算 #

如果需要保留默认AppBar的其他功能（如leading、actions），可将toolbarHeight设置为自定义高度 + 状态栏高度，让预留的状态栏间距被包含在总高度内：

// 获取iOS状态栏高度
final statusBarHeight = MediaQuery.of(context).padding.top;

Scaffold(
  appBar: AppBar(
    toolbarHeight: 70 + statusBarHeight, // 总高度=自定义toolbar高度+状态栏高度
    backgroundColor: Colors.white,
    title: SvgPicture.asset(
      Assets.mainLogo,
      width: 7.w,
    ),
    centerTitle: true,
    systemOverlayStyle: const SystemUiOverlayStyle(
      statusBarColor: Colors.white,
      statusBarIconBrightness: Brightness.dark,
    ),
  ),
);

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