我剛剛開始使用 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 個查詢將是您的初始查詢，而不是您對除最后一個查詢以外的每個查詢的查詢。

我希望這不會太混亂