如何使用 Stream builder 在带有数据更新的小部件上显示 Flutter firebase 实时数据库？

Question

我是第一次使用 Firebase。我的应用程序已成功连接到 firebase，我可以通过以下代码访问屏幕上的数据。我的问题是，当数据库中的值发生变化时，它应该在屏幕上进行更改，而无需按下任何按钮或其他东西。

stream:  FirebaseDatabase.instance.ref("app3-e0228-default-rtdb").onvalue,

当我使用上面的行时，屏幕上的数据将无法访问。我该怎么办？

      StreamBuilder(
                stream:  FirebaseDatabase.instance.ref("app3-e0228-default-rtdb").once().asStream(),

                builder: (context,AsyncSnapshot<dynamic>  snapshot) {
                  if (snapshot.connectionState == ConnectionState.done) {
                     DatabaseEvent databaseEvent = snapshot.data!; // ???? Get the DatabaseEvent from the AsyncSnapshot
                     var databaseSnapshot = databaseEvent.snapshot; // ???? Get the DataSnapshot from the DatabaseEvent
                     print('Snapshot: ${databaseSnapshot.value}');
                    return Text("${databaseSnapshot.value}");
                  } else {
                    return CircularProgressIndicator();
                  }
                }),

数据库

Answer 1

我发现的第一个问题在这里：

stream: FirebaseDatabase.instance
    .ref("app3-e0228-default-rtdb")
    .once()
    .asStream(),

您正在调用once()，这意味着您从数据库中读取了一次值（因此得名），然后将其转换为流。所以你的流将只有一个元素。

如果您也想收听数据库并接收更新，请使用onValue：

stream: FirebaseDatabase.instance
    .ref("app3-e0228-default-rtdb")
    .onValue

在您的builder 中，您将拥有一个包含数据库数据的DataSnapshot，您可以这样做：

builder: (context, snapshot) {
  if (snapshot.connectionState == ConnectionState.done) {
    var databaseEvent = snapshot.data!; // ? Get the DatabaseEvent from the AsyncSnapshot
    var databaseSnapshot = databaseEvent.snapshot; // ? Get the DataSnapshot from the DatabaseEvent
    print('Snapshot: ${databaseSnapshot.value}');
    return LiveMatch();
  } else {
    return CircularProgressIndicator();
  }

Answer 2

您是否实现了 streamSubscription 并尝试收听它？ 每当发生更改时，StreamBuilder 都会自动更新数据。