Flutter底部导航栏点击图标无法跳转问题求助（附代码）

架构老林

2026-8-3

解决Flutter底部导航栏跳转失效及_children[_currentIndex]报错问题

1. 确保`_currentIndex`的状态更新逻辑正确

点击底部导航栏时，必须通过setState更新索引值，触发UI重建：

onTap: (index) {
  setState(() {
    _currentIndex = index;
  });
},

如果遗漏setState，即使索引值改变，页面也不会刷新，导致跳转失效。

2. 检查`_children`页面列表的合法性

提前初始化与底部导航栏item数量一致的页面组件列表：

final List<Widget> _children = [
  HomeContentPage(),
  ProfilePage(),
  SettingsPage(),
];

确保列表长度大于等于导航栏的item总数，否则会触发索引越界错误，这是_children[_currentIndex]报错的核心原因。

3. 修正Scaffold的body配置

直接将_children[_currentIndex]作为body的子组件，避免嵌套未关联状态更新的多余组件：

Scaffold(
  body: _children[_currentIndex],
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: _currentIndex,
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
      BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
    ],
    onTap: (index) {
      setState(() {
        _currentIndex = index;
      });
    },
  ),
);