扑火扑火 [英] Firebase pagination in flutter

问题描述

我正在为我正在开发的应用程序使用Firebase Firestore。基本上，我有一个 Collection（'Chat'），其中可能包含数千个文档，我需要一种实现 firebase分页的方式来限制

im使用 streamBuilder 并将下面的 Query 作为流传递：

  stream：widget.messageDocRef 
 .collection（'Chat'）。orderBy（'timestamp'，降序为true）
 .limit（80）
 .snapshots（）; 
  

我有一个 ListView 和一个 scrollController 为此，代码：

  ListView（
 Physics：const AlwaysScrollableScrollPhysics（），
 reverse：true， 
控制器：_scrollController，
填充：EdgeInsets.symmetric（垂直：20.0，水平：10.0），
子级：messagesBubble，
），
  

我找不到关于如何在抖动中实现它的任何好的文档。

谢谢！

解决方案

使用 ScrollController ，然后在 initState 执行以下操作：

  @override 
 void initState（） {
 this.getdbData（）; 
 super.initState（）; 
 _scrollController.addListener（（）{
 if（_scrollController.position.pixels == 
 _scrollController.position.maxScrollExtent）{
 getdbData（）; 
} 
}）; 
} 
  

因此，首先添加一个侦听器，该侦听器将注册一个闭包，当对象被调用时变化。然后检查 position.pixel 是否等于 position.maxScrollExtent 并在满足上述条件的情况下调用该方法。 / p>

也不要忘记配置控制器：

  @override 
 void dispose（）{
 _scrollController.dispose（）; 
 super.dispose（）; 
} 
  

https://api.flutter.dev/flutter/widgets/ScrollPosition-class.html

https://api.flutter.dev/flutter/widgets/ ScrollController-class.html

getdbData（）是从以下位置检索数据的方法您将分配给属性 stream

的数据库

i'm using Firebase firestore for an app i'm working on. Basically, i have a Collection('Chat') that may contain thousand of documents i need a way to implement firebase pagination to limit how much document is retrieved from the backend.

im using streamBuilder and passing the Query below as stream :

stream: widget.messageDocRef
      .collection('Chat').orderBy('timestamp', descending: true)
      .limit(80)
      .snapshots();

i have a ListView and a scrollController for it, code:

ListView(
        physics: const AlwaysScrollableScrollPhysics(),
        reverse: true,
        controller: _scrollController,
        padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
        children: messagesBubble,
      ),

i couldn't find any good documentation on how to implement it in flutter.

Thanks!

解决方案

Using a ScrollController, then inside the initState do the following :

@override
  void initState() {
    this.getdbData();
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        getdbData();
      }
    });
  }

So first add a listener that will register a closure to be called when the object changes. Then check if position.pixel is equal to the position.maxScrollExtent and call the method if the above is satisfied.

Also don't forget to dispose the controller:

@override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

https://api.flutter.dev/flutter/widgets/ScrollPosition-class.html

https://api.flutter.dev/flutter/widgets/ScrollController-class.html

The getdbData() is the method that will retrieve the data from the database which you will assign to the property stream

这篇关于扑火扑火的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！