Flutter实现点击FAB后BottomAppBar默认页面实时更新

我在首页配置了BottomAppBar，点击其中的FloatingActionButton后，希望默认页面（NewHomeScreen）能实时展示变化，但当前点击后无反应，仅刷新页面才会显示更改。已尝试SharedPreference和eventBus方案，仍未解决。相关代码如下：

late Widget currentScreen;
int currentTab = 0;

void initState() {
  super.initState();
  currentScreen = const NewHomeScreen();
}

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
BottomAppBar(
  color: Colors.transparent,
  elevation: 0,
  shape: const CircularNotchedRectangle(),
  notchMargin: 10,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          MaterialButton(
            minWidth: 40,
            onPressed: () {
              setState(() {
                currentScreen = const NewHomeScreen();
                currentTab = 0;
              });
            },
            child: Icon(
              Icons.home_filled,
              color: currentTab == 0
                  ? const Color(0xffF8D62B)
                  : const Color(0xff7C878C),
            ),
          ),
          const SizedBox(
            width: 20,
          ),
          MaterialButton(
            minWidth: 40,
            onPressed: () {
              setState(() {
                currentScreen = const CalenderUi();
                currentTab = 1;
              });
            },
            child: Icon(
              Icons.calendar_month_rounded,
              color: currentTab == 1
                  ? const Color(0xffF8D62B)
                  : const Color(0xff7C878C),
            ),
          ),
        ],
      ),
      Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          MaterialButton(
            minWidth: 40,
            onPressed: () {
              setState(() {
                currentScreen = const ProfileUiScreen();
                currentTab = 3;
              });
            },
            child: Icon(
              Icons.person_outline_rounded,
              color: currentTab == 3
                  ? const Color(0xffF8D62B)
                  : const Color(0xff7C878C),
            ),
          ),
          const SizedBox(
            width: 20,
          ),
          MaterialButton(
            minWidth: 40,
            onPressed: () {
              _drawerKey.currentState?.toggle();
              draweropen = !draweropen;
            },
            child:Icon(
              draweropen ? Icons.clear : Icons.menu,
              color: currentTab == 4
                  ? const Color(0xffF8D62B)
                  : const Color(0xff7C878C),
            ),
          ),
        ],
      ),
    ],
  ),
),

核心问题与修复方案 #

问题根源 #

1. const构造器缓存：给NewHomeScreen添加了const修饰，Flutter会缓存这个const实例，即使调用setState，也会判定Widget无变化，不会触发重建。
2. FAB点击逻辑缺失：未提供FAB的点击代码，大概率是点击时没有正确触发NewHomeScreen的状态更新，或未通知父组件刷新。

具体修复步骤 #

• 移除const修饰：把currentScreen = const NewHomeScreen();改为currentScreen = NewHomeScreen();，避免const缓存导致无法重建。如果NewHomeScreen需要动态数据，确保其构造器不是const类型。
• 完善FAB点击逻辑：
  • 若NewHomeScreen是有状态组件，可通过GlobalKey获取其状态，在FAB点击时直接调用状态更新方法；
  • 或把需要更新的数据提升到父组件（当前带BottomAppBar的页面）作为状态，FAB点击时修改该状态并传递给NewHomeScreen，setState会触发父组件重建，NewHomeScreen同步更新。
• 确认页面展示逻辑：确保Scaffold的body直接使用currentScreen，示例如下：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: currentScreen,
      bottomNavigationBar: BottomAppBar(...),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 此处添加修改状态的逻辑，比如更新传递给NewHomeScreen的参数
          setState(() {});
        },
      ),
    );
  }
  

• 可选优化：用IndexedStack保留页面状态：如果需要切换页面时不重置状态，可改用IndexedStack管理页面：

  final List<Widget> screens = [
    NewHomeScreen(),
    CalenderUi(),
    ProfileUiScreen(),
  ];
  int currentTab = 0;
  
  // 将body部分替换为
  body: IndexedStack(
    index: currentTab,
    children: screens,
  ),
  

  修改currentTab并调用setState即可实时切换页面，同时保留页面状态。

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