时间戳

首页 > 解决方案 > 从图像加载调色板后极度滞后

flutter - 从图像加载调色板后极度滞后

问题描述

我目前正在 Flutter 中制作壁纸应用程序。我正在使用palette_generator包从图像中提取颜色。问题是当应用程序从图像中提取颜色时。UI 冻结 3 秒，然后颜色显示在屏幕上。渲染颜色后，整个屏幕都会出现卡顿和延迟。该屏幕上的所有动画都表现得很糟糕。弹出该屏幕可消除卡顿和滞后。这是我正在使用的代码：

 Future<PaletteGenerator?> updatePalette() async {
 var cache = DefaultCacheManager();
 File file = await cache.getSingleFile(widget.wall.url);
    ui.Image image = await load(file);
    palette = await PaletteGenerator.fromImage(
      image,
      maximumColorCount: 7,
    );
 return palette;
  }

 Future<ui.Image> load(File file) async {
 var data = await file.readAsBytes();
    ui.Codec codec = await ui.instantiateImageCodec(data);
    ui.FrameInfo fi = await codec.getNextFrame();
 return fi.image;
  }

FutureBuilder<PaletteGenerator?>(
                    future: updatePalette(),
                    builder: (context, snapshot) {
                      if (snapshot.hasData)
                        return MyBottomSheet(
                            wall: widget.wall, palette: snapshot.data);

                      return LinearProgressIndicator();
                    }),

我能做些什么来解决这个问题吗？

标签： flutterflutter-dependenciesflutter-packages

解决方案

我推荐使用flutter_isolate包来实现隔离。您正在使用的功能是一个繁重的功能。使用隔离可避免对主线程施加太大压力。

示例代码：

void updatePalette() async {
    var cache = DefaultCacheManager();
    File file = await cache.getSingleFile(url);
    var port = ReceivePort();
    var isolate = await FlutterIsolate.spawn(
      computePalette,
      [file.readAsBytesSync(), port.sendPort],
    );
    port.listen((msg) {
      List<int> data = msg;
      data.forEach((d) => colorList.add(Color(d));
      isolate.kill();
      port.close();
    });
  }

void computePalette(List<Object> args) async {
  var image = args[0] as Uint8List;
  var port = args[1] as SendPort;
  var img = Image.memory(image);
  var palette = await PaletteGenerator.fromImageProvider(
    img.image,
    maximumColorCount: 7,
  );
  List<int> colors = [];
  palette.colors.forEach((element) => colors.add(element.value));
  port.send(colors);
}

推荐阅读