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

Question

因为我在我的屏幕上使用了多个 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);
                }),
          ],
        ),
      ),
    );
  }
}

我尝试将其设置为 BroadcastStreams：

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);
                }),
          ],
        ),
      ),
    );
  }
}

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

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

Answer 1

在您的 streamBuilder 生成器中，您必须检查快照是否实际接收到数据，否则您的文本小部件将接收 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

Answer 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
      }
    }),

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

StreamBuilder - Bad state: Use multiple StreamBuilder on one screen

stream

dart

flutter

stream-builder