Flutter中BottomNavigationBar点击切换页面实现方法求助

算力阿峰

2026-10-6

Flutter BottomNavigationBar 页面切换完整实现步骤

你现有代码存在索引和页面对应关系错位的问题：第一个导航项是「Idioms List」对应索引0，你现在逻辑里索引0返回的是收藏页，和导航项的功能定位不匹配，可按以下步骤完成完整实现：

步骤1：在当前State类中声明索引状态变量，用于记录当前选中的导航项位置

class _YourPageState extends State<YourPage> {
  // 默认选中第一个导航项，初始值设为0
  int index = 0;
  // 你原有其他代码放在下方
  ...
}

步骤2：修正buildPages方法的页面对应逻辑

Widget buildPages() {
  switch (index) {
    case 0:
      // 索引0对应第一个导航项「Idioms List」，返回列表页
      return MainPage();
    case 1:
      // 索引1对应第二个导航项「Favorited」，返回收藏页
      return FavoriteScreen();
    default:
      return const SizedBox.shrink();
  }
}

步骤3：将页面和底部导航栏挂载到Scaffold对应参数上

@override
Widget build(BuildContext context) {
  return Scaffold(
    // body参数传入buildPages的返回值，实现页面跟随选中索引切换
    body: buildPages(),
    // bottomNavigationBar参数传入你写的底部导航组件
    bottomNavigationBar: buildBottomBar(),
  );
}

（可选优化）实现页面状态保活
如果切换导航时不需要每次重建页面，可以用IndexedStack替代直接调用buildPages，修改build方法即可：

@override
Widget build(BuildContext context) {
  return Scaffold(
    // IndexedStack会缓存所有子页面的状态，切换时不会触发重建
    body: IndexedStack(
      index: index,
      children: const [
        MainPage(),
        FavoriteScreen(),
      ],
    ),
    bottomNavigationBar: buildBottomBar(),
  );
}