我刚刚开始使用 flutter，如果有人可以在应用程序的此页面中帮助我进行分页，那就太好了

Question

我有一个“brews”的firestore集合。 无法找到对 Brews 列表进行分页的方法。 如果需要，您可以在 ( https://github.com/iamshaunjp/flutter-firebase/tree/lesson-27 ) 找到整个代码。 谢谢..

class BrewList extends StatefulWidget {
  @override
  _BrewListState createState() => _BrewListState();
}

class _BrewListState extends State<BrewList> {
  @override
  Widget build(BuildContext context) {

    final brews = Provider.of<List<Brew>>(context) ?? [];

    return ListView.builder(
      itemCount: brews.length,
      itemBuilder: (context, index) {
        return BrewTile(brew: brews[index]);
      },
    );
  }
}

Answer 1

好的，很抱歉延迟回答，但这就是我认为您的 function 看起来像这样将您所有的啤酒作为啤酒保存到一个列表中，然后您可以将它们 map 到小部件中。

Future<void> queryFirebase(String starting, String ending) async {
    final List<Brew> brewsList = [];  //this need to be intialized higher up not in this function
    //if you intialized it in this function it will reset to empty every time you call the function

    QuerySnapshot brewsSnapshot = await Firestore.instance
        .collection('collection')
        .where('name', isGreaterThanOrEqualTo: starting)
        .where('name', isLessThanOrEqualTo: ending)
        .orderBy('name')//this sorts your query if you want that
        .getDocuments();

    if (brewsSnapshot == null) {
      return;
    }

    brewsSnapshot.documents.forEach(
      (DocumentSnapshot brewsDocuments) => {
        brewsList.add(
          Brew(
            sugars: brewsDocuments.data['sugars'],
            name: brewsDocuments.data['name'],
            strength: int.parse(
              brewsDocuments.data['sugars'],
            ),
          ),
        ),
      },
    );
    notifyListeners();
  }

那么对 function 的调用将类似于

await queryFirebase('A', //name of last brew you want displayed initially)
await queryFirebase('//next brew after last one from last function', //name of last brew you want displayed )
await queryFirebase('//next brew after last one from last function', 'Z' )

Answer 2

好的，所以我想解释一下这里发生了什么，前 20 个项目加载然后NotificationListener每次我们到达列表底部时触发，直到所有项目都加载然后它关闭。 每次触发时，它都会向itemCount添加十个项目。 现在我在这里有一些部分只是为了演示等待 3 秒的 Future，你可能不会使用，但是因为我只是使用了一个数字列表，如果我不这样做，就不会有加载时间。 对于您从 firebase 抓取，可能会有。

 final ScrollController _controller = ScrollController();


  int scrollPosition = 1;
  int itemCount = 20;
  bool isLoading = false;

  List<int> numbers = [//bunch of numbers];

  void _onEndScroll(ScrollMetrics metrics) {
    if (metrics.pixels == metrics.maxScrollExtent) {
      setState(() {
        isLoading = true;
      });

      Future.delayed(Duration(seconds: 3), () {
        setState(() {
          if (itemCount + 10 < numbers.length) {
            scrollPosition = itemCount;
            itemCount = itemCount + 10;
            isLoading = false;
          } else {
            scrollPosition = numbers.length;
            itemCount = numbers.length;
            isLoading = false;
          }
        });
       // _scollToPosition(); this is the cod that doesn't work
      });

    }
  }

// Function that doesn't work
  void _scollToPosition() {
    _controller.jumpTo(scrollPosition.toDouble());
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: isLoading
            ? CircularProgressIndicator()
            : NotificationListener<ScrollNotification>(
                onNotification: (ScrollNotification scrollNotification) {
                  if (scrollNotification is ScrollEndNotification) {
                    if (scrollNotification.metrics.pixels ==
                        scrollNotification.metrics.maxScrollExtent) {
                      if (itemCount == numbers.length) {
                        return true;
                      }
                      _onEndScroll(scrollNotification.metrics);
                    }

                    return false;
                  }
                  return false;
                },
                child: ListView.builder(
                  shrinkWrap: true,
                  controller: _controller,
                  itemCount: itemCount,
                  itemBuilder: (BuildContext context, int index) =>
                      TextAndIconWidget(
                    label: numbers[index].toString(),
                  ),
                ),
              ),
      ),
    );
  }

此链接解释了使用ListView滚动到特定 position 的问题，不幸的是具有您想要的滚动功能的SingleChildScrollView没有您需要的itemCount属性

因此，您要做的是使用上面的代码部分检测您何时位于列表底部，然后查询 firebase 以获取下一组 brew 有多种方法可以查询 firebase。 您可以在 此处找到文档。 您想通过查看 github 找到对啤酒进行分类的最佳方法，我认为您最好的选择是按字母顺序排列。 所以你要做的是查询

Firestore.instance.collection('brews').where('name', isLessThanOrEqualTo: NameOfLastBrewYouWantLoaded).getDocuments();
Firestore.instance.collection('brews').where('name', isGreaterThanOrEqualTo: NameOfStartingBrew).where('name', isLessThanOrEqualTo: NameOfEnding).getDocuments(); //if your getting duplicates change isGreaterThanOrEqualTo to isGreaterThan and same for isLessThanOrEqualTo
Firestore.instance.collection('brews').where('name', isGreaterThanOrEqualTo: NameOfLastBrewYouLoaded).getDocuments();

这 3 个查询将是您的初始查询，而不是您对除最后一个查询以外的每个查询的查询。

我希望这不会太混乱