Flutter底部导航栏页面切换失效问题排查咨询

核心问题 #

你的BottomBar组件仅返回了底部导航栏（BottomAppBar），没有在界面中渲染用于展示页面内容的currentScreen。状态变量currentScreen和currentTab虽然在点击时更新了，但因为没有对应的展示区域，所以页面完全没变化。

其他潜在问题 #

• screens列表的页面顺序与currentTab的映射不匹配：比如screens[2]是PeoplePage，但点击钱包按钮时设置currentTab=2，逻辑上应该对应WalletPage，顺序混乱会导致后续切换错误。
• 每次点击都重新创建页面实例（比如currentScreen = HomePage()），既浪费资源，也无法保留页面之前的状态。
• 定义了PageStorageBucket但未使用，无法保存页面滚动状态等数据。

修复方案 #

1. 调整BottomBar的结构，使用Scaffold包裹，将currentScreen作为body，BottomAppBar作为bottomNavigationBar。
2. 修正screens列表的顺序，让其与currentTab的索引一一对应。
3. 点击时直接从screens列表中取对应实例，避免重复创建。
4. 用上PageStorageBucket，通过PageStorage包裹页面内容来保存状态。

修复后的完整代码 #

class BottomBar extends StatefulWidget {
  const BottomBar({Key? key}) : super(key: key);

  @override
  State<BottomBar> createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBar> {
  int currentTab = 0;
  // 修正顺序，让索引与currentTab一一对应
  final List<Widget> screens = [
    HomePage(),
    ShopPage(),
    WalletPage(),
    PeoplePage(),
  ];

  final PageStorageBucket bucket = PageStorageBucket();
  late Widget currentScreen;

  @override
  void initState() {
    super.initState();
    currentScreen = screens[currentTab];
  }

  @override
  Widget build(BuildContext context) {
    // 使用Scaffold来承载页面内容和底部导航
    return Scaffold(
      body: PageStorage(
        bucket: bucket,
        child: currentScreen,
      ),
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        notchMargin: 10,
        child: Container(
          height: 60,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen = screens[0];
                        currentTab = 0;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.home,
                          color: currentTab == 0 ? Colors.blue : Colors.grey,
                        ),
                      ],
                    ),
                  ),
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen = screens[1];
                        currentTab = 1;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.shop,
                          color: currentTab == 1 ? Colors.blue : Colors.grey,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              // Right Tab Bar Icons
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen = screens[2];
                        currentTab = 2;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.wallet,
                          color: currentTab == 2 ? Colors.blue : Colors.grey,
                        ),
                      ],
                    ),
                  ),
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen = screens[3];
                        currentTab = 3;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.people,
                          color: currentTab == 3 ? Colors.blue : Colors.grey,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

额外建议 #

• 如果需要支持中间悬浮按钮（比如FloatingActionButton），可以在Scaffold中添加floatingActionButton属性，配合BottomAppBar的shape实现凹口效果。
• 若页面切换需要更流畅的动画，可以考虑使用PageView组件配合底部导航来实现滑动切换。

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