Flutter瀑布流仿写原生的复用机制详解
程序员文章站
2022-03-24 08:33:34
目录问题二、ui布局代码分析。废话开篇:ios与android在实现列表界面的时候是有重用机制的,目的就是减少内存开销,用时间换空间。个人感觉flutter并没有特别强调复用,关于listview.b...
废话开篇:
ios与android在实现列表界面的时候是有重用机制的,目的就是减少内存开销,用时间换空间。个人感觉flutter并没有特别强调复用,关于listview.builder 的“复用”个人感觉应该是销毁跟重建的过程,所以这里用flutter实现了简单的复用机制。代码拙劣,大神勿喷,共同进步
先看复用效果
复用状态打印
右侧是简单实现瀑布流界面,里面显示的是一共有39个widget。左侧是控制台打印一共创建的12个widget,所以这里就简单的实现了widget复用。
问题一、实现思路是什么?
这里先简单的说一下实现思路。
- 在渲染界面前,通过计算得出全部的widget的位置坐标。
- 首次渲染创建一屏可视瀑布流widget.
- 监听滑动,判断当前页面滚动方向展示的瀑布流widget,先去缓存池里拿,如果没有就直接创建,添加到组件中进行渲染。如果缓存池里有,修改widget的相对布局位置。
问题二、ui布局代码分析。
tip: waterfallflow.dart 瀑布流主页面;waterfallflowitem.dart 瀑布流单元item
效果展示:
waterfallflowitem.dart 瀑布流item文件
waterfallflow.dart 主界面文件
builder 实现
声明的属性
计算主窗口scrollview 高度
frame 位置信息类
生成瀑布流widget单元item
创建首屏全部可视瀑布流widget单元组件
滑动过程中进行重用渲染
滚动监听
基本上flutter的瀑布流复用逻辑就完成了,代码拙劣,里面有些地方需要优化,比如:快速滑动防护,item的内容渲染。flutter对于界面渲染已经很极致了,重写复用有点倒退的赶脚。大神勿喷,互相学习。
总结
到此这篇关于flutter瀑布流仿写原生的复用机制的文章就介绍到这了,更多相关flutter仿写复用机制内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
上一篇: 确认你有收到第一条