Flutter：无状态组件中实现底部导航栏的问题求助

核心逻辑 #

底部导航栏的选中状态（index）属于可变状态，必须由**有状态组件（StatefulWidget）**维护，无状态组件（StatelessWidget）无法调用setState更新状态。正确的组合方式是：用一个顶层有状态组件作为导航容器，管理底部导航的状态和页面切换，LevelSelectionScreen作为其中一个子页面（保持无状态）。

完整代码示例 #

// 顶层有状态组件：管理底部导航状态与页面切换
class MainNavigationPage extends StatefulWidget {
  const MainNavigationPage({super.key});

  @override
  State<MainNavigationPage> createState() => _MainNavigationPageState();
}

class _MainNavigationPageState extends State<MainNavigationPage> {
  // 当前选中的导航索引
  int _selectedIndex = 0;

  // 导航对应的页面列表，包含你的LevelSelectionScreen
  final List<Widget> _pages = const [
    MainMenuScreen(),
    LevelSelectionScreen(), // 你的无状态关卡选择页面
    SettingsScreen(),
    ProfileScreen(),
  ];

  // 更新选中索引的方法
  void _onDestinationSelected(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex], // 根据索引切换显示页面
      bottomNavigationBar: NavigationBar(
        height: 60,
        selectedIndex: _selectedIndex,
        onDestinationSelected: _onDestinationSelected,
        destinations: const [
          NavigationDestination(
            icon: Icon(Icons.home),
            selectedIcon: Icon(Icons.home),
            label: '首页',
          ),
          NavigationDestination(
            icon: Icon(Icons.gamepad),
            selectedIcon: Icon(Icons.gamepad),
            label: '关卡选择',
          ),
          NavigationDestination(
            icon: Icon(Icons.settings),
            selectedIcon: Icon(Icons.settings),
            label: '设置',
          ),
          NavigationDestination(
            icon: Icon(Icons.person),
            selectedIcon: Icon(Icons.person),
            label: '我的',
          ),
        ],
      ),
    );
  }
}

// 你的无状态关卡选择页面
class LevelSelectionScreen extends StatelessWidget {
  const LevelSelectionScreen({super.key});
  static const _gap = SizedBox(height: 30);

  @override
  Widget build(BuildContext context) {
    final playerProgress = context.watch<PlayerProgress>();
    // 保留你原本的页面逻辑，比如关卡按钮、进度展示等
    return Scaffold(
      appBar: AppBar(title: const Text('关卡选择')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('已解锁关卡'),
            _gap,
            // 这里可添加关卡按钮逻辑，根据playerProgress判断解锁状态
          ],
        ),
      ),
    );
  }
}

// 示例子页面（根据你的实际代码调整）
class MainMenuScreen extends StatelessWidget {
  const MainMenuScreen({super.key});

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

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: Center(child: Text('设置')));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: Center(child: Text('我的')));
  }
}

关键说明 #

• 导航状态（_selectedIndex）和setState逻辑放在顶层的MainNavigationPage中，统一处理页面切换和底部导航的状态更新。
• LevelSelectionScreen保持无状态，仅专注于自身的页面渲染逻辑，无需处理导航状态。
• 你之前写的MainPage缺少build方法，上述代码补全了该方法，并将页面列表与导航逻辑整合为完整的可运行结构。

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