Flutter ListView延迟加载

ScrollController有一些有用的信息,例如scrolloffset和ScrollPosition的列表.

在你的情况下,有趣的部分是在controller.position中,这是当前可见的ScrollPosition.它代表可滚动的一部分.

ScrollPosition包含有关它在可滚动内部的位置的信息.如extentBefore和extentAfter.或者它的大小,有extentInside.

考虑到这一点,您可以基于extentAfter触发服务器调用,该调用表示可用的剩余卷轴空间.

这是使用我所说的基本示例.

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => new _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  ScrollController controller;
  List<String> items = new List.generate(100,(index) => 'Hello $index');

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

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Scrollbar(
        child: new ListView.builder(
          controller: controller,itemBuilder: (context,index) {
            return new Text(items[index]);
          },itemCount: items.length,),);
  }

  void _scrollListener() {
    print(controller.position.extentAfter);
    if (controller.position.extentAfter < 500) {
      setState(() {
        items.addAll(new List.generate(42,(index) => 'Inserted $index'));
      });
    }
  }
}

您可以清楚地看到,当到达滚动的末尾时,由于加载了更多项目,滚动条会消耗掉.