Flutter ListView延迟加载

Flutter ListView延迟加载,第1张

概述如何实现无限列表视图的延迟加载项?当用户滚动到listview的末尾时,我想通过网络加载更多项目. 你可以听一个 ScrollController. ScrollController有一些有用的信息,例如scrolloffset和ScrollPosition的列表. 在你的情况下,有趣的部分是在controller.position中,这是当前可见的ScrollPosition.它代表可滚动的一部 如何实现无限列表视图的延迟加载项?当用户滚动到ListvIEw的末尾时,我想通过网络加载更多项目.解决方法 你可以听一个 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'));      });    }  }}

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

总结

以上是内存溢出为你收集整理的Flutter ListView延迟加载全部内容,希望文章能够帮你解决Flutter ListView延迟加载所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1004132.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存