Flutter图片可见性与缓存插件visibility_cached_image的使用

visibility_cached_image 是一个功能强大且高效的 Flutter 包，它使用先进的内存管理技术处理网络和资源图像加载。此包优化了加载过程，减少了内存使用，并通过使用懒加载、请求队列系统优先处理图像请求以及使用Hive进行缓存等技术确保了流畅的用户体验。

借助此包，您可以从资源或网络加载图像，在小部件中显示它们，并受益于更智能的内存和性能管理。非常适合在具有长列表或需要优化的动态图像加载的应用程序中使用。

特性

• 网络和资源图像加载：无缝处理网络和资源图像。
• 高效内存管理：使用懒加载（LRU，最近最少使用）和智能缓存策略来减少内存使用并提高应用程序性能。
• 图像队列系统：以优先级顺序加载图像，以防止不必要的加载延迟，优化用户体验。
• Hive集成：使用Hive本地缓存图像，减少重复的网络请求并增加应用程序响应速度。
• 自定义加载和错误处理：完全可定制的加载和错误状态，带有 loadingBuilder 和 errorBuilder 选项。
• 基于可见性的图像加载：仅在图像出现在屏幕上时才加载图像，减少不必要的网络请求和内存消耗。

开始使用

要使用此包，请将 <code>visibility_cached_image</code> 添加到您的 <code>pubspec.yaml</code> 文件：

dependencies:
  visibility_cached_image: ^x.x.x

运行以下命令：

flutter pub get

使用方法

导入包

import 'package:visibility_cached_image/visibility_cached_image.dart';

// 初始化包，可以在 main.dart 中执行，这将初始化本地存储
await VisibilityCacheImageConfig.init();

基本用法

以下是如何在您的 Flutter 应用程序中使用 <code>VisibilityCachedImage</code> 小部件的基本示例：

VisibilityCachedImage(
  imageUrl: 'https://example.com/image.jpg', // 图像的 URL
  loadingBuilder: (context, progress) => Center(
    child: CircularProgressIndicator(value: progress), // 加载进度指示器
  ),
  errorBuilder: (context, error, stackTrace) => Center(
    child: Text('Failed to load image'), // 错误提示
  ),
  width: 300, // 图像宽度
  height: 300, // 图像高度
  fit: BoxFit.cover, // 图像填充方式
)

从资源加载图像

您还可以使用此包从应用程序的资源中加载图像。

VisibilityCachedImage(
  assetPath: 'assets/images/local_image.png', // 资源路径
  loadingBuilder: (context, progress) => Center(
    child: CircularProgressIndicator(value: progress), // 加载进度指示器
  ),
  errorBuilder: (context, error, stackTrace) => Center(
    child: Text('Failed to load image'), // 错误提示
  ),
  width: 300, // 图像宽度
  height: 300, // 图像高度
  fit: BoxFit.cover, // 图像填充方式
)

性能考虑事项

内存管理

该包使用懒加载和图像缓存大小管理来优化内存使用。它确保在任何给定时间只保留所需的图像。

网络请求

通过使用带有请求队列的Dio，确保网络请求被高效且按优先级处理。如果图像已经缓存，则不会发出网络请求，从而减少加载时间和不必要的网络流量。

本地缓存

使用Hive进行持久化本地图像缓存意味着一旦加载了图像，下次启动应用程序时就不需要重新下载。

完整示例代码

以下是完整的示例代码，展示了如何使用 VisibilityCachedImage 在您的 Flutter 应用程序中加载网络和资源图像。

import 'package:flutter/material.dart';
import 'package:visibility_cached_image/visibility_cached_image.dart';

Future<void> main() async {
  await VisibilityCacheImageConfig.init(maxMemoryCacheEntries: 100);
  runApp(MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Visibility Cached Image Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    return SafeArea(
      bottom: true,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Visibility Cached Image Example'),
        ),
        body: ListView(
          physics: NeverScrollableScrollPhysics(),
          padding: const EdgeInsets.all(8),
          children: [
            // 资源图像部分
            Text(
              'Asset Image:',
              style: Theme.of(context).textTheme.headlineLarge,
            ),
            const SizedBox(height: 16),
            // 示例资源图像
            VisibilityCachedImage(
              assetPath: 'assets/image.jpg',
              width: double.infinity,
              height: 200,
              fit: BoxFit.cover,
              loadingBuilder: (context, progress) {
                return Center(
                  child: Container(
                    color: Colors.grey.shade200,
                  ),
                );
              },
              errorBuilder: (context, error, stackTrace) {
                return Center(
                  child: Icon(
                    Icons.error,
                    color: Colors.red,
                  ),
                );
              },
            ),
            const SizedBox(height: 16),
            // 网络图像部分
            Text(
              'Network Images:',
              style: Theme.of(context).textTheme.headlineLarge,
            ),
            const SizedBox(height: 16),
            // 网格视图用于网络图像
            SizedBox(
              height: height,
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  mainAxisSpacing: 8,
                  crossAxisSpacing: 8,
                ),
                itemCount: 1000, // 设置网格项的数量
                itemBuilder: (context, index) => VisibilityCachedImage(
                  imageUrl: 'https://picsum.photos/seed/$index/200/300',
                  width: double.infinity,
                  height: 200,
                  cacheHeight: 200,
                  cacheWidth: 300,
                  fit: BoxFit.cover,
                  loadingBuilder: (context, progress) {
                    return Center(
                      child: Container(
                        color: Colors.grey.shade200,
                      ),
                    );
                  },
                  errorBuilder: (context, error, stackTrace) {
                    return Center(
                      child: Icon(
                        Icons.error,
                        color: Colors.red,
                      ),
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}