2

我一直在使用“官方”flutter video_player包与 PageView 小部件相结合来解决严重的卡顿问题。

我的目标

在 PageView 小部件的多个页面中平滑快速地滚动，每个页面都包含一个视频小部件。

实际结果

当我尝试快速滚动浏览这些页面时，我遇到了可怕的卡顿/性能问题。当我慢慢地滑动页面，等待滚动动画结束时，一切都很顺利。请参阅我在配置文件模式下在小米红米 Note 8 Pro上录制的视频作为证据。

GIF：应用程序中卡顿的视频证明

性能分析

我尝试通过咨询颤振性能工具来寻求帮助。该工具显示光栅时间的巨大峰值。在一个示例中，光栅时间为 51.7 毫秒，其中着色器编译需要 43.0 毫秒。不过，我没有足够的经验来理解这意味着什么或这些信息如何帮助我。截图如下：

截图：颤振性能工具截图显示慢帧

到目前为止我尝试了什么

  1. 删除该行controller.dispose();可以解决问题，但这会导致内存泄漏和小部件最终崩溃。
  2. 我尝试将其包装controller.dispose();成 a 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上

4

0 回答 0