如何修复Flutter Dart中BottomNavigationBar报错问题

以下是开发BottomNavigationBar时高频出现的报错及对应解决方法：

• 未设置type导致布局异常
  当BottomNavigationBar的item数量超过3个时，默认会切换为shifting模式，易出现图标文字消失、布局错位问题。
  解决：显式指定type属性，固定模式适配多item场景：

  BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
      BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
      BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
    ],
  )
  

• currentIndex与页面切换不匹配导致状态异常
  点击导航项后页面无变化，或控制台抛出状态更新相关错误。
  解决：将currentIndex与页面列表索引绑定，通过setState更新选中状态：

  int _currentPageIndex = 0;
  final List<Widget> _pages = [HomePage(), SettingsPage(), MessagePage(), ProfilePage()];
  
  void _switchPage(int index) {
    setState(() {
      _currentPageIndex = index;
    });
  }
  
  // 页面主体部分
  Scaffold(
    body: _pages[_currentPageIndex],
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _currentPageIndex,
      onTap: _switchPage,
      type: BottomNavigationBarType.fixed,
      items: [/* 导航项列表 */],
    ),
  )
  

• 选中/未选中项颜色不生效
  导航项选中状态无视觉区分，或颜色设置未生效。
  解决：直接配置selectedItemColor和unselectedItemColor属性：

  BottomNavigationBar(
    selectedItemColor: Colors.deepPurple,
    unselectedItemColor: Colors.grey.shade600,
    // 其他属性
  )
  

• 点击导航项无响应
  点击底部导航项后无任何页面切换或状态变化。
  解决：必须实现onTap回调函数，在回调中处理索引更新逻辑，参考上面第2点的_switchPage方法实现。

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