Flutter使用listen和StreamBuilder订阅同一个流得到不同的结果

Question

我想在加载网络图像时获取它的进度，但我发现 StreamBuilder 的结果不正确，但我可以使用 listen< 获取完整数据.

这是我的运行代码:

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Uri url = Uri.parse('https://s2.ax1x.com/2019/05/22/V9fCKH.jpg');
  ImageChunkEvent loadingProgress;
  http.Request get _req => http.Request('get', url);

  @override
  void initState() {
    super.initState();
    _init();
  }

  _init() async {
    var _client = http.Client();
    http.StreamedResponse r = await _client.send(_req);
    if (r.statusCode == HttpStatus.ok) {
      List<int> ds = [];
      r.stream.listen((List<int> d) {
        ds.addAll(d);
        loadingProgress = ImageChunkEvent(
          cumulativeBytesLoaded: ds.length,
          expectedTotalBytes: r.contentLength,
        );
      }, onDone: () {
        print(
            'listen: $loadingProgress'); // listen: ImageChunkEvent#52717(cumulativeBytesLoaded: 8867, expectedTotalBytes: 8867)
        _client?.close();
      });
    }
  }

   @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: http.Client().send(_req),
        builder: (context, AsyncSnapshot<http.StreamedResponse> snap) {
          Widget result = SizedBox();
          if (snap.hasData) {
            List<int> ds = [];
            ImageChunkEvent loadingProgress;
            http.StreamedResponse r = snap.data;

            return StreamBuilder(
              stream: r.stream,
              builder: (context, AsyncSnapshot<List<int>> s) {
                if (s.hasData) {
                  ds.addAll(s.data);
                  loadingProgress = ImageChunkEvent(
                    cumulativeBytesLoaded: ds.length,
                    expectedTotalBytes: r.contentLength,
                  );
                }
                if (s.connectionState == ConnectionState.done) {
                  print(
                      'StreamBuilder :$loadingProgress'); // StreamBuilder :ImageChunkEvent#f7d34(cumulativeBytesLoaded: 1964, expectedTotalBytes: 8867)
                  return result;
                }
                return result;
              },
            );
          }
          return result;
        },
      ),
    );
  }
}

上面代码中，StreamBuilder获取不到完整的数据，不知道为什么，希望有人能告诉我，谢谢。

Answer 1

StreamBuilder 不保证builder 会为每个事件 调用。

它尝试每帧最多调用一次。

因此，您不应使用 StreamBuilder 将流的内容映射到其他内容。