StreamBuilder - 错误状态：在一个屏幕上使用多个 StreamBuilder答案

【问题标题】：StreamBuilder - Bad state: Use multiple StreamBuilder on one screenStreamBuilder - 错误状态：在一个屏幕上使用多个 StreamBuilder
【发布时间】：2021-07-26 12:29:57
【问题描述】：

由于我在屏幕中使用了多个 StreamBuilder，我收到了 Bad state 错误。我知道我必须使用 StreamController 并将其与 .broadcast() 一起使用。

因为我不自己创建流我不知道如何更改这些流的控制器。

这是我的代码：

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            StreamBuilder<List<int>>(
                stream: streamOne?.value,
                builder: (c, snapshot) {
                  final newValueOne = snapshot.data;
                  return Text(newValueOne);
                }),
            StreamBuilder<List<int>>(
                stream: streamTwo?.value,
                builder: (c, snapshot) {
                  final newValueTwo = snapshot.data;
                  return Text(newValueTwo);
                }),
            StreamBuilder<List<int>>(
                stream: streamThree?.value,
                builder: (c, snapshot) {
                  final newValueThree = snapshot.data;
                  return Text(newValueThree);
                }),
          ],
        ),
      ),
    );
  }
}

我尝试将它作为广播流：

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            StreamBuilder<List<int>>(
                stream: streamOne?.asBroadcastStream(),
                builder: (c, snapshot) {
                  final newValueOne = snapshot.data;
                  return Text(newValueOne);
                }),
            StreamBuilder<List<int>>(
                stream: streamTwo?.asBroadcastStream(),
                builder: (c, snapshot) {
                  final newValueTwo = snapshot.data;
                  return Text(newValueTwo);
                }),
            StreamBuilder<List<int>>(
                stream: streamThree?.asBroadcastStream(),
                builder: (c, snapshot) {
                  final newValueThree = snapshot.data;
                  return Text(newValueThree);
                }),
          ],
        ),
      ),
    );
  }
}

这没有用，仍然给我一个糟糕的状态错误。

如果有人可以在这里帮助我，那就太好了。非常感谢！

【问题讨论】：

标签： flutter dart stream stream-builder

【解决方案1】：

在您的 streamBuilder 构建器中，您必须检查快照是否实际接收到数据，否则您的 Text 小部件接收到 null，从而引发错误状态：

 StreamBuilder<List<int>>(
                stream: streamThree.asBroadcastStream(),
                builder: (c, snapshot) {
                  if(snapshot.hasData){
                    final newValueThree = snapshot.data;
                    return Text(newValueThree);
                  } else {
                    // return any other widget like CircularProgressIndicator
                  }
                }),

您也可以查看

snpashot.connectionState == ConnectionState.done

和

snpashot.connectionState == ConnectionState.active

和

snpashot.connectionState == ConnectionState.waiting

【讨论】：

【解决方案2】：

谢谢@Arnaud Delubac。我还必须检查我从流中得到的数组是否不为空：

StreamBuilder<List<int>>(
    stream: streamThree.asBroadcastStream(),
    builder: (c, snapshot) {
      if (snapshot.hasData && snapshot.data.isNotEmpty && snapshot.connectionState == ConnectionState.active) {
        final newValueThree = snapshot.data;
        return Text(newValueThree);
      } else {
        // return any other widget like CircularProgressIndicator
      }
    }),

【讨论】：