Flutter PageView集成官方video_player包滚动时出现卡顿(Jank)性能问题问询

问题根因 #

你遇到的卡顿核心来自三个叠加问题：

• PageView默认仅缓存当前页及左右各1页，快速滑动时页面会频繁创建/销毁，VideoPlayerController的initialize和dispose都是阻塞性操作，集中触发会直接占用UI线程资源
• 你给控制器添加的全局监听每次状态变化都调用setState，导致视频播放过程中全页面频繁重绘，大幅提升栅格化开销
• 视频渲染相关的着色器首次编译时会占用大量栅格化时间，快速滑动时新页面的着色器编译和旧页面的资源销毁同时执行，直接触发掉帧

优化方案 #

• 移除不必要的全局setState监听
  你的代码中仅需要在控制器初始化完成时更新一次UI，不需要实时监听播放状态触发重绘，直接删除controller.addListener(() { setState(() {}); });这段代码，改为初始化完成后单次触发setState即可，这一步优化效果最明显。
• 复用VideoPlayerController，避免频繁创建销毁
  不要每个页面单独创建销毁控制器，建立一个大小为3-4的控制器复用池，PageView切换页面时仅更换控制器的数据源，无需销毁重建控制器，既避免了dispose的阻塞开销，也不会出现内存泄漏。
  如果你的视频数量不多（少于10个），也可以提前在父组件初始化所有控制器，页面仅负责绑定控制器，不需要自行管理销毁逻辑。
• 优化PageView页面回收逻辑
  给视频页面混入AutomaticKeepAliveClientMixin，设置wantKeepAlive为true，避免页面滑出后立刻被销毁，同时可以调整PageView的cacheExtent参数，扩大缓存范围，减少页面销毁的频率。
  如果视频数量很多，可以监听PageView的滚动状态，仅在滚动完全停止后，再销毁超过3个页面距离的闲置控制器，避免滑动过程中执行资源回收操作。
• 降低渲染开销
  给VideoPlayer组件包裹RepaintBoundary，让视频渲染独立于其他UI重绘，减少不必要的栅格化操作；如果你的Flutter版本≥3.10，开启Impeller渲染器，可彻底解决着色器编译导致的卡顿问题。
• 延迟控制器销毁时机
  如果不想做控制器复用，可以将dispose操作延迟到页面完全移出可视区域1s后执行，避免快速滑动过程中反复触发销毁、初始化操作：

  @override
  void dispose() {
    Future.delayed(const Duration(seconds: 1), () {
      controller.dispose();
    });
    super.dispose();
  }
  

优化后核心代码示例 #

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class ExamplePageView extends StatefulWidget {
  ExamplePageView({Key? key}) : super(key: key);

  @override
  State<ExamplePageView> createState() => _ExamplePageViewState();
}

class _ExamplePageViewState extends State<ExamplePageView> {
  final PageController pageController = PageController();
  // 提前创建控制器池，这里示例是6个视频的情况
  late List<VideoPlayerController> controllers;

  @override
  void initState() {
    super.initState();
    controllers = List.generate(6, (index) => VideoPlayerController.network(
        "https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4"
    )..initialize());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand(
        child: PageView(
          controller: pageController,
          // 扩大缓存范围
          cacheExtent: 2.0,
          children: List.generate(6, (index) => ExampleVideo(controller: controllers[index])),
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 父组件统一销毁所有控制器
    for(var c in controllers) {
      c.dispose();
    }
    super.dispose();
  }
}

class ExampleVideo extends StatefulWidget {
  final VideoPlayerController controller;
  const ExampleVideo({Key? key, required this.controller}) : super(key: key);

  @override
  State<ExampleVideo> createState() => _ExampleVideoState();
}

class _ExampleVideoState extends State<ExampleVideo> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Align(
      alignment: Alignment.center,
      child: SizedBox(
        height: MediaQuery.of(context).size.height,
        child: AspectRatio(
          aspectRatio: 16 / 9,
          // 独立渲染区域
          child: RepaintBoundary(
            child: widget.controller.value.isInitialized
                ? VideoPlayer(widget.controller)
                : Container(color: Colors.black),
          ),
        ),
      ),
    );
  }
}

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