网络图片的缓存和压缩

为了结合使用 CachedNetworkImage 和 flutter_image_compress 插件，实现对网络图片的缓存和压缩，避免重复加载和减少内存占用，可以按照以下步骤进行：

1. 添加依赖

确保在 pubspec.yaml 文件中添加了以下依赖：

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.3.0
  flutter_image_compress: ^1.2.0

运行以下命令以安装依赖：

flutter pub get

2. 创建自定义图片组件

创建一个自定义图片组件，结合 CachedNetworkImage 和 flutter_image_compress 插件：

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_image_compress/flutter_image_compress.dart';

class OptimizedCachedNetworkImage extends StatelessWidget {
  final String imageUrl;
  final int quality;
  final int minWidth;
  final int minHeight;

  const OptimizedCachedNetworkImage({
    Key? key,
    required this.imageUrl,
    this.quality = 80,
    this.minWidth = 1024,
    this.minHeight = 1024,
  }) : super(key: key);

  Future<Uint8List?> _compressImage(Uint8List imageBytes) async {
    try {
      List<int>? compressedBytes = await FlutterImageCompress.compressWithList(
        imageBytes,
        quality: quality,
        autoCorrectionAngle: true,
        minWidth: minWidth,
        minHeight: minHeight,
      );
      return compressedBytes != null ? Uint8List.fromList(compressedBytes) : null;
    } catch (e) {
      print("图片压缩失败：$e");
      return null;
    }
  }

  @override
  Widget build(BuildContext context) {
    return CachedNetworkImage(
      imageUrl: imageUrl,
      imageBuilder: (context, imageProvider) {
        return FutureBuilder<Uint8List?>(
          future: _compressImage(imageProvider.resolve(ImageConfiguration()).toString()),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            } else if (snapshot.hasError || snapshot.data == null) {
              return const Icon(Icons.error);
            }
            return Image.memory(
              snapshot.data!,
              fit: BoxFit.cover,
            );
          },
        );
      },
      placeholder: (context, url) => const CircularProgressIndicator(),
      errorWidget: (context, url, error) => const Icon(Icons.error),
    );
  }
}

3. 使用示例

在需要显示图片的地方使用上面创建的组件：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('优化的网络图片加载'),
        ),
        body: Center(
          child: OptimizedCachedNetworkImage(
            imageUrl: 'https://example.com/image.jpg',
            quality: 80,
            minWidth: 800,
            minHeight: 600,
          ),
        ),
      ),
    );
  }
}

关键点说明

• 使用 CachedNetworkImage：确保图片被缓存，避免重复的网络请求和解码。
• 使用 flutter_image_compress：对下载的图片进行压缩，减少内存占用和提升显示效率。
• 结合两者的优势：通过 CachedNetworkImage 避免重复加载，通过 flutter_image_compress 减少内存占用，提高应用性能。