Flutter 长列表优化
Flutter 长列表优化
固定列表和长列表的区别
-
固定列表中的组件，每次都会被重新构建
-
ListView.builder会按需构建列表元素，也就是只有那些可见得元素才会调用itemBuilder 构建元素
减少列表项的构建次数
- addRepaintBoundaries ：将列表项用一个
RepaintBoundary(重绘边界)包裹，在滚动时避免重绘，如果页面比较简单则可以关闭提升流畅度。 - addAutomaticKeepAlives ：对于实际可见的子项，构建器只会调用一次，可以保持状态，如果关闭这个参数可以自己将组件封装到
AutomaticKeepAliveClientMixin中保持状态，这样下次列表的子项目滚动进入视野时，build方法就不会被调用。 并且不会丢失状态，可以大幅度减少重绘的消耗。
确定性设置
itemExtent可以确定每个列表项的尺寸，避免在绘制的过程中，计算每个列表项的尺寸，产生不必要的运算。在列表项的尺寸固定时可以指定itemExtentListView.itemExtentBuilder: 给每一个列表项设置尺寸
ListView.builder(
itemBuilder: (context, index) {
return const SizedBox();
},
itemExtentBuilder: (int index, SliverLayoutDimensions dimensions) {
if (index % 2 == 0) {
return 30;
} else {
return 90;
}
},
)
const constructor
const构造函数是一种优化技术，用于创建常量对象。常量对象是指在运行时无法改变的对象，通过使用const构造函数，可以避免在运行时创建新的对象，从而提高性能
cacheExtent的按需定义
cacheExtent属性用于设置列表中预缓存的像素数。默认情况下，cacheExtent的值为0{double? cacheExtent}，表示不预缓存任何内容。如果你希望在列表中预缓存一些内容，你可以将其设置为一个合适的值，例如1000.0。这可以提高列表的滚动性能，因为预缓存的像素数越多，滚动时加载的像素数就越少，从而减少了绘制和布局的次数。然而，需要注意的是，预缓存的像素数越多，内存占用越多，所以需要根据实际情况来确定预缓存。
避免使用较大内存的组件
注意在ListView中嵌入内存占用较大的组件，是永远不推荐的，比如较大的图片，这会占用大量内存，导致应用崩溃。或者Webview等PlatformView组件，滑动时也会这会占用大量内存。
避免布局变化
在列表滚动的时候，页面布局发生变化，或者不停更新列表项的尺寸，这是非常不明智的做法。布局变化，那么剩余空间的高度就得重新计算。
Performance overlay
MaterialApp中有showPerformanceOverlay的选项，在调试长列表时，一定要开启，并观测是否有重绘发生，或者掉帧的情况，针对掉帧或者渲染较慢的组件进行优化。开启showPerformanceOverlay是一个好习惯，就像你在web开发时，习惯打开devtool>console，观察页面的渲染情况的习惯，是一样的。
参考：https://www.jkkf.cn/flutter-optimization/component-list.html
