Flutter中如何让AppBar覆盖状态栏？主页AppBar不生效求助

问题原因 #

你的主屏幕Scaffold的body顶部添加了buildSizedBoxHeight(16)，导致嵌套Navigator内的所有页面整体下移，子页面的AppBar无法贴近状态栏；同时，父Scaffold未配置AppBar，系统不会自动处理状态栏与子页面AppBar的融合逻辑。

解决方案 #

步骤1：移除主屏幕的顶部间距 #

修改主屏幕代码，删除Column中顶部的buildSizedBoxHeight(16)，让嵌套Navigator的内容顶到屏幕顶部：

return Scaffold(
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // 移除顶部间距
      Expanded(
        child: Navigator(
          initialRoute: '/main',
          key: Utils.mainListNav,
          onGenerateRoute: (settings) {
            Widget page;
  
            switch (settings.name) {
              case '/main':
                page = const HomeScreen(appBarTitle: Text('Home'));
                break;
              case '/favorite':
                page = const Center(
                  child: Text('Favorite Page'),
                );
                break;
              case '/shoppingcart':
                page = const ProductCart(appBarTitle: Text('Shopping Cart'),);
                break;
              case '/profile':
                page = const Center(
                  child: Text('Profile Page'),
                );
                break;
              default:
                page = const HomeScreen(appBarTitle: Text('Home'));
                break;
            }
            return PageRouteBuilder(
              pageBuilder: (context, animation, secondaryAnimation) => page,
              transitionDuration: const Duration(seconds: 0),
            );
          },
        ),
      ),
      const BottomNavBar()
    ],
  ),
);

步骤2：配置子页面AppBar的状态栏样式 #

在HomeScreen的AppBar中添加systemOverlayStyle，让状态栏背景与AppBar颜色一致，实现“覆盖”效果：

return Scaffold(
  appBar: AppBar(
    automaticallyImplyLeading: false,
    title: widget.appBarTitle,
    // 配置状态栏样式
    systemOverlayStyle: SystemUiOverlayStyle(
      statusBarColor: AppColors.kPrimaryColor, // 与AppBar背景色匹配
      statusBarIconBrightness: Brightness.light, // 根据背景色设置图标明暗
    ),
  ),
  body: Column(
    // 剩余代码保持不变
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const MySearchBar(),
      buildSizedBoxHeight(24),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Text(
          AppStrings.kSelectCategoryText,
          style: AppStyles.kSelectCategoryTextStyle,
        ),
      ),
      buildSizedBoxHeight(20),
      SizedBox(
        height: 70,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 3,
          itemBuilder: (context, index) {
            final tabItem = tabBarText[index];
            return GestureDetector(
              onTap: () {
                setState(() {
                  selectedTabIndex = index;
                });
              },
              child: Container(
                margin: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color: selectedTabIndex == index
                      ? AppColors.kPrimaryColor
                      : AppColors.kWhiteColor,
                  borderRadius: BorderRadius.circular(8),
                ),
                height: 40,
                width: 100,
                child: Center(
                  child: Text(
                    tabItem.tabName!,
                    style: TextStyle(
                        color: selectedTabIndex == index
                            ? Colors.white
                            : Colors.black),
                  ),
                ),
              ),
            );
          },
        ),
      )
    ],
  ),
);

可选：统一管理状态栏样式 #

如果所有子页面的状态栏样式一致，可在主屏幕最外层添加AnnotatedRegion，避免每个页面重复配置：

return AnnotatedRegion<SystemUiOverlayStyle>(
  value: SystemUiOverlayStyle(
    statusBarColor: AppColors.kPrimaryColor,
    statusBarIconBrightness: Brightness.light,
  ),
  child: Scaffold(
    // 主屏幕原有代码
  ),
);

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