时间戳

首页 > 解决方案 > StreamBuilder 仅在 Flutter 中的流结束时更新

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

问题描述

我有这个流应该处理以帧细分的繁重工作量：

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 处更新，所以当流结束时。

难道我做错了什么？

标签： user-interfacedartflutterstream

解决方案

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

一种解决方案是添加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;
    }
  }

推荐阅读