Flutter-如何在不阻塞UI的情况下计算包括未来的繁重任务?

时间:2019-02-17 17:17:53

标签: flutter dart-isolates

我正在创建一个应用程序,该应用程序以json的形式从互联网上获取帖子。我使用工厂将json解析为Post对象。 Post对象包括标题,正文和图像。我在带有listview构建器的listview中显示这些帖子。繁重的任务是我从图像中计算出2种主要色彩,并将其设置为发布项目的背景渐变。为此,我使用:https://pub.dartlang.org/packages/palette_generator

我在json解析器工厂中计算2种主要颜色,因为这样我便有了一个完整的Post对象,其中包含所有必需的信息。同样,这种方式我在渲染Post对象时不必计算颜色。我使用以下代码执行此操作:

Future<List> _getColors() async {
  Color gradientOne, gradientTwo;
  String imageUrl = json['image'];

  paletteGenerator = await PaletteGenerator.fromImageProvider(
      CachedNetworkImageProvider(imageUrl));

  gradientOne = paletteGenerator.colors.toList()[0];
  gradientTwo = paletteGenerator.colors.toList()[1];

  return [gradientOne, gradientTwo];
}

我将其添加到Post对象,然后在渲染器中等待这个未来:

post.gradientColors
    .then((result) => {
          gradient = result,
          this.setState(() {
                  loading = false;
                })
        })

在主界面中,我会显示一个加载指标,直到所有期货结算。为此,我使用以下代码:

List<Future> futures = [];

  for (var post in tmpList) {
    futures.add(post.gradientColors);
  }
  await Future.wait(futures)
      .then((result) => {list.addAll(tmpList)});
}

这很好,除了在获取新帖子时用户界面比较落后。经过一番阅读后,我发现我可以在Flutter中使用隔离。因此,我按如下所述更改了解析功能:https://flutter.io/docs/cookbook/networking/background-parsing

这完美无瑕,我的应用程序运行时没有任何滞后,缺点是无法计算我的颜色。由于某些原因,当我使用compute()时,我的Future永远不会出现。

在这种情况下是否可以使用计算,还是有一种更好的方法来计算颜色而不会导致UI出现滞后?

编辑

我尝试在没有计算的情况下对Isolate进行编程,但是色彩期货仍然无法加载。这是我使用的代码:

ReceivePort receivePort = ReceivePort();
Isolate isolate = await Isolate.spawn(getMorePosts, receivePort.sendPort);
receivePort.listen((data) {
  list.addAll(data);
});

我确实收到了所有数据,但是我的期货还没有结束。

1 个答案:

答案 0 :(得分:0)

很遗憾,compute()仅支持同步结果。

compute()很简单,并且只是包装程序,可以更轻松地启动隔离。

您可以使用自定义代码启动其他隔离,并获得更多功能。

https://api.dartlang.org/stable/2.1.1/dart-isolate/dart-isolate-library.html

isolate软件包提供了一些便利功能,使您更容易处理隔离株。