网络图片的缓存和压缩

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

1. 添加依赖

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

yaml 复制代码
dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.3.0
  flutter_image_compress: ^1.2.0

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

bash 复制代码
flutter pub get

2. 创建自定义图片组件

创建一个自定义图片组件,结合 CachedNetworkImageflutter_image_compress 插件:

dart 复制代码
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. 使用示例

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

dart 复制代码
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 减少内存占用,提高应用性能。
相关推荐
RaidenLiu2 小时前
RepaintBoundary是什么?怎么用?
flutter
淹没5 小时前
🚀 告别复杂的HTTP模拟!HttpHook让Dart应用测试变得超简单
android·flutter·dart
吴Wu涛涛涛涛涛Tao10 小时前
Flutter 个人主页实践笔记
flutter
愿天深海10 小时前
Flutter 提取图像主色调 ColorScheme.fromImageProvider
android·前端·flutter
梦想改变生活1 天前
《Flutter篇第一章》基于GetX 和 Binding、Dio 实现的 Flutter UI 架构
flutter·ui·架构
耳東陈1 天前
[重磅发布] Flutter Chen Generator 必备脚本工具
flutter
亿刀1 天前
【学习VPN之路】NET技术
android·flutter
浅蓝色1 天前
Flutter平台判断问题,并适配鸿蒙
flutter
RaidenLiu1 天前
Skia与Impeller的对比测试
flutter