如何列出 Flutter Firestore 中文档的值？

Question

我有一个 Firebase Firestore 构建如下：

我想从集合中的所有文档中提取标题值，并使用ListTile显示此传入数据。

我能够使用我编写的代码访问所有title值：

FirebaseFirestore.instance.collection(user.uid).get().then((value) {
  value.docs.forEach((element) {
    print(element.data()["title"]);
  });
});

但我不知道如何将传入值转储到ListTile 。 如何将这些传入的标题值转储到ListTile ？

Answer 1

如果您不使用任何 state 管理解决方案（Riverpod、Provider、Bloc 等），您可以只使用FutureBuilder ，或者如果您想获取实时数据 Stream，您可以像这样使用StreamBuilder

Streambuilder 示例：

StreamBuilder<QuerySnapshot<Map<String, dynamic>>>( // inside the <> you enter the type of your stream
      stream: FirebaseFirestore.instance.collection(user.uid).snapshots(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(
                  snapshot.data!.docs[index].get('title'),
                ),
              );
            },
          );
        }
        if (snapshot.hasError) {
          return const Text('Error');
        } else {
          return const CircularProgressIndicator();
        }
      },
    );

我建议您使用数据类而不是data.docs.get('xxx') 。

例如：

class MyDataClass {
  final String title;
  final String content;

  MyDataClass({
    required this.title,
    required this.content,
  });

  Map<String, dynamic> toMap() {
    final result = <String, dynamic>{};
  
    result.addAll({'title': title});
    result.addAll({'content': content});
  
    return result;
  }

  factory MyDataClass.fromMap(Map<String, dynamic> map) {
    return MyDataClass(
      title: map['title'] ?? '',
      content: map['content'] ?? '',
    );
  }

  String toJson() => json.encode(toMap());

  factory MyDataClass.fromJson(String source) => MyDataClass.fromMap(json.decode(source));
}

要生成 toJson/fromJson 或 toMap/fromMap 函数，您可以在 VSCode 或各种网站中使用 Dart 数据 class 生成扩展。

现在您可以像这样显示数据：

if (snapshot.hasData) {
          final List<MyDataClass> myList = snapshot.data!.docs
              .map(
                (doc) => MyDataClass.fromMap(doc.data()),
              )
              .toList();
          return ListView.builder(
            itemCount: myList.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(
                  myList[index].title,
                ),
              );
            },
          );
        }