如何去除Flutter Android应用中AppBar的额外空白？

问题描述 #

使用AppBar搭配TabBar构建页面时，屏幕顶部出现无法消除的额外空白（黑线），移除AppBar后视图显示正常。已尝试在Scaffold外层添加SafeArea、手动设置AppBar高度等方法，均无效。

相关代码 #

主入口页面 #

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Sample',
      localizationsDelegates: const [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en'),
        Locale('pl'),
      ],
      theme: theme,
      routerConfig: router,
    );
  }
}

路由配置 #

final GoRouter router = GoRouter(
  initialLocation: "/",
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return SomePage(navController: _navController);
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'page1',
          pageBuilder: (BuildContext context, GoRouterState state) => CupertinoPage(child: OtherPage1(navController: _navController)),
        ),
        GoRoute(
          path: 'page2',
          pageBuilder: (BuildContext context, GoRouterState state) => CupertinoPage(child: OtherPage2(navController: _navController)),
        )
      ],
    ),
  ],
);

目标页面（带AppBar和TabBar） #

class SomePage extends StatelessWidget {
  final NavController navController;

  const SomePage({super.key, required this.navController});

  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
        providers: [
          /* 无关代码已省略 */
        ],
        child: DefaultTabController(
          length: 3,
          child: BlocBuilder<CountersCubit, Counters>(
            builder: (blockContext, state) {
              FocusScopeNode currentFocus = FocusScope.of(blockContext);
              return Scaffold(
                appBar: AppBar(
                  leading: IconButton(
                      onPressed: () => { Navigate.back(navController) },
                      icon: const Icon(Icons.arrow_back)),
                  bottom: TabBar(
                    isScrollable: true,
                    indicatorSize: TabBarIndicatorSize.label,
                    indicatorColor: Colors.blue,
                    indicatorWeight: 3.0,
                    tabs: [
                      Tab(
                          text: processTextTabLabel(
                              label: AppLocalizations.of(context)!
                                  .header_view1,
                              counter: state.view1)),
                      Tab(
                          child: badges.Badge(
                        showBadge: false,
                        child: Text(processTextTabLabel(
                            label: AppLocalizations.of(context)!
                                .header_view2,
                            counter: state.view2)),
                      )),
                      Tab(
                          text: processTextTabLabel(
                              label: AppLocalizations.of(context)!
                                  .header_view3,
                              counter: state.view3)),
                    ],
                  ),
                  title: Text(AppLocalizations.of(context)!.header_title),
                ),
                body: TabBarView(
                  children: [
                    View1(navController: navController),
                    View2(navController: navController),
                    View3(navController: navController)
                  ],
                ),
              );
            },
          ),
        ));
  }
}

已尝试的方法 #

• 在Scaffold外层添加SafeArea组件
• 手动设置AppBar的height属性

解决方案 #

针对这个问题，以下几种方案可以尝试：

方案1：禁用SafeArea顶部适配（避免重复处理状态栏） #

如果之前给Scaffold套了SafeArea，尝试关闭顶部的自动适配——AppBar本身会处理状态栏padding，重复的SafeArea会导致额外空白：

return SafeArea(
  top: false, // 关闭顶部SafeArea，让AppBar自行处理状态栏
  child: Scaffold(
    // 原有Scaffold代码
  ),
);

方案2：统一状态栏与AppBar背景色 #

通过systemOverlayStyle将状态栏颜色设置为和AppBar一致，消除颜色差导致的"黑线"视觉效果：

appBar: AppBar(
  // 原有AppBar配置
  systemOverlayStyle: SystemUiOverlayStyle(
    statusBarColor: Theme.of(context).appBarTheme.backgroundColor, // 与AppBar背景色对齐
    statusBarIconBrightness: Brightness.dark, // 根据背景色调整图标亮度
  ),
),

方案3：手动指定AppBar的总高度 #

当AppBar包含bottom: TabBar时，默认高度计算可能出现偏差，手动指定包含TabBar的总高度：

appBar: AppBar(
  // 原有AppBar配置
  bottom: TabBar(...), // 你的TabBar代码
  preferredSize: const Size.fromHeight(kToolbarHeight + 48), // kToolbarHeight是默认工具栏高度，48为TabBar默认高度
),

方案4：消除AppBar阴影（如果黑线是阴影） #

如果所谓的"黑线"是AppBar的阴影，设置elevation: 0移除阴影：

appBar: AppBar(
  elevation: 0, // 移除AppBar阴影
  // 原有配置
),

方案5：解决CupertinoPage与Material组件的冲突 #

由于子页面使用了CupertinoPage，其页面过渡样式可能与Material的AppBar产生冲突，尝试将子页面的CupertinoPage替换为MaterialPage：

GoRoute(
  path: 'page1',
  pageBuilder: (BuildContext context, GoRouterState state) => MaterialPage(child: OtherPage1(navController: _navController)),
),

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