登录后在主页实现可调用BottomNavigationBar及代码报错排查

一、先搞定「Items is not defined」报错 #

这个错误是因为你把BottomNavigationBar抽成独立组件时，没正确处理items参数。原来在main.dart里你可能直接在BottomNavigationBar里写了items列表，抽成组件后要么没把这个列表传进去，要么组件内部没定义items。

解决方法选一种即可：

• 方法1：组件内部直接定义items列表

class CustomBottomNavBar extends StatelessWidget {
  final int currentIndex;
  final Function(int) onTap;

  const CustomBottomNavBar({
    super.key,
    required this.currentIndex,
    required this.onTap,
  });

  // 组件内部定义底部导航项
  final List<BottomNavigationBarItem> _items = const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: '首页',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: '我的',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: currentIndex,
      onTap: onTap,
      items: _items,
      type: BottomNavigationBarType.fixed,
    );
  }
}

• 方法2：把items作为参数传入（更灵活，适配不同页面需求）

class CustomBottomNavBar extends StatelessWidget {
  final int currentIndex;
  final Function(int) onTap;
  final List<BottomNavigationBarItem> items;

  const CustomBottomNavBar({
    super.key,
    required this.currentIndex,
    required this.onTap,
    required this.items,
  });

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: currentIndex,
      onTap: onTap,
      items: items,
      type: BottomNavigationBarType.fixed,
    );
  }
}

二、关于是否需要路由的问题 #

完全不用路由！BottomNavigationBar的常规用法就是配合StatefulWidget管理当前选中索引，切换时直接替换页面主体内容，不用走路由跳转。

给你一个完整的主页使用示例：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;

  // 预定义要切换的页面列表
  final List<Widget> _pages = const [
    HomeContentPage(),
    ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex], // 根据索引显示对应页面
      bottomNavigationBar: CustomBottomNavBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index; // 更新索引完成页面切换
          });
        },
        // 如果用方法2，这里需要传入items
        // items: const [
        //   BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
        //   BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        // ],
      ),
    );
  }
}

// 示例子页面
class HomeContentPage extends StatelessWidget {
  const HomeContentPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('首页内容'));
  }
}

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('个人中心'));
  }
}

这样就能实现登录后在主页显示BottomNavigationBar，切换页面不用路由，直接通过更新索引替换body组件即可。

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