使用 Firebase 从不同的集合中获取数据，并在数据更改时更新 UI

Posted 2023-02-23

【中文标题】使用 Firebase 从不同的集合中获取数据，并在数据更改时更新 UI

【英文标题】：get Data from different Collections using Firebase and flutter and update the UI when data changes

【发布时间】：2021-08-06 14:22:45

【问题描述】：

我正在开发一个带有颤振的应用程序，但我遇到了一些困难。我使用 Streambuilder 的以下功能从两个集合中获取数据，但是当 firebase 中的数据更改时 UI 不会更新。这是我的功能：

class MyHomePage extends StatefulWidget 
  const MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  List<Post> listStream = [];
  AuthenticationService service = AuthenticationService();
  Stream<List<Post>> fetch() async* 
    User user = service.getCurrentUser();
    var customerDocument = await FirebaseFirestore.instance
        .collection("XXXX")
        .doc(user.uid)
        .get();

    List<String> abbonierten =
        List<String>.from(customerDocument["EEEE"]);
    for (int j = 0; j < abbonierten.length; j++) 
      var providerDocument = await FirebaseFirestore.instance
          .collection("WWWWW")
          .doc(abbonierten.elementAt(j))
          .get();
      List<Map> posts = List<Map>.from(providerDocument["posts"] ?? []);
      for (int item = 0; item < posts.length; item++) 
        Post post =
            Post.fromJson(providerDocument.data(), posts.elementAt(item));
        listStream.add(post);
      
    
    yield listStream;
  
  StreamChatList streamChatList = StreamChatList();
  ChatService chatService = ChatService();

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(30),
        child: StreamBuilder(
          stream: fetch(),
          builder: (context, snapshot) 
            if (snapshot.hasData) 
              List<Post> data = snapshot.data;
              return ListView.builder(
                  itemCount: data.length,
                  itemBuilder: (context, index) 
                    return Text(data.elementAt(index).title);
                  );
            
            return Center(child: LinearProgressIndicator());
          ,
        ),
      ),
    );
  

---

或者是否有其他方法可以完成此任务。 有人可以帮我吗？

【问题讨论】：

您在 Firestore 上调用 get()，它只读取一次值。如果您想收听实时更新，请改用snapshots() 方法。另见firebase.flutter.dev/docs/firestore/usage#realtime-changes

感谢您的回答。但是如何在 Streambuilder 之外使用快照而不是 get() ？

【参考方案1】：

您已经编写了 get 查询，它将只返回一次数据。要获取更改的更新，请使用快照查询。当有任何变化时，它会返回文档列表。

如下更改您的第二个查询以获取客户详细信息更新：

var providerDocument = await FirebaseFirestore.instance
          .collection("collectionName")
          .doc(abbonierten.elementAt(j))
          .snapshots();

如果您也想获取客户文档的更新，请将第一个查询更改如下：

var customerDocument = await FirebaseFirestore.instance
        .collection("XXXX")
        .doc(user.uid)
        .snapshots();

【讨论】：

感谢您的回答，但我如何在 Streambuilder 之外使用 Stream ？

@Akram 你能详细说明你的问题吗？这有点令人困惑，因为我对 Dart 和introductory video on flutter.dev 的了解让我相信 Streambuilder 是 Fl​​utter 的 Stream 等价物，您要如何以及为什么要在 StreamBuilder 之外使用 Stream 类？

我的意思是，我怎样才能获得多个集合，并且我想在 Streambuilder 之外的函数中获取数据。

显示我的函数 fetch() ，我想使用快照而不是 get()

@Akram 你的意思是.data() 函数吗？而且您的第二条评论似乎断章取义，可能只是我有点困，因此吸收速度较慢。