Flutter ListView延迟加载

Z时代
2024-01-10
分类：问答

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

回答：

你可以听一个ScrollController。

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