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

Question

我有一个像这样的 Firebase Firestore 构建：

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

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

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

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

Answer 1

如果您不使用任何状态管理解决方案（Riverpod、Provider、Bloc 等），您可以只使用 FutureBuilder 或者如果您想获取实时数据流，您可以使用 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();
        }
      },
    );

我建议您使用数据 classes 而不是 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 Data 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,
                ),
              );
            },
          );
        }

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

How to list values from documents in Flutter Firestore?

firebase

flutter

google-cloud-firestore

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

How to list values ​from documents in Flutter Firestore?

firebase

flutter

google-cloud-firestore

How to list values from documents in Flutter Firestore?