Flutter多视频同页播放问题：滚动/刷新后视频消失

核心问题分析 #

1. 组件属性设计错误：你将VideoPlayerController定义为SecondVideosItem的可变属性，且在initState中重新赋值，这会导致组件状态管理混乱，滚动时item复用或刷新时controller状态直接丢失。
2. Controller生命周期未正确管理：dispose方法中注释了controller的释放操作，不仅会造成内存泄漏，还会导致滚动回收item后，重新创建的item无法正常初始化controller。
3. 未等待初始化完成就渲染：直接在initState中调用播放，但没有等待controller初始化完成就渲染VideoPlayer，容易出现空白或播放异常。

修复方案及代码修改 #

1. 调整组件结构：将Controller移到State内部

把VideoPlayerController从SecondVideosItem的属性中移除，改为在_SecondVideosItemState内部维护，确保每个item的controller独立且受State生命周期管理。

2. 严格实现生命周期管理

• 在initState中初始化controller，等待完成后再执行播放操作
• 在dispose中必须释放controller，避免内存泄漏和状态冲突
• 可选：使用AutomaticKeepAliveClientMixin让item在滚动出视图后保持状态，避免重新初始化（适合需要保持播放状态的场景）

修改后的完整代码

class SecondVideosItem extends StatefulWidget {
  final AllVideoResponse videoResponse;

  // 移除原有controller参数，改为State内部创建
  const SecondVideosItem({
    Key? key,
    required this.videoResponse,
  }) : super(key: key);

  @override
  _SecondVideosItemState createState() => _SecondVideosItemState();
}

// 可选添加AutomaticKeepAliveClientMixin保持组件状态
class _SecondVideosItemState extends State<SecondVideosItem> with AutomaticKeepAliveClientMixin {
  late VideoPlayerController _videoPlayerController;
  late Future<void> _initializeVideoPlayerFuture;
  PrefsHelper prefsHelper = PrefsHelper();

  @override
  bool get wantKeepAlive => true; // 开启状态保持

  @override
  void initState() {
    super.initState();
    // 初始化视频控制器
    _videoPlayerController = VideoPlayerController.network(
      getBaseURLVideos(mediaPath: widget.videoResponse.mediaPath),
      videoPlayerOptions: const VideoPlayerOptions(mixWithOthers: true),
    );

    // 保存初始化Future，用于后续等待初始化完成
    _initializeVideoPlayerFuture = _videoPlayerController.initialize().then((_) {
      _videoPlayerController.play();
      _videoPlayerController.setVolume(0);
    });
  }

  @override
  void dispose() {
    // 必须释放控制器，避免内存泄漏
    _videoPlayerController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context); // 使用AutomaticKeepAliveClientMixin必须调用此方法
    final size = MediaQuery.of(context).size;

    return GestureDetector(
      onTap: () async {
        // 你的点击逻辑
      },
      child: Column(
        children: [
          Expanded(
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.r),
              ),
              elevation: 0,
              clipBehavior: Clip.hardEdge,
              child: Stack(
                children: [
                  // 使用FutureBuilder等待初始化完成后再渲染视频
                  FutureBuilder(
                    future: _initializeVideoPlayerFuture,
                    builder: (context, snapshot) {
                      if (snapshot.connectionState == ConnectionState.done) {
                        return Positioned.fill(
                          child: VideoPlayer(_videoPlayerController),
                        );
                      } else {
                        // 初始化过程中显示加载占位符
                        return const Center(child: CircularProgressIndicator());
                      }
                    },
                  ),
                ],
              ),
            ),
          ),
          // 其他子组件...
        ],
      ),
    );
  }
}

额外优化建议 #

• 性能优化：如果同时播放多个视频导致卡顿，建议监听列表滚动状态，暂停不在视图范围内的视频，只播放可见区域的视频，平衡播放体验和性能。
• 刷新适配：如果页面使用下拉刷新，确保刷新后每个item的controller能重新正确初始化，避免旧状态残留。

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