Flutter 列表图片缓存与加载优化实战

图片缓存

添加插件

pubspec.yaml

添加支持本地图片缓存插件

cached_network_image: ^2.5.0

封装缓存工具类

view_util.dart

获取本地图片缓存Widget CachedNetworkImage

Widget cacheImage(String url, {double width, double height}) {
  return CachedNetworkImage(
    imageUrl: url,
    width: width,
    height: height,
    // 占位
    placeholder: (
      BuildContext context,
      String url,
    ) =>
        Container(color: Colors.grey),
    // 加载出错
    errorWidget: (
      BuildContext context,
      String url,
      dynamic error,
    ) =>
        Icon(Icons.error),
  );
}

使用缓存工具类

cacheImage(owner.face, height: 24, width: 24)

列表加载优化

使用到列表的页面使用with AutomaticKeepAliveClientMixin 禁止页面重复加载数据

class _HomeTabPageState extends State<HomeTabPage>
    with AutomaticKeepAliveClientMixin {
      
      @override
  	  bool get wantKeepAlive => true;
}