Flutter -Listview 4个优化能让你的列表丝般顺滑

Posted 2023-03-17

参考技术A 优化点1：使用 builder构建列表
当你的列表元素是动态增长的时候（比如上拉加载更多），请不要直接用children 的方式，一直往children 的数组增加组件，那样会很糟糕。对于 ListView.builder 是按需构建列表元素，也就是只有那些可见得元素才会调用itemBuilder 构建元素，这样对于大列表而言性能开销自然会小很多。

优化点2：禁用 addAutomaticKeepAlives 和 addRepaintBoundaries 特性
这两个属性都是为了优化滚动过程中的用户体验的。
addAutomaticKeepAlives 特性默认是 true，意思是在列表元素不可见后可以保持元素的状态，从而在再次出现在屏幕的时候能够快速构建。这其实是一个拿空间换时间的方法，会造成一定程度得内存开销。可以设置为 false 关闭这一特性。缺点是滑动过快的时候可能会出现短暂的白屏（实际会很少发生）。
addRepaintBoundaries 是将列表元素使用一个重绘边界（Repaint Boundary）包裹，从而使得滚动的时候可以避免重绘。而如果列表很容易绘制（列表元素布局比较简单的情况下）的时候，可以关闭这个特性来提高滚动的流畅度。

优化点3：尽可能将列表元素中不变的组件使用 const 修饰
使用 const 相当于将元素缓存起来实现共用，若列表元素某些部分一直保持不变，那么可以使用 const 修饰。

优化点4：使用 itemExtent 确定列表元素滚动方向的尺寸
对于很多列表，我们在滚动方向上的尺寸是提前可以根据 UI设计稿知道的，如果能够知道的话，那么使用 itemExtent 属性制定列表元素在滚动方向的尺寸，可以提升性能。这是因为，如果不指定的话，在滚动过程中，会需要推算每个元素在滚动方向的尺寸从而消耗计算资源。

Flutter ListView 的4个优化要点，非常实用哦！实际上，这些要点都可以从官网的文档里找出对应得说明。因此，如果遇到了性能问题，除了搜索引擎外，也建议多看看官方的文档。