我如何在列表视图的滚动中添加更多项目？

Question

此代码当前加载所有存储在Firestore集合中的啤酒。我如何才能最初仅加载10个啤酒，然后当用户向下滚动并到达10个啤酒列表的末尾时再加载。应该在最后一次冲泡后再装入10个。并且应根据时间戳对冲泡进行排序。

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

class _BrewListState extends State<BrewList> {
  List<Brew> brews = [];

  @override
  void initState() {
    _startFirst();
    super.initState();
  }

  _startFirst() async {
    brews = await DatabaseService().brews ?? [];
    setState(() {
      brews = brews;

    });
  }

  @override
  Widget build(BuildContext context) {
    Future<void> _refreshBrews() async {
      List<Brew> tempList = await DatabaseService().brews;
      setState(() {
        brews = tempList;
      });
      print(brews);
    }


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

Answer 1

Firestore.instance
            .collection('brews')
            .document(items)
            .limit(10)
            .snapshots();

Answer 2

您可以使用滚动控制器和侦听器来确定用户是否已滚动到屏幕底部。如果他们已从数据库服务中加载接下来的10个项目。

这看起来类似于以下内容。

ScrollController _controller = ScrollController(); 

@override
void initState() {
  super.initState();
  // add listener
  _controller.addListener(_scrollListener);
}

_scrollListener() {
  setState(() {
    if (_controller.position.atEdge) {
      if (_controller.position.pixels == 0)
      {
        // user is at top of the list
      }
      else 
      {
        // user is at the bottom of the list.
        // load next 10 items and add them to the list of items in the list.
       }
    }
 });
}