MAUI：产品目录APP图片下载与本地缓存方案咨询

一、产品目录数据本地缓存 #

• 首次请求接口获取JSON数据后，将数据序列化（转成JSON字符串）存储到本地持久化介质：
  • 轻量数据：用SharedPreferences（Android）、UserDefaults（iOS）或MMKV（跨平台高性能存储）
  • 结构化/大量数据：用SQLite、Realm或Room（Android）、Core Data（iOS），方便后续查询和增量更新
• APP启动时优先读取本地缓存数据展示，同时后台静默发起网络请求更新数据；无网络时直接复用本地缓存内容。

二、图片按需加载与本地缓存实现 #

核心逻辑是先查本地缓存，无缓存再下载并保存，既避免预下载拖慢首次渲染，又能实现离线复用。

1. 自定义实现思路（适合高度定制场景） #

• 生成唯一缓存键：对图片URL进行MD5/SHA1哈希，生成唯一文件名，避免URL中特殊字符导致的存储异常
• 缓存检查流程：
  1. 加载图片时，先检查应用私有缓存目录中是否存在对应哈希文件名的图片
  2. 存在则直接读取本地文件显示；不存在则发起网络请求下载
  3. 下载完成后将图片写入本地缓存目录，再更新UI显示
• 并发控制：用全局映射表标记正在下载的URL，避免同一图片被多次重复下载
• 缓存清理：定期清理过期缓存或超出大小限制的缓存，可通过监听磁盘空间或设置缓存有效期实现

2. 跨平台Flutter自定义实现示例 #

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:crypto/crypto.dart';
import 'dart:convert';

class CachedProductImage extends StatefulWidget {
  final String imageUrl;
  final double? width;
  final double? height;
  final Widget? placeholder;
  final Widget? errorWidget;

  const CachedProductImage({
    super.key,
    required this.imageUrl,
    this.width,
    this.height,
    this.placeholder,
    this.errorWidget,
  });

  @override
  State<CachedProductImage> createState() => _CachedProductImageState();
}

class _CachedProductImageState extends State<CachedProductImage> {
  File? _localImage;
  bool _isLoading = true;
  static final Map<String, Future<void>> _downloadTasks = {};

  @override
  void initState() {
    super.initState();
    _loadImage();
  }

  Future<void> _loadImage() async {
    final imageHash = md5.convert(utf8.encode(widget.imageUrl)).toString();
    final cacheDir = await getTemporaryDirectory();
    final imagePath = '${cacheDir.path}/$imageHash.png';
    final localFile = File(imagePath);

    // 检查本地缓存
    if (await localFile.exists()) {
      setState(() {
        _localImage = localFile;
        _isLoading = false;
      });
      return;
    }

    // 避免重复下载
    if (_downloadTasks.containsKey(widget.imageUrl)) {
      await _downloadTasks[widget.imageUrl];
      setState(() {
        _localImage = localFile;
        _isLoading = false;
      });
      return;
    }

    // 发起下载
    final downloadTask = _downloadImage(widget.imageUrl, imagePath);
    _downloadTasks[widget.imageUrl] = downloadTask;
    try {
      await downloadTask;
      setState(() {
        _localImage = localFile;
        _isLoading = false;
      });
    } catch (_) {
      setState(() => _isLoading = false);
    } finally {
      _downloadTasks.remove(widget.imageUrl);
    }
  }

  Future<void> _downloadImage(String url, String savePath) async {
    final client = HttpClient();
    final request = await client.getUrl(Uri.parse(url));
    final response = await request.close();
    if (response.statusCode == 200) {
      final bytes = await response.toBytes();
      await File(savePath).writeAsBytes(bytes);
    } else {
      throw Exception('Image download failed with code: ${response.statusCode}');
    }
    client.close();
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return widget.placeholder ?? const CircularProgressIndicator();
    }
    return _localImage != null
        ? Image.file(
            _localImage!,
            width: widget.width,
            height: widget.height,
            fit: BoxFit.cover,
          )
        : widget.errorWidget ?? const Icon(Icons.broken_image);
  }
}

3. 借助成熟图片加载库（快速实现，推荐） #

大部分移动端图片加载库都内置了按需缓存功能，无需手动实现复杂逻辑：

• Android：Glide/Picasso，默认会缓存图片到本地，可配置缓存大小、有效期等
• iOS：Kingfisher，支持磁盘和内存双缓存，可自定义缓存策略
• Flutter：cached_network_image库，直接实现图片网络加载+本地缓存，示例代码：

import 'package:cached_network_image/cached_network_image.dart';

// 使用示例
CachedNetworkImage(
  imageUrl: 'https://your-domain.com/product-image.jpg',
  placeholder: (context, url) => const CircularProgressIndicator(),
  errorWidget: (context, url, error) => const Icon(Icons.error),
  fit: BoxFit.cover,
  // 自定义缓存配置
  cacheManager: DefaultCacheManager(
    Config(
      'productImageCache',
      maxNrOfCacheObjects: 200,
      stalePeriod: const Duration(days: 7),
    ),
  ),
)

三、额外优化建议 #

• 内存缓存：在磁盘缓存基础上增加内存缓存（比如LruCache），减少磁盘IO，提升图片加载速度
• 缓存失效策略：可在产品数据中加入图片版本号，当版本更新时自动清理旧缓存并重新下载
• 权限处理：如果存储到公共目录，需申请对应存储权限；使用应用私有目录则无需权限（推荐）

内容的提问来源于stack exchange，提问作者Safin Ahmed