如何用BottomNavigationBar切换页面且避免Flutter setState构建报错

问题根源 #

你当前的错误是误用Navigator.push实现页面切换导致的：

• BottomNavigationBar的设计逻辑是在同一个Scaffold容器下切换body区域的Widget，而非通过路由栈跳转新页面
• 在initState和onTap中直接触发路由跳转，会在组件构建过程中调用状态更新，触发setState() or markNeedsBuild() called during build.错误

修正后的主页面代码 #

import 'package:flutter/material.dart';
import 'package:fluttericon/typicons_icons.dart';
import 'package:luxview/Custom/Themes.dart';
import 'package:luxview/Pages/Messages.dart';
// 补充导入其他四个页面的文件
// import 'package:luxview/Pages/Themes.dart';
// import 'package:luxview/Pages/Plugins.dart';
// import 'package:luxview/Pages/Profile.dart';
// import 'package:luxview/Pages/Settings.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  // 预存所有页面组件实例
  final List<Widget> _pages = const [
    MessagePage(),
    // ThemePage(), // 替换为你的实际页面组件
    // PluginPage(),
    // ProfilePage(),
    // SettingsPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 直接使用当前索引对应的页面作为body
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) {
            // 仅更新索引，build会自动切换页面
            setState(() => _currentIndex = index);
          },
          backgroundColor: bottomnavbar_bgc,
          selectedItemColor: bottomnavbar_selcol,
          unselectedItemColor: Colors.blue,
          type: BottomNavigationBarType.fixed,
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.message),
              label: "Messages",
            ),
            BottomNavigationBarItem(icon: Icon(Icons.brush), label: "Themes"),
            BottomNavigationBarItem(
                icon: Icon(Typicons.puzzle), label: "Plugins"),
            BottomNavigationBarItem(
                icon: Icon(Icons.account_box), label: "Profile"),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings), label: "Settings"),
          ]),
    );
  }
}

关键修改说明 #

• 移除了冗余的_currentWidget和_Screen方法，改用_pages列表统一管理所有页面组件
• 将body直接绑定到_pages[_currentIndex]，通过更新索引实现页面切换
• 删除initState中错误的路由调用，避免初始化阶段触发构建冲突
• onTap回调仅负责更新索引，不再调用路由跳转，完全符合BottomNavigationBar的设计逻辑

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