颤振性能问题/在PageView中使用video_player的Jank



我一直在与"官员"的严重争吵作斗争。fluttervideo_player包与PageView小部件组合使用。

我的目标滚动平滑快速通过PageView小部件的几个页面,每个页面包含一个视频小部件。

实际结果

当我尝试快速滚动这些页面时,我遇到了严重的问题/性能问题。当我慢慢地滑动页面,并等待滚动动画完成时,一切都很顺利。查看我在小米红米Note 8 Pro上录制的视频在概要文件模式为证

GIF:应用程序中janks的视频证明

性能分析

我试图通过咨询颤振性能工具来寻求帮助。该工具在光栅时间中显示出巨大的峰值。在一个例子中,51.7 ms的栅格时间,其中43.0 ms的时间用于着色器编译。不过,我没有足够的经验来理解这意味着什么,或者这些信息如何帮助我。截图如下:

截图:显示慢帧的扑动性能工具截图

我尝试了什么

  1. 删除controller.dispose();行解决了问题,但这导致内存泄漏和小部件最终崩溃。
  2. 我尝试将controller.dispose();包装成WidgetsBinding.instance!.addPostFrameCallback((_) async {},但这没有帮助

我的代码
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class ExamplePageView extends StatelessWidget {
ExamplePageView({Key? key}) : super(key: key);
final PageController pageController = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
child: PageView(
controller: pageController,
onPageChanged: (value) {},
children: [
ExampleVideo(),
ExampleVideo(),
ExampleVideo(),
ExampleVideo(),
ExampleVideo(),
ExampleVideo(),
],
),
),
);
}
}
class ExampleVideo extends StatefulWidget {
const ExampleVideo({Key? key}) : super(key: key);
@override
State<ExampleVideo> createState() => _ExampleVideoState();
}
class _ExampleVideoState extends State<ExampleVideo> {
late VideoPlayerController controller;
@override
void initState() {
super.initState();
controller = VideoPlayerController.network(
"https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4");
controller
..initialize()
..addListener(() {
setState(() {});
});
}
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.center,
child: Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height,
),
child: AspectRatio(
aspectRatio: 16 / 9,
child: controller.value.isInitialized
? VideoPlayer(controller)
: Container(
color: Colors.black,
),
),
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}

Flutter Doctor显示没有问题,video_player和Flutter都是各自的最新版本。谢谢你的帮助!:)

也张贴在flutter的github

深入研究这个包,它几乎完美地工作。你会找到答案的

https://pub.dev/packages/advstory

最新更新