Flutter中如何跨多个路由保留Widget以实现复用？

完全可行，核心思路是将播放器的控制逻辑与UI组件分离，通过全局单例的控制器来维持播放状态，而非依赖Widget自身的状态。以下是具体实现方案：

一、问题根源：AutomaticKeepAliveMixin为什么没用？ #

AutomaticKeepAliveMixin仅适用于同一页面内的Tab切换场景，它能阻止Tab页的Widget被销毁。但路由切换时，整个页面的Widget树会被从Widget树中移除并销毁，因此Mixin无法保留播放器状态。

二、解决方案：全局单例播放器控制器 #

将YoutubePlayerController抽离为全局单例，让所有路由中的播放器UI都绑定这个控制器，这样路由切换时控制器不会被销毁，播放状态自然得以保留。

1. 创建全局单例控制器 #

class YoutubePlayerManager {
  // 单例实例
  static final YoutubePlayerManager _instance = YoutubePlayerManager._internal();
  late YoutubePlayerController playerController;

  factory YoutubePlayerManager() => _instance;

  YoutubePlayerManager._internal() {
    // 初始化控制器，可根据需求动态传入视频ID
    playerController = YoutubePlayerController(
      initialVideoId: "your_target_video_id",
      flags: const YoutubePlayerFlags(
        autoPlay: true,
        mute: false,
        enableCaption: true,
      ),
    );
  }

  // 提供动态切换视频的方法（可选）
  void switchVideo(String videoId) {
    playerController.load(videoId);
  }
}

2. 在任意路由中复用播放器 #

所有需要播放器的页面，直接绑定这个全局控制器即可：

// 路由1：仅展示播放器
class PlayerPageA extends StatelessWidget {
  final _playerManager = YoutubePlayerManager();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: YoutubePlayer(
        controller: _playerManager.playerController,
        showVideoProgressIndicator: true,
        progressIndicatorColor: Colors.blueAccent,
      ),
    );
  }
}

// 路由2：带其他内容的播放器页面
class PlayerPageB extends StatelessWidget {
  final _playerManager = YoutubePlayerManager();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const SizedBox(height: 40),
          const Text("这是其他页面内容"),
          Expanded(
            child: YoutubePlayer(
              controller: _playerManager.playerController,
              showVideoProgressIndicator: true,
            ),
          ),
        ],
      ),
    );
  }
}

3. 内存泄漏防护 #

在应用退出时，记得释放控制器资源，避免内存泄漏：

// 在主页面的dispose中处理
class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _playerManager = YoutubePlayerManager();

  @override
  void dispose() {
    _playerManager.playerController.dispose();
    super.dispose();
  }

  // ... 其他代码
}

三、进阶：用状态管理库优化（可选） #

如果项目中使用Provider、Riverpod等状态管理库，可以将控制器放入全局状态中，更符合Flutter状态管理规范：

// Riverpod示例
final youtubePlayerControllerProvider = Provider<YoutubePlayerController>((ref) {
  final controller = YoutubePlayerController(
    initialVideoId: "your_video_id",
    flags: const YoutubePlayerFlags(autoPlay: true),
  );
  // 自动在Provider销毁时释放控制器
  ref.onDispose(() => controller.dispose());
  return controller;
});

// 在页面中使用
class PlayerPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final controller = ref.watch(youtubePlayerControllerProvider);
    return Scaffold(
      body: YoutubePlayer(controller: controller),
    );
  }
}

这种方式下，切换路由时播放器会无缝延续当前播放状态，不会出现重新加载或延迟问题。

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