user-interface - StreamBuilder 仅在 Flutter 中的流结束时更新

Question

我有这个流，它应该处理按帧分割的繁重工作量:

Stream<int> _test() async* {
for(int i = 0; i < 50; i++){

  ///Heavy workload simulation
  for(int x = 0; x < 100000; x++){
    double _r = Random().nextDouble();
  }
  print(i);
  yield i;
  }
}

然后我使用 StreamBuilder 展示了一个简单的指标:

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Center(
    child: Column(
      children: <Widget>[
        StreamBuilder<int>(
          stream: _test(),
          initialData: 0,
          builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
            return Text(
              '${snapshot.data}',

            );
          },
        ),
        RaisedButton(onPressed: () {_test();})
      ],
    ),
  ),

);

但是当我执行代码时，i 的所有值(从 0 到 49)都会有一点延迟打印出来，所以 _test 流不是瞬间。但是 UI 仅在 49 时更新，因此在流结束时更新。

我做错了什么吗？

Answer 1

StreamBuilder将使用 snapshot 和 ConnectionState.done 构建其组件，在您的情况下是 _test() 时的最后一个值 (49)函数完成执行，因为连续分配它们将不允许较早的操作完成。

一种解决方案是添加 Future.delayed()。这将允许每次迭代在移动到下一个值之前完全流式传输。所以 _test() 应该修改为:

 Stream<int> _test() async* {
    for(int i = 0; i < 50; i++){

      ///Heavy workload simulation
      for(int x = 0; x < 100000; x++){
        double _r = Random().nextDouble();
      }
      print(i);
      // Delay duration is arbitrarily chosen 
      await Future.delayed(Duration(milliseconds:10), () {
      });

      yield i;
    }
  }