Flutter图片缓存插件paulonia_cache_image的使用

Flutter图片缓存插件paulonia_cache_image的使用

Paulonia Cache Image 是一个用于下载和存储图片到缓存的Flutter插件。它支持Android、iOS和Web平台上的内存缓存和存储缓存，并且可以处理网络图片和Google Cloud Storage图片。

使用

要使用此插件，首先需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  paulonia_cache_image: ^版本号

然后，在你的 main() 函数中初始化插件：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PCacheImage.init();
  runApp(MyApp());
}

在 init() 函数中，你可以设置 PCacheImage 的默认属性。例如，你可以更改所有 PCacheImage 小部件的值。

Paulonia cache image 扩展了 ImageProvider，因此你可以直接使用URL来加载图片。默认情况下，图片会被缓存到平台存储中：

Image(
  image: PCacheImage('https://i.imgur.com/jhRBVEp.jpg')
);

Image(
  image: PCacheImage(
    'gs://flutter-template-44674.appspot.com/images/user/0ooAw4dX5AeGhkH1JYkoWcdwvc72_big.jpg',
  )
);

内存缓存

默认的图像缓存存储在平台存储中有一个问题：当你调用 setState() 时，插件会从存储中读取并重新获取图片，这会导致图片闪烁。通过启用内存缓存，可以加快这一过程，并且不会出现闪烁。你可以在 PCacheImage 中启用内存缓存：

Image(
  image: PCacheImage('https://i.imgur.com/jhRBVEp.jpg', enableInMemory: true)
);

你也可以在 init() 函数中为所有 PCacheImage 小部件启用内存缓存：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PCacheImage.init(enableInMemory: true);
  runApp(MyApp());
}

但是，这种做法可能会增加内存使用量。我们建议仅在运行 setState() 的小部件中使用内存缓存以消除闪烁。为了避免内存无限制增长，你可以设置内存中最多可存储的图片数量：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PCacheImage.init(enableInMemory: true, maxInMemoryImages: 5);
  runApp(MyApp());
}

这个功能的工作原理类似于队列，当需要保存一张新图片时，最旧的一张图片将被删除。

清除整个缓存

有时你可能希望清除整个缓存，例如为了重建缓存。你可以通过以下方法清空缓存：

await PCacheImage.clearAllCacheImages();

CORS 在 Web 上

在Web上，当你尝试请求和下载图片时，可能会遇到CORS错误。根据图片类型，有相应的解决方案：

Google Storage 图片

你需要在你的桶中启用CORS配置：

参考

#### 网络图片

你可以在 `init()` 函数中设置代理：

```dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PCacheImage.init(proxy: "https://cors-anywhere.herokuapp.com/");
  runApp(MyApp());
}

proxy 属性仅在网络图片中使用，例如：“https://cors-anywhere.herokuapp.com/http://image.jpg”。

属性

PCacheImage 有以下属性：

作者

这个插件由 ChrisChV 开发，并在所有Paulonia项目中使用。

完整示例代码

以下是完整的示例代码，展示了如何使用 paulonia_cache_image 插件：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PCacheImage.init();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Paulonia Cache Image',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Paulonia Cache Image'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({required this.title, super.key});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          widget.title,
          style: const TextStyle(color: Colors.black),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.white,
        onPressed: () {
          setState(() {});
        },
        child: const Icon(
          Icons.refresh,
          color: Colors.black,
        ),
      ),
      body: ListView(
        children: [
          const ListTile(
            title: Text('In memory cached network image'),
          ),
          SizedBox(
            height: 250,
            child: Card(
              elevation: 10,
              child: Image(
                image: PCacheImage(
                  'https://i.imgur.com/jhRBVEp.jpg',
                  enableInMemory: true,
                ),
              ),
            ),
          ),
          const ListTile(
            title: Text('Storage cached network image'),
          ),
          SizedBox(
            height: 250,
            child: Card(
              elevation: 10,
              child: Image(
                image: PCacheImage(
                  'https://i.imgur.com/5RhnXjE.jpg',
                ),
              ),
            ),
          ),
          const ListTile(
            title: Text('Not cached image'),
          ),
          SizedBox(
            height: 250,
            child: Card(
              elevation: 10,
              child: Image(
                image: PCacheImage(
                  'https://i.imgur.com/inAkwKw.jpg',
                  enableCache: false,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}