Flutter ListView优雅的获取第一个可见Item的Position-程序员宅基地

技术标签: ListVie  Position  Flutter  可见Item  

      Flutter给我们提供了丰富的控件和控制方法,但是也有不少问题,就这两天,我就遇到去获取ListView第一个可见Item的Position的问题,Flutter并没有提供方法,只能我们想办法,我记得有大佬说过ListView和Android的RecyleView一样,那ListView的ItemBuilder肯定是用多少创建多少,用哪个创建哪个,抱着试试的态度,我在ItemBuilder打印了一下,果然,他只创建当前要用的Item,下来我们看看我的思路

     我们首先考虑初始化了多少个Item,这个信息对我们又什么用呢?? 这个数据我们缓存成Items的位置数组“positions”,(例如初始化Item数量为 5  ,表示初始化了0-5  Position 的 Item),初始化完成后,ListView滑动时,builder会根据需要创建新的Item,回收不用的Item。 builder每添加一个Item(前面说过,用一个添加一个,已经初始化好的Item,builder不在创建,即不再执行创建方法),我们就在初始化时缓存的位置变量“positions”的基础上改动,那Position 数组就可以自行调整头和尾了。

       这样,我们就知道大概第一个可见Item就在数组变量“positions”的前几个,为什么说是前几个,而不是第一个,因为我们缓存的Position 包括 屏幕可见+缓存的,所以第一个并不一定时可见的。

       好了,讲了那么多,那怎么去知道初始化了多少个Item??? 在初始化时 ,我们不确定到底会 初始创建 多少Item,数组变量也不好创建, 所以我们用一个整形变量“memoryPosition”去记录 初始化创建 多少Item,好了,我们现在知道Item数量了(包括 屏幕可见+缓存的)。      初始化Item的数量我们知道了。接下来 我们找个合适的时机将Item数量 Position 缓存成List数组—>“positions”,我是在NotificationListener的ScroStartNotification里面缓存Position的。    positions数组可以自行调整头和尾 那不就更简单了  ,看代码 ↓↓↓↓

 

     注意:大家尽量把cacheEctent的值调小,缓存越小,后面获取position越快

List<int> positions;
int memoryPosition;

child: new ListView.builder(
    cacheExtent: 30.0,
    itemBuilder: (context, index) {
       //根据positions==null来判断是否已经初始化
       if(positions!=null) {
            //已经初始化过的话 滑动自行调整头和尾
            if (index > positions.last) {
                positions.removeAt(0);
                positions.add(index);
            } else if (index < positions.first) {
                positions.removeLast();
                positions.insert(0, index);
            }
        }else{
            //记录初始化了多少个Item
            memoryPosition=index;
        }
},),

  NotificationListener的ScroStartNotification里面将变量memoryPosition 缓存成数组 positions,看代码

new NotificationListener(
    onNotification: (notification){
        if(notification is ScrollStartNotification){
            if(positions==null) {
                positions=new List();
                for(int i=0 ;i<=memoryPosition;i++){
                    positions.add(i);
                }
            }
        }
    },
    child: new ListView.builder(),

这样我们就知道头和尾了,并实时更新,可是头不一定是第一个可见Item,有可能是缓存的item,那我们怎么办呢,

我当时在想 我在调用时 如果我让 ListView在屏幕的位置 和  Item在屏幕中的位置+Item的高度  做比较  如果Item可见 ,那么Item在屏幕中的位置+Item的高度肯定大于ListView在屏幕的位置 (大家别忘了给ListView和它的Item们设置Key哟),好了,我们看代码

int firstChildPosition=positions.first;
int lastChildPosition=positions.last;

double chileGlobalPositionY;
double chileHeight;

//获取ListView在屏幕中的位置
double listViewGlobalPositionY=listViewKey.currentContext.findRenderObject().getTransformTo(null).getTranslation().y;
for(int i=firstChildPosition;i<=lastChildPosition;i++){
    if(adsorptionDatas[i].adsorptionKey.currentContext==null){
        continue;
    }
     //子控件在屏幕中的位置 用于计算第一个可见Item的位置
    chileGlobalPositionY=adsorptionDatas[i].adsorptionKey.currentContext.findRenderObject().getTransformTo(null).getTranslation().y;
    //控件高度 用于计算第一个可见Item的位置
    chileHeight=adsorptionDatas[i].adsorptionKey.currentContext.findRenderObject().paintBounds.size.height;
    //如果在屏幕中可见
    if(chileGlobalPositionY+chileHeight>listViewGlobalPositionY){
        //TODO i就是第一个可见Item的位置
        break;
    }
}

这样,我们的第一个可见Item的位置就获取到了

详细代码可参考https://github.com/baoolong/PullToRefresh 吸顶布局模块的代码

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/baoolong/article/details/82744871

智能推荐

2024年,PHP前景的路在何方_php 2024-程序员宅基地

文章浏览阅读1k次,点赞9次,收藏8次。首先,我们需要了解PHP的优势和不足。然而,PHP也面临着一些挑战。随着技术的不断发展和市场需求的变化,PHP在某些领域中的竞争力可能会受到其他语言的挑战。PHP作为一种流行的Web开发语言,在过去的几年中已经证明了它的价值和实力。然而,未来的技术发展和市场需求是不断变化的,所以我们需要对PHP的前景进行深入分析,以便更好地应对未来的变革。总之,PHP的前景取决于它如何应对未来的技术和市场需求的变化。如果PHP能够保持其优势,不断适应新的挑战和机遇,那么它在未来的Web开发领域中仍然会发挥重要的作用。_php 2024

HTML基础-01_html圆形单选框-程序员宅基地

文章浏览阅读652次。一些琐碎的笔记。【>】可以指到下一级的标签 table>tr>td> table>tr3>td3无序列表: 有序列表: 自定列表: ul>li2 ol>li3 dl>dt{标题}>dd{内容}*3div标签纯盒子,margin有垂直塌陷被包含 div是独占一行的,span不能独占一行,span是可以接在后面的,块的大小就是内容的大小。 rowspan,合并行;colspan,合并列padding就是边框里面内容的距离。所以要加上高和_html圆形单选框

移动端 vue自定义指令 解决弹出键盘遮挡输入框_vue 全局解决手机输入法键盘弹出问题遮挡问题-程序员宅基地

文章浏览阅读2k次。XXX.JS 用于解决小键盘导致输入框被挡住的问题*/let startTop;let scrollDom;function adjustListener() { // 延时执行,等键盘弹出界面页面resize完成 setTimeout(() => { let { top: elTop, height: elHeight } = this.getBoundingClientRect(); let innerH = window.inne_vue 全局解决手机输入法键盘弹出问题遮挡问题

整数因子分解问题(递归+栈)-程序员宅基地

文章浏览阅读1.1k次,点赞2次,收藏11次。整数因子分解问题及其扩展问题的解答_整数因子分解问题

Linux环境Nginx编译安装_linuxnginx编译安装-程序员宅基地

文章浏览阅读359次,点赞4次,收藏3次。Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的。Nginx 是一个很强大的高性能Web和反向代理服务,它具有很多非常优越的特性:在连接高并发的情况下,Nginx是Apache服务不错的替代品:Nginx在美国是做虚拟主机生意的老板们经常选择的软件平台之一。能够支持高达 50,000 个并发连接数的响应。_linuxnginx编译安装

spring框架下集成spring-session_spring 5.1.6集成spring session-程序员宅基地

文章浏览阅读750次。使用maven构建项目,pom.xml配置如下: org.springframework.data spring-data-r_spring 5.1.6集成spring session

随便推点

dns-程序员宅基地

文章浏览阅读123次。DNS域名解析服务一、DNS的原理:1.概述:DNS--域名解析系统;2.结构:三级、二级、顶级、.为根,全球一共十三个根DNS服务器;3.FQDN:完全合格域名,主机名(www)+域名后缀(baidu.com),用来描述全球唯一的一台主机;4.DNS解析记录:a.主机解析域名过程:找缓存--找hosts文件--netbios(仅限于windows主机)--DNS服务器--上一级DNS服务器b..._255dns

计算机软体专业,高考志愿填报:谈谈“计算机专业”这个“香饽饽”-程序员宅基地

文章浏览阅读101次。还有一周左右,今年高考的成绩就出来了。选择有时候比努力更重要,考生和家长们要提前准备好,对各个专业权衡利弊、横向对比,在填报志愿时才能做出最理性,最适合未来发展的选择。计算机专业,一直都是大热门专业,也是众多人的“真香”专业,今天就来分析一下,什么样的同学适合填报这个专业,它要怎么学,它的就业前景如何。一起来当“程序猿”和“程序媛”吧。一、什么样的同学适合学计算机?计算机专业不仅仅是理论学习,还有...

HRBUST - 1530-程序员宅基地

文章浏览阅读58次。题目My birthday is coming up and traditionally I’m serving pie. Not just one pie, no, I have a number N of them, of various tastes and of various sizes. F of my friends are coming to my party and each ...

joyful-pandas(下)学习笔记——第10章 综合练习_r语言端午节的淘宝粽子交易数据分析-程序员宅基地

文章浏览阅读281次。joyful-pandas(下)学习笔记——第10章 综合练习一、端午节的淘宝粽子交易首先读取数据data_Zongzi = pd.read_csv('Pandas(下)综合练习数据集/端午粽子数据.csv')#记得之前jupyter对中文路径支持不太好,现在居然也可以直接用了data_Zongzidata_Zongzi.columns#注意 ' 价格'和'发货地址 '列名中有空格#其实可以直接把列名中的空格strip一下的,好蠢Index([‘标题’, ’ 价格’, ‘付款人数’,_r语言端午节的淘宝粽子交易数据分析

新西兰计算机设计专业,2020年出国新西兰学习计算机专业的要求是什么?-程序员宅基地

文章浏览阅读97次。计算机课程优势非常之多,毕业生的就业机会也广,其中包括信息系统管理经理,信息技术顾问,多媒体开发管理员,网络管理经理,研发人员,网站管理员等等。综合来看,计算机专业是新西兰留学专业选择的一大热门推荐,包括院校推荐、发展前景、工作机会等等,学习计算机是理科和男生的第一选择。网络安全网络安全是国际合作课题。课题:企业网络信息安全管理、云计算机开发、专门课题:网络安全、研究方法和专题论文。健康信息学新开..._新西兰 计算机大专

如果不做软件测试了,我们还可以转行做这些……_不做测试,转行做什么-程序员宅基地

文章浏览阅读1.3k次。中国互联网的发展历史并不长,所以,我们看不到大多数40、50岁的测试人员在做什么?_不做测试,转行做什么

推荐文章

热门文章

相关标签