FlutterFlutter 图片缓存入门cached_network_image 解决图片加载的问题

一、前言

在这里，我们将一起探讨 Flutter 中的一个非常实用的库——cached_network_image。如果你是一位 Flutter 开发者，那么你可能已经知道在开发过程中，我们经常需要从网络上加载图片。然而，每次都从网络上加载图片不仅会消耗大量的网络流量，而且如果网络状况不好，还可能导致图片加载失败或者加载速度很慢，这对于用户体验来说是非常不友好的。那么，有没有一种方法可以解决这个问题呢？答案就是使用图片缓存。

图片缓存的原理是，当我们第一次从网络上加载一张图片时，我们将这张图片保存在本地。然后，当我们再次需要这张图片时，我们就可以直接从本地加载，而不需要再次从网络上下载。这样不仅可以节省网络流量，而且可以大大提高图片的加载速度，从而提高用户体验。

在 Flutter 中，我们可以使用 cached_network_image 这个库来实现图片缓存。在这篇博客中，我们将一起学习如何使用这个库，以及这个库的一些基础功能。如果你是一位 Flutter 初学者，或者你还不熟悉 cached_network_image，那么这篇博客将会是一个很好的入门指南。

🎉想要精通 Flutter，掌握更多技巧和最佳实践？好消息来了！👉 Flutter专栏->Flutter Developer 101 入门小册 正在等你！📚

🔍这里有你需要的所有 Flutter 学习资源，包括代码示例和深度解析。🎯

⏰专栏内容持续更新，价格也会随之上涨。现在加入，享受最优惠的价格！💰

🚀现在，让我们开始今天的 Flutter 之旅吧！🌍

二、版本信息

在我们开始之前，我想先和你确认一下我们将要使用的 cached_network_image 的版本号。在这篇博客中，我们将使用的是 cached_network_image 3.2.3 这个版本。这个版本在 7 个月前发布，是一个与 Dart 3 兼容的版本，可以在 Android、iOS 和 MacOS 平台上使用。

为什么要特别提到版本号呢？这是因为在软件开发中，不同版本的库可能会有不同的功能，甚至有些功能在新版本中可能已经被移除或者改变。因此，为了确保你能够顺利地跟随这篇博客的内容进行学习，我建议你在开始之前先确认一下你的 cached_network_image 的版本号。

如果你的 cached_network_image 的版本号不是 3.2.3，那么你可能需要更新你的版本。你可以在你的 pubspec.yaml 文件中修改 cached_network_image 的版本号，然后运行 flutter pub get 命令来更新你的版本。

好的，接下来我们进入第三节“什么是 cached_network_image”的内容：

三、什么是 cached_network_image

在我们开始使用 cached_network_image 之前，我想先给你介绍一下这个库。

cached_network_image 是一个 Flutter 库，它可以帮助我们从网络上加载图片，并将这些图片保存在本地的缓存目录中。这样，当我们再次需要这些图片时，就可以直接从本地缓存中加载，而不需要再次从网络上下载。这不仅可以节省网络流量，而且可以大大提高图片的加载速度，从而提高用户体验。

除了图片缓存功能，cached_network_image 还提供了一些其他的功能。例如，我们可以使用占位符（placeholder）在图片加载过程中显示一个等待图标，我们也可以使用错误处理（errorWidget）在图片加载失败时显示一个错误图标。这些功能都可以帮助我们提高应用的用户体验。

好的，接下来我们进入第四节“如何安装和使用 cached_network_image”的内容：

四、如何安装和使用 cached_network_image

1. 安装步骤

要使用 cached_network_image，我们首先需要将它添加到我们的项目中。这个过程非常简单，只需要几个步骤就可以完成。

首先，打开你的项目的 pubspec.yaml 文件，找到 dependencies 部分，然后添加以下代码：

dependencies:
  flutter:
    sdk: flutter

  cached_network_image: ^3.2.3

这段代码的意思是，我们将 cached_network_image 这个库添加到了我们项目的依赖中，^3.2.3 表示我们使用的是 3.2.3 或者更高的版本。

然后，保存你的 pubspec.yaml 文件，然后在终端中运行以下命令：

flutter pub get

这个命令会帮助我们下载和安装我们项目中的所有依赖。当你看到 Running "flutter pub get" in your_project... 这样的输出时，说明 cached_network_image 已经成功安装到你的项目中了。

2. 基础使用示例

安装完成后，我们就可以开始使用 cached_network_image 了。下面是一个基础的使用示例：

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/350x150",
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

在这个示例中，我们使用 CachedNetworkImage 这个组件来加载一个网络图片。imageUrl 参数是我们要加载的图片的 URL，placeholder 参数是一个函数，这个函数返回一个在图片加载过程中显示的组件，errorWidget 参数也是一个函数，这个函数返回一个在图片加载失败时显示的组件。

好的，接下来我们进入第五节“cached_network_image 的基础功能”的内容：

五、cached_network_image 的基础功能

1. 加载网络图片

cached_network_image 的主要功能就是加载网络图片。我们可以通过 CachedNetworkImage 组件的 imageUrl 参数来指定我们要加载的图片的 URL。下面是一个示例：

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/350x150",
),

在这个示例中，我们加载了一个 URL 为 “http://via.placeholder.com/350x150” 的网络图片。

2. 图片缓存

除了加载网络图片，cached_network_image 还可以将这些图片保存在本地的缓存目录中。这样，当我们再次需要这些图片时，就可以直接从本地缓存中加载，而不需要再次从网络上下载。这不仅可以节省网络流量，而且可以大大提高图片的加载速度，从而提高用户体验。

3. 使用占位符和错误处理

在图片加载过程中，我们通常会显示一个占位符（placeholder），以告诉用户图片正在加载。在图片加载失败时，我们也会显示一个错误处理（errorWidget），以告诉用户图片加载失败。cached_network_image 提供了 placeholder 和 errorWidget 这两个参数，让我们可以自定义这两个组件。下面是一个示例：

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/350x150",
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

在这个示例中，我们使用 CircularProgressIndicator 作为占位符，使用 Icon(Icons.error) 作为错误处理。当图片正在加载时，我们显示一个圆形的进度指示器；当图片加载失败时，我们显示一个错误图标。

六、一个完整的示例

首先，我们需要创建一个新的 Flutter 应用。你可以使用以下命令来创建一个新的 Flutter 应用：

flutter create my_app

然后，打开你的项目的 pubspec.yaml 文件，找到 dependencies 部分，然后添加以下代码：

dependencies:
  flutter:
    sdk: flutter

  cached_network_image: ^3.2.3

然后，保存你的 pubspec.yaml 文件，然后在终端中运行以下命令：

flutter pub get

接下来，我们需要修改我们的 main.dart 文件。打开你的 main.dart 文件，然后替换所有的代码为以下代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cached Network Image Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cached Network Image Demo'),
      ),
      body: Center(
        child: CachedNetworkImage(
          imageUrl: "http://via.placeholder.com/350x150",
          placeholder: (context, url) => CircularProgressIndicator(),
          errorWidget: (context, url, error) => Icon(Icons.error),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，这个应用有一个主页，主页中有一个 CachedNetworkImage 组件。这个组件会从 “http://via.placeholder.com/350x150” 这个 URL 加载一张图片，并显示在屏幕上。在图片加载过程中，我们显示一个圆形的进度指示器；在图片加载失败时，我们显示一个错误图标。

七、总结

如果你是个初学者，那么本文对你来说可能帮助很大，我们从学习了cached_network_image 的基础。

🚀对 Flutter 好奇？想深入探索？👉 Flutter专栏->Flutter Developer 101 入门小册 是你的最佳伙伴！📚

👀你将在这里找到全面的 Flutter 学习资源，包括代码示例和深度解析。🔍

💡想知道如何用 Flutter 构建应用？答案就在我们的专栏！🎯

⏰别等了，专栏内容持续更新，价格也会随之上涨。现在加入，享受最优惠的价格！💰

🌍一起在 Flutter 的世界中探索吧！想了解更多？点击这里：Flutter Developer 101 入门小册 专栏指引 🚩

这篇好文章是转载于：学新通技术网