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 ，即通过等待它立即返回的 future 来排队计算。

请参阅 sample on DartPad .

但是如果你有很多繁重的计算，我认为最好开始一个新的隔离并与它沟通它的状态。

更新

这是几乎，不完全相同的工作函数，没有使用 await 重写，也许它会更清楚它是如何工作的:

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

在这里，我们实际上创建了 200 个 future ，将它们排入事件循环(Future 构造函数这样做)，并为每个 future 注册一个个人回调。