forEach 访问 Firestore 文档

Question

在此示例中，第一个文本小部件 returns 错误“列的 children 不得包含任何空值，但在索引 0 处发现了一个空值。”

但如果我将其注释掉，第二个文本小部件 returns 索引为 0 的文档的标题。

（我正在使用 Streambuilder 和 Firestore）

为什么？

Column(
            children:[
              snapshot.data.docs.forEach((e) {
                return Text('${e['title']}');
              
              }),
              Text('${snapshot.data.docs[0]['title']}'),
            ]

Answer 1

如@danypata所述

这就是您应该如何转换列表。

Column(
   children:List<Widget>.from(
       snapshot.data.docs.map((e)=> Text('${e['title']}'),
        ),
    ),
),

Answer 2

forEach() 和 map() 有区别。 forEach() returns undefined 而 map() returns 一个数组。

forEach() 通常在处理来自 API 的数据或应用函数时使用，而无需显式编写循环。在这种情况下，使用 map() 到 return 的小部件列表更合适。你可以这样做：

Column(
   children:
       List<Widget>.from(snapshot.data.docs.map((e)=> Text('${e['title']}'))),
),

顺便说一句，最好先将数据转换为 Model，然后再在 UI 中使用它。例如你有一个 json 对象：

// A list of json objects
[
   {
      "title":"Sample title1",
      "content":"Sample content"
   },
   {
      "title":"Sample title2",
      "content":"Sample content"
   }
]

然后您可以为该对象定义一个 class：

class Post {
  final String title;
  final String content;

  Post({this.title, this.content});

  fromJson(Map<String, dynamic> json) {
    return Post(
      title: json['title'],
      content: json['content'],
    );
  }
}

然后解析json并在UI中使用：

// `data` is the list of json objects
var posts = List<Post>.from(data.map((json) => Post.fromJson(json)));

// In the UI
Column(
  children: List<Widget>.generate(
    posts.length,
    (index) => Text(posts[index].title),
  ),
)

借助 Firebase 的 Stream，您可以执行以下操作：


  Stream entryStream;

  @override
  void initState() {
    entryStream = FirebaseFirestore.instance.collection('entries').snapshots();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: StreamBuilder(
          stream: entryStream,
          builder: (context, snapshot) {
            if (!snapshot.hasData) return Container();
            var fbEntries = List<Entry>.from(
                snapshot.data.docs.map((json) => Entry.fromJson(json)));
            return Column(
              children: List<Widget>.generate(
                fbEntries.length,
                (index) => Text(fbEntries[index].title),
              ),
            );
          }),
    );
  }

forEach 访问 Firestore 文档

forEach to access Firestore docs

firebase

flutter

google-cloud-firestore

stream-builder