如何在persistent_bottom_nav_bar点击Tab时按条件跳转页面

要实现指定标签页的登录拦截，核心是利用PersistentTabView的onItemSelected回调拦截点击事件，根据登录状态决定跳转逻辑：

步骤1：准备登录状态判断 #

先定义登录状态变量（实际项目中可从SharedPreferences、状态管理工具等渠道获取真实状态）：

bool isLoggedIn = false; // 根据业务逻辑实时更新该值

步骤2：修改原代码添加拦截逻辑 #

在你的PersistentTabView中加入onItemSelected参数，处理标签点击行为：

PersistentTabView(
  context,
  selectedTabScreenContext: (ctx) {
    _tabContext = ctx;
  },
  resizeToAvoidBottomInset: false,
  navBarHeight: 70,
  controller: _controller,
  // 新增标签点击拦截回调
  onItemSelected: (index) async {
    // Tab1（索引0）无需拦截，直接允许切换
    if (index == 0) {
      return true;
    }
    // 检查登录状态
    if (isLoggedIn) {
      // 已登录，执行默认标签切换
      _controller.jumpToTab(index);
      return true;
    } else {
      // 未登录，跳转到登录页，阻止默认标签切换
      await Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => LoginScreen()),
      );
      // 若需要登录成功后自动切换到目标标签，可在此处重新判断登录状态并执行_controller.jumpToTab(index)
      return false;
    }
  },
  screens: [
    HomeLanding(),
    MainGroupNew(),
    UploadQuestion(),
    MainProfileNew(),
  ], 
  items: _navBarsItems(),
  navBarStyle: NavBarStyle.style6,
  confineInSafeArea: true,
);

关键逻辑说明 #

• 点击Tab1（索引0）时直接放行，保留原有逻辑
• 点击Tab2-Tab4（索引1-3）时：
  • 若isLoggedIn为true，正常切换到对应标签页并保持激活状态
  • 若isLoggedIn为false，通过Navigator.push跳转登录页，同时返回false阻止默认标签切换，确保用户登录后返回仍能看到原标签栏布局

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