Flutter与Flame：如何让FlameGame组件在页面切换时保持存活？

针对BottomNavigationBar切换时FlameGame被卸载的问题，有两个简单可行的方案，无需直接修改FlameGame相关类或实现大量重写方法：

方案一：用KeepAlive包装组件 + PageView联动 #

通过自定义一个轻量的KeepAlive包装组件，将FlameGame包裹后放入PageView，配合BottomNavigationBar实现切换时的状态保留：

1. 实现通用KeepAlive包装组件 #

这个组件只需要实现AutomaticKeepAliveClientMixin的核心方法，无需额外重写：

class KeepAliveWrapper extends StatefulWidget {
  final Widget child;

  const KeepAliveWrapper({super.key, required this.child});

  @override
  State<KeepAliveWrapper> createState() => _KeepAliveWrapperState();
}

class _KeepAliveWrapperState extends State<KeepAliveWrapper> with AutomaticKeepAliveClientMixin {
  // 固定返回true，开启状态保留
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用super.build，否则KeepAlive不生效
    return widget.child;
  }
}

2. 联动BottomNavigationBar与PageView #

用PageView承载所有页面，通过控制器与BottomNavigationBar的选中索引绑定，同时禁止PageView的滑动切换：

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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _selectedIndex = 0;
  final PageController _pageController = PageController();

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() => _selectedIndex = index);
          _pageController.jumpToPage(index);
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.gamepad), label: '游戏'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
        ],
      ),
      body: PageView(
        controller: _pageController,
        physics: const NeverScrollableScrollPhysics(), // 禁用滑动切换
        children: [
          // 其他自定义组件
          const HomeComponent(),
          // 用KeepAliveWrapper包裹FlameGame
          KeepAliveWrapper(child: GameWidget(game: MyFlameGame())),
          const SettingsComponent(),
        ],
      ),
    );
  }
}

方案二：直接使用IndexedStack #

IndexedStack会一次性渲染所有子组件，但只显示当前索引对应的页面，天然保留所有组件的状态，代码更简洁：

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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: (index) => setState(() => _selectedIndex = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.gamepad), label: '游戏'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
        ],
      ),
      body: IndexedStack(
        index: _selectedIndex,
        children: [
          const HomeComponent(),
          GameWidget(game: MyFlameGame()),
          const SettingsComponent(),
        ],
      ),
    );
  }
}

关于你遇到的12个重写方法问题 #

你之前尝试给FlameGame相关的State添加AutomaticKeepAliveClientMixin时，出现需要重写大量方法的情况，是因为GameWidget的State类本身继承了Flame框架的内部状态类，带有多个已实现的生命周期方法。通过上述包装或IndexedStack的方式，无需触碰Flame内部组件，就能轻松实现状态保留。

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