在 Flutter 中使用 Cloud Firestore 创建无限列表

Question

我目前正在将 Cloud Firestore 与 Streambuilder 小部件一起使用，以便使用 Firestore 文档填充 ListView 小部件。

new StreamBuilder<QuerySnapshot>(
  stream: Firestore.instance.collection('videos').limit(10).snapshots(),
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
    if (!snapshot.hasData) return new Center(
      child: new CircularProgressIndicator(),
    );
    return new ListView(
      children: snapshot.data.documents.map((DocumentSnapshot document) {
        new Card(child: ...)
      }).toList(),
    );
  },
);

但是，此设置仅允许查询前 x 个结果（在本例中 x=10），其中 x 是一个固定数字，迟早会超过用户希望看到的卡片小部件的数量他或她向下滚动。

现在是否可以查询前 x 个结果，并在用户达到滚动阈值后从 Cloud Firestore 查询下一个 x+10 个结果等等？
这将允许动态列表长度，这也将有利于 Firestore 数据消耗。

Answer 1

我不确定 Streambuilder 是否可行。我已经使用startAfter 方法在我的应用程序中集成了类似的功能，如下所示

class Feed extends StatefulWidget {
  Feed({this.firestore});

  final Firestore firestore;

  @override
  _FeedState createState() => _FeedState();
}

class _FeedState extends State<Feed> {
  ScrollController controller;
  DocumentSnapshot _lastVisible;
  bool _isLoading;
  CollectionReference get homeFeeds => widget.firestore.collection('homefeed');
  List<DocumentSnapshot> _data = new List<DocumentSnapshot>();
  final scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    controller = new ScrollController()..addListener(_scrollListener);
    super.initState();
    _isLoading = true;
    _getData();
  }

  Future<Null> _getData() async {
//    await new Future.delayed(new Duration(seconds: 5));
    QuerySnapshot data;
    if (_lastVisible == null)
      data = await widget.firestore
          .collection('homefeed')
          .orderBy('created_at', descending: true)
          .limit(3)
          .getDocuments();
    else
      data = await widget.firestore
          .collection('homefeed')
          .orderBy('created_at', descending: true)
          .startAfter([_lastVisible['created_at']])
          .limit(3)
          .getDocuments();

    if (data != null && data.documents.length > 0) {
      _lastVisible = data.documents[data.documents.length - 1];
      if (mounted) {
        setState(() {
          _isLoading = false;
          _data.addAll(data.documents);
        });
      }
    } else {
      setState(() => _isLoading = false);
      scaffoldKey.currentState?.showSnackBar(
        SnackBar(
          content: Text('No more posts!'),
        ),
      );
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      key: scaffoldKey,
      appBar: new AppBar(),
      body: RefreshIndicator(
          child: ListView.builder(
        controller: controller,
        itemCount: _data.length + 1,
        itemBuilder: (_, int index) {
          if (index < _data.length) {
            final DocumentSnapshot document = _data[index];
            return new Container(
              height: 200.0,
              child: new Text(document['question']),
            );
          }
          return Center(
            child: new Opacity(
              opacity: _isLoading ? 1.0 : 0.0,
              child: new SizedBox(
                  width: 32.0,
                  height: 32.0,
                  child: new CircularProgressIndicator()),
            ),
          );
        },
      ),
        onRefresh: ()async{
            _data.clear();
            _lastVisible=null;
            await _getData();
        },
      ),
    );
  }

  @override
  void dispose() {
    controller.removeListener(_scrollListener);
    super.dispose();
  }

  void _scrollListener() {
    if (!_isLoading) {
      if (controller.position.pixels == controller.position.maxScrollExtent) {
        setState(() => _isLoading = true);
        _getData();
      }
    }
  }
}

希望对你有帮助！

Answer 2

这绝对是可能的，但 API 中没有预先构建任何内容。

您必须记住第一页上的最后一个文档，然后 startAfter() 与该文档一起获取第二页文档。

请参阅Paginating Data with Query Cursors 上的文档。