Flutter中从HomeView跳转后如何切换底部导航栏至目标标签？

我的底部导航栏如下：

当点击Home标签中的元素（1）时，通过Navigator.of(context).push()跳转到My Learning标签（2）对应的详情页，但底部导航栏仍停留在Home标签，未切换至My Learning，请问该如何修复？

main_view_model（底部导航栏状态管理） #

BottomTabItemAfterSignIn _currentBottomTab = BottomTabItemAfterSignIn.home;

BottomTabItemAfterSignIn get currentBottomTab => _currentBottomTab;

void changeTab(BottomTabItemAfterSignIn tab, {bool isBackClick = false}) {
  if (_currentBottomTab != tab) {
    _currentBottomTab = tab;
  }
}

main_view（视图层） #

@override
Widget buildView(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      _onPressBackDevice();
      return false;
    },
    child: Selector<MainUserViewModel, BottomTabItemAfterSignIn>(
      selector: (_, viewModel) => viewModel.currentBottomTab,
      builder: (_, currentBottomTab, __) {
        return Scaffold(
          backgroundColor: AppColor.neutrals.shade900,
          body: _buildBody(),
          bottomNavigationBar: BottomNavigationUserWidget(
            currentTab: currentBottomTab,
            onSelectTab: _selectTab,
          ),
        );
      },
    ),
  );
}

Widget _buildBody() {
  if (viewModel.currentBottomTab == BottomTabItemAfterSignIn.home) {
    return _buildTabItem(
      BottomTabItemAfterSignIn.home,
      _cacheBottomTabWidgets[BottomTabItemAfterSignIn.home],
    );
  } else if (viewModel.currentBottomTab == BottomTabItemAfterSignIn.course) {
    return _buildTabItem(
      BottomTabItemAfterSignIn.course,
      _cacheBottomTabWidgets[BottomTabItemAfterSignIn.course],
    );
  } else if (viewModel.currentBottomTab ==
      BottomTabItemAfterSignIn.myLearning) {
    return _buildTabItem(
      BottomTabItemAfterSignIn.myLearning,
      _cacheBottomTabWidgets[BottomTabItemAfterSignIn.myLearning],
    );
  } else {
    return _buildTabItem(
      BottomTabItemAfterSignIn.setting,
      _cacheBottomTabWidgets[BottomTabItemBeforeSignIn.setting],
    );
  }
}

Widget _buildTabItem(BottomTabItemAfterSignIn tabItem, Widget? child) {
  // Cache Widget
  return Offstage(
    offstage: viewModel.currentBottomTab != tabItem,
    child: child ??
        (viewModel.currentBottomTab == tabItem
            ? _buildCacheTab(tabItem)
            : Container()),
  );
}

Widget _buildCacheTab(BottomTabItemAfterSignIn tabItem) {
  return _cacheBottomTabWidgets[tabItem] =
      BottomBodyNavigationUserWidget(
    bottomMenuBar: tabItem,
    navigatorKey: _bottomTabKeys[tabItem]!,
  );
}

void _selectTab(BottomTabItemAfterSignIn bottomMenuBar) {
  viewModel.changeTab(bottomMenuBar);
}

1. 修复ViewModel的状态通知 #

你的MainUserViewModel继承自ChangeNotifier（从Selector的使用可推断），但changeTab方法未调用notifyListeners()，导致状态更新后UI不会重建。修改该方法：

void changeTab(BottomTabItemAfterSignIn tab, {bool isBackClick = false}) {
  if (_currentBottomTab != tab) {
    _currentBottomTab = tab;
    notifyListeners(); // 新增：通知UI更新状态
  }
}

2. 调整跨Tab跳转逻辑 #

直接使用当前页面的Navigator.of(context).push()会将页面推入Home Tab的导航栈，底部导航不会自动切换。正确的做法是先切换底部导航到My Learning，再使用对应Tab的导航栈跳转：

假设你在Home页面的点击事件中，修改跳转代码如下：

// 1. 切换底部导航到My Learning
Provider.of<MainUserViewModel>(context, listen: false)
    .changeTab(BottomTabItemAfterSignIn.myLearning);

// 2. 获取My Learning对应的导航Key，推入详情页
final myLearningNavKey = _bottomTabKeys[BottomTabItemAfterSignIn.myLearning];
myLearningNavKey?.currentState?.push(
  MaterialPageRoute(builder: (_) => MyLearningDetailPage()),
);

如果_bottomTabKeys无法直接在Home页面访问，可以通过状态管理（如ViewModel）传递，或者将其设为全局可访问的变量。

原理说明 #

• 调用changeTab并通知UI后，底部导航栏会切换到My Learning，同时_buildBody会切换显示My Learning的页面容器。
• 使用对应Tab的navigatorKey跳转，会将详情页推入My Learning的导航栈，确保页面层级和底部导航状态一致。

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