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,
          ),
        ),
      ],
    ));
  }
}

想要一张拥有Firebase头衔的卡片的列表视图（很快就会超过头衔，但希望首先使用）

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将该值分配给{{1} }，然后将该代码更改为此：

totalLength

您应该在itemCount: totalLength,方法中调用setTotalLength。

或者，您可以将代码更改为此，但是我不确定100％可以这样做：

initState

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

1 个答案: