Flutter自定义BottomNavigationBar出现参数未定义报错求助

核心问题 #

你自定义的BottomNavigationBar类和Flutter SDK自带的同名组件冲突了——代码里bottomNavigationBar:后面调用的是你自己写的类，而不是官方的底部导航栏组件，你自定义的类根本没声明onTap、currentIndex这些参数，所以才会报“参数未定义”的错误。

具体修复步骤 #

1. 给自定义组件改名：把你的BottomNavigationBar改成CustomBottomNavigationBar（或其他不重名的名字），避免和官方组件混淆。
2. 移除const关键字：bottomNavigationBar:后面的官方BottomNavigationBar不能加const，因为你要引用当前State里的currentIndex和onTap方法，这些都是非const变量/方法。
3. 修复页面切换逻辑：onTap方法里要调用setState，否则切换导航项后UI不会刷新；同时把body从views[0]改成views[currentIndex]，实现点击切换页面。

修复后的完整代码 #

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

  @override
  State<CustomBottomNavigationBar> createState() => _CustomBottomNavigationBarState();
}

class _CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> {
  List views = [
    const HomeView(),
    const CurrentLocationView(),
    const ProfileView(),
    const SettingsView()
  ];
  int currentIndex = 0;
  
  void onTap(int index) {
    setState(() {
      currentIndex = index;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: views[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTap,
        currentIndex: currentIndex,
        selectedItemColor: Colors.black54,
        unselectedItemColor: Colors.grey.withOpacity(0.5),
        showUnselectedLabels: false,
        showSelectedLabels: false,
        elevation: 0,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            label: 'Home',
            icon: Icon(Icons.home_outlined),
          ),
          BottomNavigationBarItem(
            label: 'Map',
            icon: Icon(Icons.map),
          ),
          BottomNavigationBarItem(
            label: 'Settings',
            icon: Icon(Icons.settings),
          ),
          BottomNavigationBarItem(
            label: 'Profile',
            icon: Icon(Icons.person),
          ),
        ],
      ),
    );
  }
}

额外说明 #

• 官方的BottomNavigationBar组件本身就包含你用到的所有参数，改名后就能正常调用官方组件的参数了。
• setState是Flutter状态管理的核心，修改状态后必须调用它才能触发UI重建，否则导航项切换后页面不会跟着变。

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