Flutter 长列表优化

Flutter 长列表优化

固定列表和长列表的区别

• 固定列表中的组件，每次都会被重新构建

• ListView.builder会按需构建列表元素，也就是只有那些可见得元素才会调用itemBuilder 构建元素

减少列表项的构建次数

• addRepaintBoundaries ：将列表项用一个RepaintBoundary(重绘边界)包裹，在滚动时避免重绘，如果页面比较简单则可以关闭提升流畅度。
• addAutomaticKeepAlives ：对于实际可见的子项，构建器只会调用一次，可以保持状态，如果关闭这个参数可以自己将组件封装到AutomaticKeepAliveClientMixin中保持状态，这样下次列表的子项目滚动进入视野时，build方法就不会被调用。 并且不会丢失状态，可以大幅度减少重绘的消耗。

确定性设置

• itemExtent可以确定每个列表项的尺寸，避免在绘制的过程中，计算每个列表项的尺寸，产生不必要的运算。在列表项的尺寸固定时可以指定 itemExtent
• ListView.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