加入 image test 测试页

lib/main.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:vid_player_demo/pages/both_player/page.dart';
+import 'package:vid_player_demo/pages/image_test/page.dart';
 import 'package:vid_player_demo/pages/scene_player/page.dart';
 import 'package:vid_player_demo/pages/single_image.dart/view.dart';
 import 'package:vid_player_demo/widgets/image_cache.dart';
@@ -34,6 +35,7 @@ class MyApp extends StatelessWidget {
         '/multi_canvas_player': (BuildContext context) =>
             const MultiCanvasPlayerPage(),
         '/scene_player': (BuildContext context) => ScenePlayerPage(),
+        '/image_test': (BuildContext context) => const ImageTestPage(),
       },
       debugShowCheckedModeBanner: false,
     );
@@ -42,9 +44,7 @@ class MyApp extends StatelessWidget {
 
 class MyHomePage extends StatefulWidget {
   const MyHomePage({Key? key, required this.title}) : super(key: key);
-
   final String title;
-
   @override
   State<MyHomePage> createState() => _MyHomePageState();
 }
@@ -92,6 +92,10 @@ class _MyHomePageState extends State<MyHomePage> {
             ElevatedButton(
                 onPressed: () => Navigator.pushNamed(context, '/scene_player'),
                 child: const Text('Scene Player')),
+            const SizedBox(height: 8),
+            ElevatedButton(
+                onPressed: () => Navigator.pushNamed(context, '/image_test'),
+                child: const Text('Image Test')),
             const SizedBox(height: 24),
           ],
         ),

lib/pages/image_test/page.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:vid_player_demo/controller/player_controller.dart';
+import 'package:vid_player_demo/pages/image_test/view.dart';
+
+class ImageTestPage extends StatefulWidget {
+  const ImageTestPage({Key? key}) : super(key: key);
+  @override
+  _ImageTestPageState createState() => _ImageTestPageState();
+}
+
+class _ImageTestPageState extends State<ImageTestPage> {
+  final imageNum = [
+    500,
+    500,
+  ];
+
+  final _playerStateController = Get.put(PlayerStateController());
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        appBar: AppBar(
+          title: const Text("Image 载入测试"),
+        ),
+        body: Column(
+          children: [
+            const SizedBox(height: 24),
+            ElevatedButton(
+                onPressed: () => {_playerStateController.play(context)},
+                child: const Text("Load Together")),
+            const SizedBox(height: 24),
+            SizedBox(height: 800, child: buildPlayersGrid(imageNum)),
+          ],
+        ));
+  }
+
+  Widget buildPlayersGrid(List<int> imageNumList) {
+    return GridView.count(
+      crossAxisCount: 3,
+      childAspectRatio: 1,
+      shrinkWrap: true,
+      children: imageNumList
+          .map((imageNum) =>
+              ImageTestView(imageNum, viewSize: const Size(300, 100)))
+          .toList(),
+    );
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    Get.delete<PlayerStateController>();
+    _playerStateController.dispose();
+  }
+}

lib/pages/image_test/view.dart

@@ -0,0 +1,116 @@
+// ignore_for_file: avoid_print
+
+import 'dart:async';
+import 'dart:typed_data';
+import 'dart:ui';
+
+import 'package:flutter/material.dart' hide Image;
+import 'package:get/get.dart';
+import 'package:vid_player_demo/controller/player_controller.dart';
+
+class ImageTestView extends StatefulWidget {
+  const ImageTestView(
+    this.imageNum, {
+    Key? key,
+    this.viewSize = const Size(600, 500),
+  }) : super(key: key);
+  final int imageNum;
+  final Size viewSize;
+
+  @override
+  _ImageTestViewState createState() => _ImageTestViewState();
+}
+
+class _ImageTestViewState extends State<ImageTestView> {
+  PlayerStateController? _playerStateController;
+  PlayerStateController get playerStateController => _playerStateController!;
+  Image? image;
+  int loadedImageCount = 0;
+
+  /// 外部状态控制器
+  void clickPlay() async {
+    print("${DateTime.now()} Click play");
+    for (int i = 0; i < widget.imageNum; i++) {
+      final image = await _loadImage(600, 800);
+      // final cloneImage = image.clone();
+      print(
+          "${DateTime.now()} Clone image $i ${image.width} x ${image.height}");
+      setState(() {
+        loadedImageCount++;
+      });
+      // cloneImage.dispose();
+      image.dispose();
+    }
+  }
+
+  void clickPause() {
+    print("${DateTime.now()} Click pause");
+  }
+
+  void onClickPlay(Object sender, dynamic e) {
+    print("${DateTime.now()} receive Load together $e");
+    clickPlay();
+  }
+
+  Future<Image> _loadImage(int width, int height) {
+    final Completer<Image> completer = Completer<Image>();
+    decodeImageFromPixels(
+      Uint8List.fromList(List<int>.filled(width * height * 4, 0xFF0000FF)),
+      width,
+      height,
+      PixelFormat.rgba8888,
+      // Don't worry about disposing or cloning this image - responsibility
+      // is transferred to the caller, and that is safe since this method
+      // will not touch it again.
+      (Image image) => completer.complete(image),
+    );
+    return completer.future;
+  }
+
+  @override
+  void initState() {
+    _playerStateController = Get.find<PlayerStateController>();
+    playerStateController.trigglePlay.addListener(onClickPlay);
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: [
+          SizedBox(
+            width: widget.viewSize.width,
+            height: widget.viewSize.height,
+            child: RepaintBoundary(
+              child: Text("共需要 ${widget.imageNum} ，已加载 $loadedImageCount 张图片"),
+            ),
+          ),
+          const Text('Image 载入测试'),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: [
+              ElevatedButton(
+                  onPressed: () {
+                    clickPlay();
+                  },
+                  child: const Text('▶ Play')),
+              ElevatedButton(
+                  onPressed: () {
+                    clickPause();
+                  },
+                  child: const Text('⏸ Pause')),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    print("ImageTestView dispose");
+    super.dispose();
+  }
+}