欢迎光临散文网 会员登陆 & 注册

跨平台应用Flutter 列表 ListView 局部刷新数据

2020-10-23 08:24 作者:早起的年轻人  | 我要投稿

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。

Flutter是谷歌推出的最新的移动开发框架。

本文章实现的是 ListView 中 Item 局部数据刷新的效果,如下图所示。

在这只是一个 Demo ,是一个实现思路,在应用开发的更多场景中如 资讯列表的点赞、收藏等等,诸多业务场景都可使用。

1 Demo 实现

首先是这里使用列表使用到的数据模型定义如下:

然后就是 ListView 实现的主页面,定义如下:

每个子 Item 的UI布局及功能封装成了一个 独立的 StatefulWidget,代码如下:

2 原理分析

很多个为什么,咱们一一来分析,大家如果有疑问或者不同的看法,可以回复评论,一起优化

2.1 实现的真的是局部刷新吗 ?

答案为 是的,在这里模拟了100条数据,但是这里使用的是懒加载模式构建的,所以实际绘制出来的 Item 并不是 100 条,如下图所示:

滑动时,滑出屏幕外的,超出ListView缓存区域的就会被销毁,在本 Demo 本测试模拟器中,ListView中始终是绘制的 16 个子 Item。

ListView 每一个子 Item 都是一个独立的 StatefulWidget ,都对应的是一个 独立的 State ,所以调用 setState方法来刷新只是刷新了当前的 StatefulWidget 内容区域,当然从源码角度也有另外的解读,这里不去说源码。

当然在实际业务场景中,你的 ListView 中的 Item的UI布局功能可能足够的复杂,不用担心 ,你也可以采用这种思路 ,把每个 Item 中的 部分 Widget 再次封装到不同的StatefulWidget 中,这样也能实现ListView 中一个Item中不同的Widget 刷新不同的区域。

当然 也可以在 ListView 的Item 中使用 Stream 、Provider 、BloC等等,小编这里也有说明点击查看

2.2 状态如何保存的 ???

通过数据模型来保存的状态,因为在这里使用的是根据 TestBean 中 isCollect 的值来构建不同的样式的,List中保存的 TestBean 的标识不同,构建的子Item的样式不同。

2.3 List 中的数据是如何更新的 ???

还是这一句更新的:

在这一步修改数据,看下图你就明白了

ListView 的子Item 中(TestListItemWidget)使用的数据模型在内存区域中还是在 TestListPartPage 这里创建的 _testList 集合中保存的对象实体,整个过程中只是通过指针索引来绑定数据,修改数据实际上修改的还是同一块内存区域中的数据。

完毕


跨平台应用Flutter 列表 ListView 局部刷新数据的评论 (共 条)

分享到微博请遵守国家法律