Dart：在长时间计算期间更新 UI

Question

我有一个小的 dart 脚本，我打算按以下方式使用它：

CanvasElement canvas;
void main() {
  canvas = querySelector('#canvas');
  querySelector('#start-button').onClick.listen((_) => work());
}

void work() {
  var state; // some state of the computation
  for (int i = 0; i < /*big number*/; i++) {
    // do some long computation
    render(state); // display intermediate result visualisation on canvas
  }
}

void render(var state) {
  canvas.context2D.... // draw on canvas based on state
}

这是监听点击一个按钮并在该点击上执行一些长时间的计算，并根据该计算在 canvas 实时显示一些中间结果作为计算的进展。

但是，这不起作用 - canvas 在整个计算完成后仅更新一次。

这是为什么？我应该如何安排我的代码以实时响应的方式工作？

Answer 1

其中一个解决方案是将您的长计算的一部分放入 dart 的 event loop，即通过立即等待未来来排队计算 return。

请参阅 sample on DartPad。

但是如果你有很多繁重的计算，我认为最好启动一个新的 isolate 并与它交流它的状态。

更新

这里是差不多，不完全一样的工作函数，重写了没有使用await，也许它是如何工作的会更清楚一点：

for (int i = 0; i < 200; i++) {
  new Future(()=>compute(i)).then((double result)=>render(i+result*50));
}

在这里，我们实际上创建了 200 个 futures，将它们排入事件循环（Future 构造函数执行此操作），并为每个 futures 注册一个个人回调。

Dart：在长时间计算期间更新 UI

Dart: update UI during long computation

html5-canvas

dart