滚动时MessageBubble组件图片重复加载问题求非本地缓存方案

问题描述 #

我正在开发一款即时通讯App，通过后端接口在移动端前端获取并展示消息。展示图片时，使用showImage函数从数据库获取图片路径、拉取图片字节，再通过_displayImage函数展示，并在MessageBubble组件的setState中更新UI。

当前遇到的问题：滚动消息列表时，已加载的图片滚出视野后再次滚入，会重新从后端拉取而未保留在内存或缓存中，现寻求除本地存储缓存外的解决方案。

相关代码：

class MessageBubble extends StatefulWidget {
  final Map<String, dynamic> message;
  final bool isMe;
  final Function(dynamic, int) function;
  final int messageIndex;

  const MessageBubble({
    super.key,
    required this.message,
    required this.isMe,
    required this.function,
    required this.messageIndex,
  });

  @override
  State<MessageBubble> createState() => _MessageBubbleState();
}

class _MessageBubbleState extends State<MessageBubble> {
  Uint8List? imageBytes;

  Future<void> _displayImage() async {
    if ((widget.message["files"] ?? []).isNotEmpty) {
      if (((widget.message["files"][0]["content"]["text"] ?? "")
                  .split(".")
                  .last ==
              "jpg") ||
          ((widget.message["files"][0]["content"]["text"] ?? "")
                  .split(".")
                  .last ==
              "png")) {
        var result = await ApiProvider().showImage(
            widget.message["files"][0]["content"]["location"], context);
        if (mounted) {
          setState(() {
            imageBytes = result as Uint8List?;
          });
        }
      }
    }
  }

  @override
  initState() {
    _displayImage();

    super.initState();
  }

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

拉取图片接口代码：

Future<List<dynamic>?>? showImage(String imagePath,BuildContext context) async {
    try{
      final request = await http.post(
          Uri.parse("https://api...."),
          headers: {
            'Content-Type': 'application/json;charset=utf-8',
            'Authorization': 'Bearer $token'
          },
          body: jsonEncode({"path": imagePath}));
      if(request.statusCode==200){
        Uint8List body = request.bodyBytes;
        return body;
      }
    }catch(e){
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('Error displaying image: $e'),
          backgroundColor: Colors.red,
        ),
      );
    }
  }

非本地存储的解决方案 #

1. 全局内存缓存容器 #

创建全局的内存缓存映射，存储图片路径与对应字节数据的关联，确保图片仅加载一次：

// 可放在单独工具类中作为全局缓存
final Map<String, Uint8List> _imageMemoryCache = {};

// 修改_displayImage方法
Future<void> _displayImage() async {
  if ((widget.message["files"] ?? []).isEmpty) return;
  
  final file = widget.message["files"][0];
  final fileName = file["content"]["text"] ?? "";
  final imagePath = file["content"]["location"];

  // 优先读取缓存
  if (_imageMemoryCache.containsKey(imagePath)) {
    if (mounted) {
      setState(() {
        imageBytes = _imageMemoryCache[imagePath];
      });
    }
    return;
  }

  // 统一小写判断格式，避免大小写问题
  final ext = fileName.split(".").last.toLowerCase();
  if (!{"jpg", "png"}.contains(ext)) return;

  var result = await ApiProvider().showImage(imagePath, context);
  if (result != null && mounted) {
    final bytes = result as Uint8List;
    setState(() {
      imageBytes = bytes;
    });
    // 存入缓存
    _imageMemoryCache[imagePath] = bytes;
  }
}

2. 利用Flutter内置ImageCache #

Flutter框架自带ImageCache，使用MemoryImage展示图片时会自动处理缓存，无需手动管理：

// 在MessageBubble的build方法中替换图片展示逻辑
if (imageBytes != null) {
  return Image.memory(
    imageBytes!,
    cacheWidth: 200, // 可选：限制缓存图片尺寸，降低内存占用
    cacheHeight: 200,
  );
}

可通过以下代码调整缓存上限：

PaintingBinding.instance.imageCache.maximumSize = 100; // 设置缓存最大数量
PaintingBinding.instance.imageCache.maximumSizeBytes = 1024 * 1024 * 50; // 设置缓存最大字节数（50MB）

3. 保持组件状态避免重建 #

使用AutomaticKeepAliveClientMixin让MessageBubble组件滚出视野后仍保留状态，避免重新加载：

class _MessageBubbleState extends State<MessageBubble> with AutomaticKeepAliveClientMixin {
  Uint8List? imageBytes;

  @override
  bool get wantKeepAlive => true; // 开启状态保持

  // ... 原有代码不变

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用super.build
    // 你的组件构建逻辑
  }
}

注意：该方式会增加内存占用，适合消息数量较少的场景。

代码优化建议 #

• 格式判断简化：用集合替代多条件判断，统一处理大小写：

  final allowedExts = {"jpg", "png"};
  final ext = fileName.split(".").last.toLowerCase();
  if (!allowedExts.contains(ext)) return;
  

• ApiProvider单例化：避免每次请求创建新实例，优化资源占用：

  class ApiProvider {
    static final ApiProvider _instance = ApiProvider._internal();
    factory ApiProvider() => _instance;
    ApiProvider._internal();
  
    // ... showImage方法
  }
  

• 错误状态UI优化：图片加载失败时显示占位图标，提升用户体验：

  // build方法中
  if (imageBytes == null) {
    return const Icon(Icons.image_not_supported, color: Colors.grey);
  }
  

• 类型安全优化：将动态Map转为实体类，减少空判断和类型转换风险：

  class Message {
    final List<MessageFile> files;
    // 其他字段
    Message({required this.files});
    factory Message.fromJson(Map<String, dynamic> json) {
      // 解析逻辑
    }
  }
  
  class MessageFile {
    final String location;
    final String fileName;
    MessageFile({required this.location, required this.fileName});
    factory MessageFile.fromJson(Map<String, dynamic> json) {
      return MessageFile(
        location: json["content"]["location"],
        fileName: json["content"]["text"],
      );
    }
  }
  

内容的提问来源于stack exchange，提问作者Farouk Ladjimi