Flutter图片缓存与网络加载插件morpheme_cached_network_image的使用

morpheme_cached_network_image 是一个用于显示网络图片并将其保存在缓存目录中的Flutter库，支持Objectbox进行数据管理。本文将介绍如何使用该插件。

如何使用

初始化

首先，在应用启动时初始化 MorphemeCachedNetworkImageManager：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await MorphemeCachedNetworkImageManager.instance.init();

  runApp(const MyApp());
}

显示带加载动画的图片

你可以直接使用 MorphemeCachedNetworkImage 来显示图片，并设置加载和错误处理的回调函数：

MorphemeCachedNetworkImage(
  imageUrl: 'https://picsum.photos/id/2/200',
  loadingBuilder: (context) => const CircularProgressIndicator(),
  errorBuilder: (context, error, stackTrace) => const Icon(Icons.error),
);

使用 ImageProvider

你也可以通过 ImageProvider 来加载图片：

Image(image: MorphemeCachedNetworkImageProvider('https://picsum.photos/id/2/200'))

设置背景图片

当需要将图片作为背景时，可以使用 Container 和 DecorationImage：

Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
        image: DecorationImage(
            image: MorphemeCachedNetworkImageProvider(
            'https://picsum.photos/id/2/200',
            ),
        ),
    ),
)

完整示例代码

以下是一个完整的示例，展示了如何在一个网格视图中显示1000张不同的图片：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:morpheme_cached_network_image/morpheme_cached_network_image.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  debugInvertOversizedImages = kDebugMode;

  await MorphemeCachedNetworkImageManager.instance.init();

  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Morpheme Cached Network Image Example'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: GridView.count(
        crossAxisCount: 4,
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
        children: [
          for (var i = 0; i < 1000; i++)
            MorphemeCachedNetworkImage(
              imageUrl: 'https://picsum.photos/id/$i/1000/1000',
              width: double.infinity,
              height: double.infinity,
              fit: BoxFit.cover,
            ),
        ],
      ),
    );
  }
}