面试题：如何在Flutter中实现图片渐进式加载并优化内存占用

图片资源获取

选择合适的图片格式：对于渐进式加载，JPEG格式是较为常用的，因为它本身支持渐进式显示。在准备图片资源时，确保图片以JPEG格式提供，并且在导出图片时选择支持渐进式的选项（大多数图片编辑工具都有此功能）。
资源存储与组织：将图片资源按照应用的需求合理组织在项目的assets目录下。在pubspec.yaml文件中正确配置图片资源路径，例如：

flutter:
  assets:
    - assets/images/

加载流程

使用Image.network并配置loadingBuilder：在Flutter中加载网络图片时，使用Image.network widget。通过loadingBuilder属性可以自定义加载过程。例如：

Image.network(
  'https://example.com/image.jpg',
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
          ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
          : null,
      ),
    );
  },
)

这样可以在图片渐进式加载过程中显示一个加载指示器。对于本地图片，也可以类似地使用Image.asset并结合loadingBuilder。 2. 设置cacheHeight和cacheWidth：为了优化内存占用，根据图片在UI中显示的实际大小，设置cacheHeight和cacheWidth属性。例如：

Image.network(
  'https://example.com/image.jpg',
  cacheHeight: 200,
  cacheWidth: 200,
)

这会告诉Flutter只缓存指定尺寸的图片，避免缓存过大尺寸图片导致内存浪费。

内存管理

及时释放不再使用的图片资源：Flutter会自动管理图片缓存，但在某些复杂场景下，比如页面频繁切换导致大量图片加载时，可能需要手动干预。可以使用ImageCache类来管理图片缓存。例如，在页面销毁时，可以清除相关的图片缓存：

@override
void dispose() {
  ImageCache().clear();
  super.dispose();
}

使用FadeInImage进行占位图加载：在图片加载过程中，使用FadeInImage可以先显示一个占位图，直到实际图片渐进式加载完成后淡入显示。这不仅提升了用户体验，还可以在一定程度上优化内存占用，因为占位图通常尺寸较小。例如：

FadeInImage.assetNetwork(
  placeholder: 'assets/images/placeholder.jpg',
  image: 'https://example.com/image.jpg',
)

限制同时加载的图片数量：在列表等场景中，如果有大量图片需要加载，可以通过控制同时加载的图片数量来优化内存。可以使用ListView.builder结合PageStorageKey等机制，确保只加载当前屏幕可见及临近的图片，避免一次性加载过多图片导致内存飙升。

星途面试题库

面试题：如何在Flutter中实现图片渐进式加载并优化内存占用

知识考点

面试题答案

图片资源获取

加载流程

内存管理