Flutter ListView 延迟加载

Question

如何实现无限 ListView 的项目延迟加载？当用户滚动到 ListView 的末尾时，我想通过网络加载更多项目。

Answer 1

您可以收听 ScrollController .

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

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

ScrollPosition 包含有关它在可滚动中的位置的信息。如extentBefore 和extentAfter。或者它的大小，带有 extentInside。

考虑到这一点，您可以根据代表剩余可用滚动空间的 extentAfter 触发服务器调用。

这是一个使用我所说的基本示例。

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

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

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

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

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

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

---

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