【Flutter】列表流畅性优化

前言

在日常APP的开发中，列表是使用频率最高的，这里讲述在Flutter中优化列表的滑动速度与流畅度，以来提高用户的体验。

方案

1、使用ListView.builder代替ListView

ListView.builder在创建列表的时候要比ListView更高效，因为ListView.builder只在需要的时候创建那些可见的列表。

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('ZFJ index = $index'),
    );
  },
);

2、使用const修饰符

在构建列表的时候尽量用const修饰符来创建不变的控件，这样可以减少控件的重复创建，从来提高性能。

return const ListTile(
  title: Text('ZFJ index = $index'),
);

3、避免使用复杂的布局

简化列表的布局，尽量减少嵌套重量级的部件，比如Container或者Column，使用轻量级的部件，比如Text、Padding、SizedBox等等。

👉👉👉什么是轻量级部件？👈👈👈

在 Flutter 中，轻量级是个相对概念，轻量级的部件是那些尽量减少计算和绘制开销的组件。它们对性能影响较小，适合在性能敏感的场景中使用，如列表项、频繁重建的视图等。以下是一些常见的轻量级部件：

Container：

简单的容器组件，用于布局、背景颜色、边框等。比 DecoratedBox 更轻量。

Text：

用于显示文本，是非常轻量级的组件。避免过多的 Text.rich，因为它会增加计算开销。

Padding：

用于添加内边距的轻量级组件。比直接在 Container 中设置 padding 更高效。

Align：

用于对齐子组件的轻量级组件。比使用 Center 或 Padding+Align 组合更高效。

SizedBox：

用于设置固定尺寸的轻量级组件。比在 Container 中设置 width 和 height 更高效。

Icon：

用于显示图标的轻量级组件。尽量避免使用过多自定义绘制的图标。

ClipRRect：

用于裁剪圆角矩形的轻量级组件。比使用 Container+BoxDecoration 更高效。

Opacity：

用于设置透明度的轻量级组件。比使用复杂的 DecoratedBox 透明度设置更高效。

Flexible 和 Expanded：

用于在 Row 和 Column 中调整子组件大小的轻量级组件。比直接在 Container 中设置 width 和 height 更高效。

4、使用CacheExtent

通过设置 cacheExtent 属性，可以增加预加载的区域大小，从而减少滑动时的卡顿现象。

ListView.builder(
  itemCount: 100,
  cacheExtent: 300, // 默认值是 250.0，单位是像素
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
);

5、使用Image的缓存功能

如果列表项中包含图片，可以使用 CachedNetworkImage 等库来缓存图片，避免每次滑动时重新加载图片。

import 'package:cached_network_image/cached_network_image.dart';

ListTile(
  leading: CachedNetworkImage(
    imageUrl: 'https://zfjsafe.com/images/ZFJObsLib.png',
    placeholder: (context, url) => CircularProgressIndicator(),
    errorWidget: (context, url, error) => Icon(Icons.error),
  ),
  title: Text('ZFJ Index = $index'),
);

6、避免不必要的重绘

确保只有需要更新的部分进行重绘，可以使用 StatefulWidget 和 setState 来实现局部刷新，而不是重建整个列表。

7、使用 AutomaticKeepAliveClientMixin

如果需要保留列表项的状态，可以使用 AutomaticKeepAliveClientMixin 来保留列表项的状态，而不是每次滑动时都重新构建。

class ZFJListItem extends StatefulWidget {
  @override
  _ZFJListItemState createState() => _ZFJListItemState();
}

class _ZFJListItemState extends State<ZFJListItem> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListTile(
      title: Text('ZFJ'),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

8、使用ReorderableListView

如果需要支持拖拽排序，可以使用 ReorderableListView，这种组件在处理大量数据时更加高效。

ReorderableListView(
  onReorder: (oldIndex, newIndex) {
    setState(() {
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      final item = _items.removeAt(oldIndex);
      _items.insert(newIndex, item);
    });
  },
  children: _items.map((item) {
    return ListTile(
      key: ValueKey(item),
      title: Text(item),
    );
  }).toList(),
);