时间戳

首页 > 解决方案 > 来自 Firestore 的实时数据颤动不起作用

firebase - 来自 Firestore 的实时数据颤动不起作用

问题描述

我正在关注本教程，了解如何从 Flutter Firestore 获取实时更新，
https://medium.com/firebase-tips-tricks/how-to-use-cloud-firestore-in-flutter-9ea80593ca40 我向下滚动到Listen对于实时更新部分，当我按照教程进行操作时，这就是我想出的，

  String name = 'name here';
  String children = 'children here';
  String docId = '0';

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

  getUsers() async {
    final FirebaseAuth auth = FirebaseAuth.instance;
    final User? user = auth.currentUser;
    final uid = user!.uid;

    FirebaseFirestore.instance
        .collection("userNames")
        .where("uid", isEqualTo: uid)
        .snapshots()
        .listen((result) {
      result.docs.forEach((result) {
        print(result["firstName"]);
        print(result["children"].toString());
        name = result["firstName"];
        children = result["children"].toString();
      });
    });
  }

当我将值打印到控制台时，它们会实时更新，但是当我将它们放入变量并将它们连接到 Text 小部件中时，如下所示：

Text('Children: $children'), //It does not update in realtime.

例如，如果在我的文档中如果我有children: 3并且我在我的应用程序中显示，它会显示 3，但是当我手动更改它时，它不会实时更新，我必须按下热重载。另一个问题是我必须在函数中使用它们之前初始化变量，在前 3 行代码中。当我热启动时，它会显示我用来初始化它们的值。对于应该显示孩子的位置，它会显示“这里的孩子”，对于名称所在的位置，它会放置“此处的名称”，只有当我热重新加载页面时，才会将实际的 firestore 值输入到其中并显示来自 firestore 的数据数据库。如果有任何这些问题的解决方案，我更喜欢代码中的答案，而不是链接或简短的解释，我花了几个小时才找到一段利用解释的代码。

标签： firebasefluttergoogle-cloud-platformgoogle-cloud-firestore

解决方案

由于数据是异步加载的，因此在 Flutter 首次绘制小部件时数据不可用Text。您需要告诉 Flutter，当数据可用时它必须重新绘制 UI。

有两种常见的方法可以做到这一点：

  • 通过调用将children变量置于小部件的状态中setState()。这将告诉 Flutter 重新绘制小部件，然后您的文本将显示该值。
  • 您还可以使用一个StreamBuilder小部件，它也可以执行上述操作 - 但它也会自动处理各种错误状态。

我建议阅读有关有状态小部件和setState有关StreamBuilder类的信息以了解更多信息。

推荐阅读