最佳实践：在 Flutter 中显示来自 Firebase 的数据答案

【问题标题】：Best practice: Display data from Firebase in Flutter最佳实践：在 Flutter 中显示来自 Firebase 的数据
【发布时间】：2020-10-18 21:21:25
【问题描述】：

我正在使用 Firebase 作为“后端”构建一个带有 Flutter 的应用程序。我必须显示相当长且复杂的列表来构建列表，并且想知道是否有比我目前的方法更基于性能的方法：

这就是我现在所做的：

 Widget build(BuildContext context) {
    return StreamBuilder(
      stream: Firestore.instance.collection("collection" ).limit(200).snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return Center(
              child: CircularProgressIndicator());
        } else {
          return _buildComplexeList(snapshot);
        }
      },
    );

这会导致以下问题：每次更新列表中的内容时，都会在列表中重建所有小部件。另外，我想使用一个 AnimatedList 并且很难找出是否添加了一个项目，如果是，那么它是在哪里添加的。

我想知道你是否可以使用 .snapshots().listen((event) { } 它返回一个 StreamSubscription 而不是一个流，但老实说我不知道如何。这可能有助于仅构建已更改的小部件。

很高兴知道你们中的一些人是否有其他更好的解决方案。提前致谢！

保罗

【问题讨论】：

标签： firebase flutter dart google-cloud-firestore

【解决方案1】：

如果您使用的是ListView.builder，请不要担心。它们被优化为仅构建可见的小部件，如上面链接的文档中所示。基于对AnimatedList documentation 的快速浏览，由于声明与ListView.builder 相似，因此性能似乎也不会成为问题。

就找出两个不同快照之间的变化而言，Firebase 可以满足您的需求。 .snapshots() 返回一个Stream<QuerySnapshot>s，每个QuerySnapshot 都有一个名为documentChanges 的字段，它本身就是一个List<DocumentChange>。您可以遍历此列表并准确查看对每个文档进行了哪些更改，如以下未经测试的片段所示：

for (final documentChange in snapshot.data.documentChanges) {
  // todo process this individual document change here
}

自己收听流媒体始终是获得更多控制权的一种选择，但StreamBuilder 将这一点从您手中抽象出来以加快开发速度。你可能不需要这样做。如果您确实想这样做，则必须确保清理在 State 的 dispose 方法中创建的所有 StreamSubscriptions。

注意：与其调用方法来构建列表，不如考虑使用小部件类。此外，通过围绕 UI 进行封装，将数据源（在本例中为 Firebase）从 UI 中抽象出来通常是一个好主意，但这绝不是必需的。

【讨论】：