解码图像并添加到小部件列表 [flutter]

Question

我想从 Windows 的文件夹中加载和显示多个图像，根据它们的大小（例如，大、中、图标等...）对它们进行分组。

为了在显示它们之前知道它们的大小，我使用来自'package:image/image.dart' decodeImage函数为每个图像循环一个列表。

我想要实现的是每次迭代后图像都出现在屏幕上，在所有加载过程完成之前不会阻塞 UI。

我有一个图像模型列表，一旦我将每个图像添加到列表中，我就会调用setState以更新视图，但所有图像都出现在循环的末尾。

我该如何解决？

这是调试控制台的输出（显示所有图像大约需要 10 秒）：

C:\flutter\flutter-desktop-embedding\example>flutter run
Launching lib\main.dart on Windows in debug mode...
Building Windows application...
flutter: 2020-01-12 16:00:12.604871
flutter: 2020-01-12 16:00:13.160340
flutter: 2020-01-12 16:00:13.656014
Syncing files to device Windows...
flutter: 2020-01-12 16:00:14.050997
flutter: 2020-01-12 16:00:14.561593
flutter: 2020-01-12 16:00:15.040311
flutter: 2020-01-12 16:00:15.502076
flutter: 2020-01-12 16:00:15.936912
flutter: 2020-01-12 16:00:16.404174
flutter: 2020-01-12 16:00:16.919285
flutter: 2020-01-12 16:00:17.481826
flutter: 2020-01-12 16:00:17.941551
flutter: 2020-01-12 16:00:18.400322
flutter: 2020-01-12 16:00:18.864382
flutter: 2020-01-12 16:00:19.297922
flutter: 2020-01-12 16:00:19.745731
flutter: 2020-01-12 16:00:20.218457
flutter: 2020-01-12 16:00:20.654293
flutter: 2020-01-12 16:00:21.120047
flutter: 2020-01-12 16:00:21.629715
Syncing files to device Windows...                              13.892ms (!)

这是代码（这里我使用了一个 1920x1080 jpg 图像）：

import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:image/image.dart' as dart_image;

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  runApp(new MyApp());
}

class ImageModel {
  final File file;
  final double height;
  final double width;

  ImageModel(this.file, {this.width, this.height});
}

class MyApp extends StatefulWidget {
  MyApp();

  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  List<ImageModel> imageModelList = [];

  @override
  void initState() {
    super.initState();
    imageModelList = [];
    _loadImages();
  }

  void _loadImages() {
    final imagePaths = List.filled(20, 'C:/flutter/test/elephant.jpg');
    for (final imagePath in imagePaths) {
      final file = File(imagePath);
      file.readAsBytes().then((bytes) {
        final image = dart_image.decodeImage(bytes);
        // Here i should read the size to group the images based on their size.
        // For now i just add images with 1920x1080 size.
        if (image != null && image.width == 1920 && image.height == 1080) {
          final width = image.width.toDouble();
          final height = image.height.toDouble();
          final imageModel = ImageModel(file, width: width, height: height);
          print(DateTime.now());
          setState(() => imageModelList.add(imageModel));
        }
      }).catchError((err) {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('title'),
        ),
        body: SingleChildScrollView(
          child: Wrap(
            children: imageModelList.map((imageModel) {
              return new Container(
                child: Image.file(
                  imageModel.file,
                  width: 160,
                  filterQuality: FilterQuality.medium,
                ),
              );
            }).toList(),
          ),
        ),
      ),
      title: 'title',
    );
  }
}

Answer 1

发生这种情况是因为您在主隔离区上一次调用dart_image.decodeImage(bytes) 20 次，这将使分配给主隔离区的 CPU 内核 100% 忙于解码图像，直到它们全部完成。 因此，尽管正确调用了setState ，但 CPU 太忙而无法在将布局传递给 GPU 进行绘制之前对其进行计算，因此您的应用程序完全被冻结。

为了防止这种情况，您需要将艰苦的工作委派给其他隔离。 Flutter 提供了compute函数，该函数将产生一个新的隔离，使用提供的参数在其中运行提供的函数，并返回带有结果的 Future。 对于您的用例，它看起来像这样：

dart_image.Image image = await compute<List<int>, dart_image.Image>(dart_image.decodeImage, byteArray);

这是一篇带有非常相似示例的文章： https : //www.gladimdim.org/flutter-unblocking-ui-thread-with-isolates-compute-function-ck03qrwnj000peks1zvhvko1x

如果您的应用程序将经常执行此操作，则您可能希望在应用程序启动时创建一个持久隔离池 - 理想情况下，隔离区数量与逻辑CPU 内核一样多（-1 表示主隔离区） - 然后使用那些用于解码图像而不是compute函数的隔离。 这将显着提高您的应用程序的性能，因为在创建新的隔离时存在开销（根据设备性能在数百毫秒的范围内），而在隔离之间传递数据的开销仅为几十毫秒（再次，取决于设备性能和传递的数据量）。

请注意，如果您过度使用compute ，某些平台甚至可能会出现错误行为。 自从我上次尝试 Flutter 以来，它可能已经改进了这一点，但是当同时执行多个compute函数时，iOS 应用程序通常会延迟几秒钟或根本不接收compute结果。 当我用持久隔离替换compute时，这个问题完全消失了。