使用persistent_bottom_nav_bar_v2时AppBar全局显示问题求助

问题核心在于你把AppBar放在了包裹PersistentTabView的外层Scaffold中，导致所有在这个PersistentTabView上下文里的页面（包括通过pushNewScreen跳转的页面）都会继承这个全局AppBar。要实现仅指定主页面显示AppBar，可以按以下步骤修改：

1. 移除外层Scaffold的AppBar配置 #

修改主页面的build方法，删除外层Scaffold的appBar属性：

@override
Widget build(BuildContext context) {
  return FancyDrawerWrapper(
    cornerRadius: 30.0,
    controller: fancyDrawerController!,
    backGroundImage: Assets.imagesDrawerBackground,
    drawerItems: DrawerScreen(fancyDrawerController: fancyDrawerController!),
    child: Obx(() {
      return Scaffold(
        // 移除这里的appBar配置
        body: PersistentTabView(
          context,
          controller: kmainController.tabController?.value,
          navBarHeight: 60,
          padding: const NavBarPadding.all(5),
          onItemSelected: (value) {
            kmainController.selectedBottomBarIndex.value = value;
          },
          screens: getUserType() == UserTypeEnum.Staff ? staffPageList : pageList,
          items: getUserType() == UserTypeEnum.Staff ? staffNavBar() : adminOwnerNavBar(),
          backgroundColor: AppColors.white,
          resizeToAvoidBottomInset: true,
          hideNavigationBar: false,
          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,
        ),
      );
    }),
  );
}

2. 将AppBar移到对应主页面的内部Scaffold中 #

把原本在主页面中根据索引判断的AppBar，分别放到pageList和staffPageList的每个页面里：

以HomePage为例：

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: getHomePageAppbar(), // 加入对应的AppBar
      body: // 原HomePage的页面内容
    );
  }
}

同理修改其他主页面：

• WearHouseScreen中添加appBar: getWareHouseAppbar()
• OrderScreen中添加appBar: getOrderAppbar()
• ProfileScreen中添加appBar: getProfileAppbar()

针对Staff用户的页面，比如staffPageList里的对应页面，同样把对应的AppBar移到页面内部：

• Staff的第一个页面添加appBar: getOrderAppbar()
• 第二个页面添加appBar: getWareHouseAppbar()
• 第三个页面添加appBar: getMessageAppBar()
• 第四个页面添加appBar: getProfileAppbar()

3. 跳转页面的控制 #

通过pushNewScreen跳转的页面，你可以根据需求决定是否添加AppBar：如果不需要，就不在该页面的Scaffold中设置appBar属性；如果需要自定义，直接在页面内部配置即可。

这样修改后，只有pageList和staffPageList里的主页面会显示对应的AppBar，跳转后的页面不会继承外层的AppBar，完全符合你的需求。

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