使用persistent_bottom_nav_bar后AppBar高度异常及顶部留白问题

我使用persistent_bottom_nav_bar包实现全局底部导航时遇到两个问题：

• AppBar高度出现异常变化
• 给Scaffold添加SafeArea后，AppBar顶部出现留白

问题根源 #

1. 直接给根Scaffold嵌套SafeArea，会让SafeArea的padding覆盖整个Scaffold，包括AppBar所在区域，导致顶部出现留白
2. persistent_bottom_nav_bar自带的confineInSafeArea属性已经会处理底部安全区域，额外添加外层SafeArea会造成重复处理，进而影响AppBar高度

修复方案 #

1. 移除根Scaffold外层的SafeArea，避免与组件自带的安全区域处理冲突
2. 若页面内容需要适配安全区域，在各个子页面（如Dashboard、Order等）的内容区域单独添加SafeArea，而非在根页面统一添加
3. 保持子页面的AppBar正常使用，无需额外调整高度

修改后的根页面代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
      floatingActionButton: const TotalCartCount(),
      bottomNavigationBar: PersistentTabView(
        context,
        controller: _controller,
        screens: _buildScreens(),
        items: _navBarsItems(),
        confineInSafeArea: true, // 该属性已处理底部安全区域
        backgroundColor: Colors.white,
        handleAndroidBackButtonPress: true,
        resizeToAvoidBottomInset: true,
        stateManagement: true,
        hideNavigationBarWhenKeyboardShows: true,
        decoration: const NavBarDecoration(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0),
            topRight: Radius.circular(10.0),
          ),
          colorBehindNavBar: Colors.white,
        ),
        popAllScreensOnTapOfSelectedTab: true,
        popActionScreens: PopActionScreensType.all,
        itemAnimationProperties: const ItemAnimationProperties(
          duration: Duration(milliseconds: 200),
          curve: Curves.ease,
        ),
        screenTransitionAnimation: const ScreenTransitionAnimation(
          animateTabTransition: true,
          curve: Curves.ease,
          duration: Duration(milliseconds: 200),
        ),
        navBarStyle: NavBarStyle.style1,
      ));
}

子页面适配示例（以Dashboard为例） #

如果子页面需要处理顶部安全区域，仅在内容区域添加SafeArea，不影响AppBar：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: SafeArea(
        child: // 这里放置页面具体内容
      ),
    );
  }
}

通过以上修改，既能解决AppBar高度异常问题，也能消除顶部留白，同时保证底部导航栏的安全区域适配正常工作。

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