Flutter点击AppBar按钮setState后BottomNavigationBar消失如何解决

问题现象 #

点击导航索引为2的Adopt页面中，AppBar leading位置的收藏视图切换按钮后，固定在底部的BottomNavigationBar意外消失，无法正常切换导航。异常效果如下：

问题根因 #

• BottomNavigationBar未显式指定渲染类型：Flutter中当BottomNavigationBar的item数量≥4时，默认使用BottomNavigationBarType.shifting动效模式，该模式下父组件触发setState重绘时，若状态同步存在延迟，会出现导航栏整体渲染丢失的问题。
• 页面渲染逻辑缺陷：直接通过pages[_selectedIndex]渲染当前激活页面，未做页面状态缓存，父组件每次setState重建时，当前页面会被重新实例化，如果子页面内部嵌套了独立的顶层Scaffold，会直接覆盖父Scaffold的bottomNavigationBar配置，导致导航栏消失。
• 启动页跳转逻辑不规范：3秒后跳转首页的Timer逻辑写在SplashPage的build方法中，一旦SplashPage触发重建就会重复执行跳转，导致路由栈上下文错乱，影响首页Scaffold的正常渲染。

修复步骤 #

1. 给BottomNavigationBar显式添加type: BottomNavigationBarType.fixed配置，强制使用固定导航栏模式，禁用shifting动效模式的重绘逻辑。
2. 将body区域的页面渲染逻辑替换为IndexedStack，通过index属性控制当前显示的页面，同时缓存所有导航页的状态，避免父组件重建时子页面被重复初始化。
3. 将启动页的跳转Timer逻辑从build方法移到initState生命周期中，保证跳转逻辑只执行一次，避免路由栈错乱。
4. 校验三个业务子页面（Fit、BreedList、AdoptGrid）的内部结构，确保子页面不要嵌套独立的顶层Scaffold，如果确实需要使用Scaffold，需设置resizeToAvoidBottomInset: false且不要单独配置bottomNavigationBar属性，避免覆盖父级配置。

修正后关键代码 #

启动页代码修正 #

class _SplashPageState extends State<SplashPage> {
  @override
  void initState() {
    super.initState();
    // 跳转逻辑移至initState，避免build重复触发
    Timer(const Duration(seconds: 3),
        () => Get.off(const HomeScreen(title: 'Feline Finder')));
  }

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Feline Finder',
      theme: ThemeData(fontFamily: 'Poppins'),
      navigatorObservers: [routeObserver],
      home: Scaffold(
        body: Container(
          decoration: const BoxDecoration(color: Colors.white),
          child: Center(
            child: Image.asset("assets/Full/Launch.png",
                fit: BoxFit.cover,
                height: double.infinity,
                width: double.infinity,
                alignment: Alignment.center),
          ),
        ),
      ),
    );
  }
}

首页Scaffold代码修正 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
        title: const Text("Feline Finder"),
        leading: getLeadingButtons(_selectedIndex)),
    // 使用IndexedStack缓存页面状态
    body: IndexedStack(
      index: _selectedIndex,
      children: pages,
    ),
    bottomNavigationBar: BottomNavigationBar(
      // 显式指定固定导航类型
      type: BottomNavigationBarType.fixed,
      selectedItemColor: Theme.of(context).textSelectionTheme.selectionColor,
      currentIndex: _selectedIndex,
      onTap: _onItemTapped,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          backgroundColor: Colors.grey,
          icon: Icon(Icons.search),
          label: 'Fit',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.list),
          label: 'Breeds',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.card_membership),
          label: 'Adopt',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.favorite),
          label: 'Favorites',
        ),
      ],
    ),
  );
}

补充提示：当前收藏状态favoritesSelected存在首页State中，由于pages列表是static静态初始化的，AdoptGrid页面无法拿到最新的收藏开关状态。可以去掉pages的static修饰符，在build方法中根据最新的favoritesSelected值动态构建AdoptGrid实例，或者使用GetX响应式变量同步状态，保证子页面能正确响应普通/收藏视图的切换。

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