firebase - Future Builder不显示Cloud Firestore中的数据

Question

我从Firebase从Cloud Firestore加载数据。在函数loadAssignments()的print语句中，已加载的数据显示正确。但是，当我将使用小部件FutureBuilder在“文本”小部件中显示数据时，它不显示数据，我也不知道为什么。谁能帮帮我吗？

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class AssignmentPage extends StatefulWidget {
  @override
  _AssignmentPageState createState() => _AssignmentPageState();
}

class _AssignmentPageState extends State<AssignmentPage> {
  Future _loadAssignments;
  QuerySnapshot _assignments;

  @override
  void initState() {
    super.initState();
    _loadAssignments = loadAssignments();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bühlmaier App'),
        centerTitle: true,
        automaticallyImplyLeading: false,
      ),
      body: FutureBuilder(
        future: _loadAssignments,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return ListView.builder(
                itemCount: _assignments.documents.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: ListTile(
                      leading: Text('${_assignments.documents[index].data['Name'].toString()}'),
                    ),
                  );
                });
          } else if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }
          return Center(child: CircularProgressIndicator());
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => toPage(NewAssignmentPage()),
      ),
    );
  }

  Future<void> loadAssignments() async {
    _assignments = await Firestore.instance.collection('assignments').getDocuments();
    for (int i = 0; i < _assignments.documents.length; i++) {
      print('DATEN: ' + _assignments.documents[i].data['Name'].toString());
    }
    setState(() {});
  }
}

当我添加以下代码时:

else if (snapshot.connectionState == ConnectionState.waiting) {
        return Text("No data");
      }

它有效，但是当我将代码编辑为:

else if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          }

它不会加载数据，CircularProgressIndicator()也不会移动。

Answer 1

使用future属性中的方法:

          FutureBuilder(
            future: loadAssignments(),
            builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return ListView.builder(
                    shrinkWrap: true,
                    itemCount: snapshot.data.documents.length,
                    itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: ListTile(
                      leading: Text('${snapshot.data.documents[index].data['Name'].toString()}'),
                    ),
                  );
                    });
              } else if (snapshot.connectionState == ConnectionState.none) {
                return Text("No data");
              }
              return CircularProgressIndicator();
            },
          ),

将方法更改为以下内容:

  Future<QuerySnapshot> loadAssignments() async {
    return await Firestore.instance.collection('assignments').getDocuments();
  }