小编典典

Flutter ListView延迟加载

flutter

如何实现无尽列表视图的项目延迟加载?当用户滚动到列表视图的末尾时,我想通过网络加载更多项目。


阅读 585

收藏
2020-08-13

共1个答案

小编典典

你可以听一个ScrollController

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

在您的情况下,有趣的部分是controller.position当前可见的部分ScrollPosition。它代表了可滚动的一段。

ScrollPosition包含有关其在滚动条中位置的信息。如extentBeforeextentAfter。或者它的大小,用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'));
      });
    }
  }
}

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

2020-08-13