Flutter ListView延迟加载 [英] Flutter ListView lazy loading

问题描述

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

How can I realize items lazy loading for endless listview? I want to load more items by network when user scroll to the end of listview.

推荐答案

您可以收听

You can listen to a ScrollController.

ScrollController具有一些有用的信息，例如滚动偏移量和 ScrollPosition .

ScrollController has some useful information, such as the scrolloffset and a list of ScrollPosition.

在您的情况下，有趣的部分在controller.position中，这是当前可见的ScrollPosition.代表可滚动页面的一部分.

In your case the interesting part is in controller.position which is the currently visible ScrollPosition. Which represents a segment of the scrollable.

ScrollPosition包含有关其在滚动条中的位置的信息.如extentBefore和extentAfter.或者它的大小，用extentInside.

ScrollPosition contains informations about it's position inside the scrollable. Such as extentBefore and extentAfter. Or it's size, with extentInside.

考虑到这一点，您可以基于extentAfter触发服务器调用，该服务器代表可用的剩余滚动空间.

Considering this, you could trigger a server call based on extentAfter which represents the remaining scroll space available.

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

Here's an basic example using what I said.

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'));
      });
    }
  }
}

---

您可以清楚地看到到达滚动结尾时，滚动条由于加载了更多项目而扩展.

---

You can clearly see that when reaching the end of the scroll, it scrollbar expends due to having loaded more items.

这篇关于Flutter ListView延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！