Flutter中BottomNavigationBar切换索引路由跳转失效，如何用switch case实现？

你目前的代码仅定义了底部导航的选项配置，缺少索引变更回调、状态更新和switch分支跳转逻辑三个核心部分，完整实现步骤如下： #

1. 先在State类中定义基础变量 #

// 当前选中的导航索引，默认选中首页
int _selectedIndex = 0;
// 索引对应的页面列表，替换为你自己的业务页面实例
final List<Widget> _pageList = [
  HomePage(),
  MyCardPage(),
  WatchListPage(),
  AccountPage(),
];

2. 实现带switch case的索引切换逻辑 #

分两种使用场景按需选择：

场景1：底部导航常驻，切换当前页面的body内容 #

void _onNavItemTap(int index) {
  switch (index) {
    case 0:
      // 可在此处添加首页专属逻辑，例如刷新首页数据
      setState(() {
        _selectedIndex = index;
      });
      break;
    case 1:
      setState(() {
        _selectedIndex = index;
      });
      break;
    case 2:
      setState(() {
        _selectedIndex = index;
      });
      break;
    case 3:
      setState(() {
        _selectedIndex = index;
      });
      break;
    default:
      setState(() {
        _selectedIndex = 0;
      });
  }
}

场景2：点击后跳转到新的独立路由页面（底部导航会被新页面覆盖） #

void _onNavItemTap(int index) {
  switch (index) {
    case 0:
      Navigator.push(context, MaterialPageRoute(builder: (context) => const HomePage()));
      break;
    case 1:
      Navigator.push(context, MaterialPageRoute(builder: (context) => const MyCardPage()));
      break;
    case 2:
      Navigator.push(context, MaterialPageRoute(builder: (context) => const WatchListPage()));
      break;
    case 3:
      Navigator.push(context, MaterialPageRoute(builder: (context) => const AccountPage()));
      break;
  }
}

3. 补全BottomNavigationBar的核心属性 #

将切换逻辑绑定到底部导航组件上，同时注意新版本Flutter中title属性已废弃，替换为label：

child: BottomNavigationBar(
  // 绑定当前选中索引
  currentIndex: _selectedIndex,
  // 绑定点击事件回调
  onTap: _onNavItemTap,
  // 你原有配置的导航项代码
  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: _selectedIndex == 0
          ? SvgPicture.asset('assets/icons/home_colored.svg')
          : SvgPicture.asset('assets/icons/home.svg'),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: _selectedIndex == 1
          ? SvgPicture.asset('assets/icons/order_colored.svg')
          : SvgPicture.asset('assets/icons/order.svg'),
      label: 'My Card',
    ),
    BottomNavigationBarItem(
      icon: _selectedIndex == 2
          ? SvgPicture.asset('assets/icons/watch_colored.svg')
          : SvgPicture.asset('assets/icons/watch.svg'),
      label: 'Watch List',
    ),
    BottomNavigationBarItem(
      icon: _selectedIndex == 3
          ? SvgPicture.asset('assets/icons/account_colored.svg')
          : SvgPicture.asset('assets/icons/account.svg'),
      label: 'Account',
    ),
  ],
  // 统一设置文字样式
  selectedLabelStyle: bottomTextStyle,
  unselectedLabelStyle: bottomTextStyle,
)

4. 绑定页面到Scaffold的body（仅场景1需要） #

如果使用常驻底部导航的切换逻辑，将Scaffold的body属性设置为：

body: _pageList[_selectedIndex],

注意事项 #

• 不需要常驻底部导航的业务场景才推荐使用场景2的路由跳转方式
• switch case中可以自定义每个索引的特殊逻辑，比如点击购物车时先判断是否登录再跳转

内容的提问来源于stack exchange，提问作者Jian Yuan Ng