firebase - 无法让StreamBuilder显示来自Cloud Firestore的数据

Question

我知道我已经与数据库建立了连接，并且没有出现错误，所以我很困惑。标题和代码应该很好地总结了问题。以为我缺少什么？

这是应该显示带有Firebase标题的卡片的主要代码

mainList() {
  StreamBuilder(
      stream: Firestore.instance.collection('Events').snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return Text('Loading');
        } else {
          return ListView.builder(
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) {
              DocumentSnapshot userPost = snapshot.data.documents[index];
              return Container(
                width: MediaQuery.of(context).size.width,
                height: 350.0,
                child: Padding(
                    padding: EdgeInsets.only(top: 8.0, bottom: 8.0),
                    child: Material(
                        elevation: 14.0,
                        shadowColor: Color(0x802196F3),
                        child: Center(
                          child: Padding(
                            padding: EdgeInsets.all(8.0),
                            child: Column(
                              children: <Widget>[
                                Container(
                                    width: MediaQuery.of(context).size.width,
                                    height: 200.0,
                                    child: Text(
                                      '${userPost['title']}',
                                    ))
                              ],
                            ),
                          ),
                        ))),
              );
            },
          );
        }
      });
}

这是调用函数的位置:

lass MyAppmain extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    var listView = ListView.builder(
        itemCount: local.length,
        itemBuilder: (BuildContext cnxt, int index) {
          return new Text(local[index]);
        });
    return MaterialApp(
        home: PageView(
      controller: controller,
      children: <Widget>[
        //home page---------------------------
        Scaffold(
          appBar: AppBar(
            title: Text(
              'Events',
            ),
            elevation: 20,
          ),
          //main list view for the cards
          //think I use streambuilder for this so google before starting
          body: mainList(),//RIGHT HERE

          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {
              Navigator.push(context, NewEventTransition());
            },
            mini: true,
          ),
        ),
        //Profile Page-------------------------------
        Scaffold(
          appBar: AppBar(
            title: Text(
              'Profile',
            ),
            elevation: 20,
          ),
        ),
      ],
    ));
  }
}

想要从火力地堡持有标题的卡片的列表 View (很快就会超过标题，但要首先使用此功能)

Answer 1

这是一个普遍的问题。

return ListView.builder(
            itemCount: snapshot.data.documents.length, // this line is the culprit!
            itemBuilder: (context, index) {
                         print(snapshot.data.documents.length); // it will print null
                         .......
                        }  

请参阅，从Firebase提取数据需要一些时间。调用 ListView.builder时， snapshot.data.documents.length的值实际上为空。几秒钟后，它获取了数据，但是直到那时 ListView才构建了UI，这就是空白的原因。要检查该值，可以添加如上所示的Print语句。

现在，有几种方法可以解决此问题:

使一个int变量为 totalLength，使一个函数为 setTotalLength，它调用 Firebase/Firestore数据库，并使用 setState将此值分配给 totalLength，然后将该代码更改为:

itemCount: totalLength,

You should Call setTotalLength in your initState method.

或者，您可以将代码更改为此，但是我不是100％确定这会起作用:

itemCount: snapshot.data.documents.length ?? 0 // returns 0 if the value is null, may reload UI again when data comes