Flutter中如何隐藏BottomNavigationBarItem并跳转对应页面？

错误原因翻译 #

断言失败：第251行第15位：'0 <= currentIndex && currentIndex < items.length'：不成立。

这个错误的核心是Flutter的BottomNavigationBar强制要求currentIndex必须是0到items.length-1之间的有效值。你当前底部导航栏只有3个item（索引范围0-2），但直接把_selectedIndex设为3并绑定给currentIndex，违反了这个约束，因此触发断言错误。

解决方案 #

我们需要把「当前显示的页面索引」和「底部导航栏的选中索引」拆分开，避免底部导航栏的currentIndex超出有效范围。

方案1：拆分状态变量（推荐）

通过两个独立变量分别控制页面显示和底部导航选中状态：

// 控制底部导航栏的选中索引（仅0-2有效）
int _bottomNavIndex = 0;
// 控制当前显示的页面索引（0-3）
int _currentPageIndex = 0;

final List<Widget> _screens = const [
  TopNavigator(),
  SearchScreen(),
  SettingsScreen(),
  SelectedAlbumScreen()
];

// 点击底部导航时，同步更新两个索引
void updateBottomNav(int index) {
  setState(() {
    _bottomNavIndex = index;
    _currentPageIndex = index;
  });
}

// 跳转到第4个页面时，仅更新页面索引
void jumpToFourthPage() {
  setState(() {
    _currentPageIndex = 3;
  });
}

修改BottomNavigationBar配置：

BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  backgroundColor: Colors.black,
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
  ],
  currentIndex: _bottomNavIndex, // 仅用有效范围的索引
  selectedItemColor: Theme.of(context).primaryColor,
  unselectedItemColor: Colors.grey,
  onTap: updateBottomNav,
),

页面显示部分：

// 在Scaffold的body中使用当前页面索引
body: _screens[_currentPageIndex],

跳转按钮逻辑（如果用Provider管理状态，对应修改Provider内的方法）：

GestureDetector(
  onTap: () {
    context.read<HandleBottomNavigationIndex>().jumpToFourthPage();
  },
  child: // 你的按钮UI
)

方案2：临时替换无效索引

如果不想新增变量，可以在BottomNavigationBar的currentIndex中做判断，自动替换无效值：

int _selectedIndex = 0;
int _lastValidNavIndex = 0; // 记录最后一次有效的底部导航索引

void setSelectedScreen(int index) {
  setState(() {
    _selectedIndex = index;
    // 仅当索引有效时更新记录
    if (index >= 0 && index < 3) {
      _lastValidNavIndex = index;
    }
  });
}

修改BottomNavigationBar的currentIndex：

currentIndex: _selectedIndex >= 3 ? _lastValidNavIndex : _selectedIndex,

额外优化 #

如果希望进入第4个页面时隐藏底部导航栏，可以在Scaffold中添加判断：

bottomNavigationBar: _currentPageIndex == 3 ? null : BottomNavigationBar(...),

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