Flutter Bottom Navigation Bar选中索引页面异常问题求助

问题根源 #

你的代码核心问题是在BottomNavigationBarItem的icon中嵌套了IconButton，这会导致两个冲突：

• 点击IconButton时，只会触发它自身的onPressed执行页面跳转，但不会触发BottomNavigationBar的onTap方法，因此_selectedIndex没有更新，选中项颜色无法切换为橙色。
• 点击导航项的周边区域时，会触发BottomNavigationBar的onTap更新_selectedIndex（颜色变橙色），但这个区域没有绑定跳转逻辑，所以页面不会切换。

迁移导航逻辑到_onItemTapped后未解决，是因为你只处理了索引2的情况，且跳转后可能因为页面栈重置，新页面的_selectedIndex没有正确初始化。

修正后的完整代码 #

class MyBottomNavigationBar extends StatefulWidget {
  const MyBottomNavigationBar({super.key});

  @override
  State<MyBottomNavigationBar> createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });

    // 统一处理页面跳转逻辑
    switch (index) {
      case 0:
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => Page1()),
        );
        break;
      case 1:
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => Page2()),
        );
        break;
      case 2:
        Navigator.pushAndRemoveUntil(
          context,
          MaterialPageRoute(builder: (context) => Page3()),
          (route) => false,
        );
        break;
      case 3:
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => Page4()),
        );
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        border: Border(
          top: BorderSide(
            color: Color(0xffAEADB2),
            width: 0.3,
          ),
        ),
      ),
      child: BottomNavigationBar(
        selectedItemColor: Colors.orange,
        selectedIconTheme: const IconThemeData(color: Colors.orange),
        currentIndex: _selectedIndex,
        type: BottomNavigationBarType.fixed,
        unselectedItemColor: Colors.white,
        selectedFontSize: 14,
        unselectedFontSize: 14,
        enableFeedback: false,
        onTap: _onItemTapped,
        items: const <BottomNavigationBarItem>[
          // 移除IconButton，直接使用Icon
          BottomNavigationBarItem(
            icon: Icon(Icons.home, size: 24),
            label: 'Page 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.devices, size: 24),
            label: 'Page 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications, size: 24),
            label: 'Page 3',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings, size: 24),
            label: 'Page 4',
          ),
        ],
      ),
    );
  }
}

关键修改说明 #

1. 移除IconButton：直接用Icon作为BottomNavigationBarItem的icon，让BottomNavigationBar统一处理点击事件和选中状态。
2. 统一跳转逻辑到_onItemTapped：通过switch语句处理所有索引的跳转，确保点击整个导航项时，既更新_selectedIndex（切换选中色），又执行页面跳转。
3. 页面跳转后的索引同步：如果使用pushAndRemoveUntil重置页面栈，要确保新页面的MyBottomNavigationBar初始化时，_selectedIndex设置为对应的值（比如Page3的导航栏默认选中索引2）。

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