欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Flutter瀑布流仿写原生的复用机制详解

程序员文章站 2022-03-24 08:33:34
目录问题二、ui布局代码分析。废话开篇:ios与android在实现列表界面的时候是有重用机制的,目的就是减少内存开销,用时间换空间。个人感觉flutter并没有特别强调复用,关于listview.b...

废话开篇:

ios与android在实现列表界面的时候是有重用机制的,目的就是减少内存开销,用时间换空间。个人感觉flutter并没有特别强调复用,关于listview.builder 的“复用”个人感觉应该是销毁跟重建的过程,所以这里用flutter实现了简单的复用机制。代码拙劣,大神勿喷,共同进步

先看复用效果

Flutter瀑布流仿写原生的复用机制详解

复用状态打印

Flutter瀑布流仿写原生的复用机制详解

右侧是简单实现瀑布流界面,里面显示的是一共有39个widget。左侧是控制台打印一共创建的12个widget,所以这里就简单的实现了widget复用。

问题一、实现思路是什么?

这里先简单的说一下实现思路。

  • 在渲染界面前,通过计算得出全部的widget的位置坐标。
  • 首次渲染创建一屏可视瀑布流widget.
  • 监听滑动,判断当前页面滚动方向展示的瀑布流widget,先去缓存池里拿,如果没有就直接创建,添加到组件中进行渲染。如果缓存池里有,修改widget的相对布局位置。

问题二、ui布局代码分析。

Flutter瀑布流仿写原生的复用机制详解

tip: waterfallflow.dart 瀑布流主页面;waterfallflowitem.dart 瀑布流单元item

效果展示:

Flutter瀑布流仿写原生的复用机制详解

waterfallflowitem.dart 瀑布流item文件

waterfallflow.dart 主界面文件

builder 实现

声明的属性

计算主窗口scrollview 高度

frame 位置信息类

生成瀑布流widget单元item

创建首屏全部可视瀑布流widget单元组件

滑动过程中进行重用渲染

滚动监听

基本上flutter的瀑布流复用逻辑就完成了,代码拙劣,里面有些地方需要优化,比如:快速滑动防护,item的内容渲染。flutter对于界面渲染已经很极致了,重写复用有点倒退的赶脚。大神勿喷,互相学习。

总结

到此这篇关于flutter瀑布流仿写原生的复用机制的文章就介绍到这了,更多相关flutter仿写复用机制内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!