Flutter应用Bottom Navigation Bar跨页面不持久的问题咨询

问题原因 #

你当前使用Navigator.pushReplacement()跳转页面，这个方法会替换导航栈中的当前页面：从Calendar页面跳转至AddEventScreen时，包含底部导航栏的MainScreen会被从栈中移除；后续再用pushReplacement跳回Calendar时，此时的Calendar是独立页面，不在MainScreen的body容器内，自然没有底部导航栏。

解决方案 #

核心思路是让AddEventScreen作为MainScreen的子页面弹出，保留MainScreen在导航栈中，返回时直接回到MainScreen即可恢复底部导航栏。

1. 修改跳转AddEventScreen的代码

将Calendar页面中跳转按钮的pushReplacement改为push：

// 原代码
Navigator.of(context).pushReplacement(
    MaterialPageRoute(builder: (context) => AddEventScreen()));

// 修改后
Navigator.of(context).push(
    MaterialPageRoute(builder: (context) => AddEventScreen()));

2. 修改AddEventScreen返回的代码

在Save和Delete按钮中，用Navigator.pop(context)替代pushReplacement，直接回到上一层的MainScreen：

// Save按钮原代码
Navigator.of(context).pushReplacement(MaterialPageRoute(
    builder: (context) => const AppointmentCalendarScreen()));

// 修改后
Navigator.pop(context);

// Delete按钮原代码
Navigator.of(context).pushReplacement(
    MaterialPageRoute(builder: (context) => AppointmentCalendarScreen()));

// 修改后
Navigator.pop(context);

3. 确保MainScreen的页面索引正确

因为MainScreen始终在导航栈中，跳转前它的_pageIndex已经是Calendar对应的索引（2），返回后会自动显示Calendar页面，底部导航栏的选中状态也会保持。

额外优化：刷新Calendar页面数据 #

如果需要在AddEventScreen操作完成后刷新Calendar页面的数据，可以在push后等待返回结果，触发状态刷新：

// Calendar页面的跳转按钮
onPressed: () async {
  setState(() {
    showSpinner = true;
  });
  try {
    ref.read(globalsNotifierProvider.notifier).updatenewEvent(true);
    // 等待AddEventScreen返回
    await Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => AddEventScreen()));
    // 触发状态刷新，重新获取日历数据
    setState(() {});
    setState(() {
      showSpinner = false;
    });
  } catch (e) {
    print(e);
  }
},

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