Flutter中Video Player需热重载才显示问题排查求助

核心错误点 #

1. forEach循环逻辑错误：遍历navBar.urls时，你没有使用当前遍历的element，反而固定调用navBar.urls[videoCount]，这会导致所有视频控制器都绑定同一个视频地址（如果videoCount没有递增的话），完全不符合遍历多视频的预期。

2. 异步初始化的状态更新时机错误：VideoPlayerController.initialize()是异步操作，你在循环结束后直接调用navBar.notify()，但此时控制器还没完成初始化，UI拿到的initialized状态仍是false，所以不会渲染视频组件；而热重载时，控制器已经完成初始化，状态是有效的，因此UI能正常显示。

3. 提前调用play()：在控制器未完成初始化时就调用play()，虽然音频能播放，但视频画面还未准备好，UI无法渲染。

修复后的代码示例 #

@override
void initState() {
  super.initState();

  WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
    final navBar = Provider.of<NavBar>(context, listen: false);
    // 先清空旧的控制器（避免重复添加）
    navBar.videoControllers.clear();

    for (int i = 0; i < navBar.urls.length; i++) {
      final url = navBar.urls[i];
      final controller = VideoPlayerController.network(
        url,
        videoPlayerOptions: VideoPlayerOptions(
          allowBackgroundPlayback: false,
        ),
      );
      navBar.videoControllers.add(controller);

      // 初始化完成后更新状态并触发UI重建
      await controller.initialize();
      navBar.initialized = true;
      navBar.notify();

      // 第一个控制器初始化完成后自动播放
      if (i == 0) {
        controller.play();
        navBar.notify();
      }
    }
  });
}

额外注意事项 #

• 确保你的UI组件通过Consumer或Selector监听NavBar的状态变化，比如：

  Consumer<NavBar>(
    builder: (context, navBar, child) {
      if (!navBar.initialized || navBar.videoControllers.isEmpty) {
        return const Center(child: CircularProgressIndicator());
      }
      return VideoPlayer(navBar.videoControllers[0]);
    },
  )
  

• 记得在页面销毁时释放所有视频控制器，避免内存泄漏：

  @override
  void dispose() {
    final navBar = Provider.of<NavBar>(context, listen: false);
    for (var controller in navBar.videoControllers) {
      controller.dispose();
    }
    navBar.videoControllers.clear();
    super.dispose();
  }
  

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