Flutter图片缓存加载插件cached_network_image的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter图片缓存加载插件cached_network_image的使用

Cached network image

pub package codecov Build Status

cached_network_image 是一个用于显示网络图片并将其存储在缓存目录中的Flutter库。

如何使用

CachedNetworkImage 可以直接使用,也可以通过 ImageProvider 使用。需要注意的是,在Web端的支持目前有限,不包含缓存功能。

带有占位符的示例

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

带有进度指示器的示例

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

使用 ImageProvider 的示例

Image(image: CachedNetworkImageProvider(url))

同时带有占位符和自定义图片构建器的示例

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: imageProvider,
        fit: BoxFit.cover,
        colorFilter:
            ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

它是如何工作的

cached_network_image 使用 flutter_cache_manager 来存储和检索文件。

FAQ

我的应用在图片加载失败时崩溃了。(我知道这其实不是个问题)

它真的崩溃了吗?调试器可能会暂停,因为Dart VM不识别为已捕获的异常;控制台可能会打印错误信息;甚至你的崩溃报告工具可能会报告这个问题(我明白,这真的很糟糕)。然而,应用可能只是正常运行。如果你确实遇到了应用崩溃,请提供一个小例子以便我们重现问题。

例如可以参考 这个 或者 这个 回答。

示例代码

以下是一个完整的示例代码,展示了如何在不同的场景中使用 CachedNetworkImage

import 'dart:io';

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(
      home: Scaffold(
        appBar: AppBar(title: Text('Cached Network Image Example')),
        body: BasicContent(),
      ),
    );
  }
}

/// Demonstrates a [StatelessWidget] containing [CachedNetworkImage]
class BasicContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _sizedContainer(
              const Image(
                image: CachedNetworkImageProvider(
                  'https://via.placeholder.com/350x150',
                ),
              ),
            ),
            _sizedContainer(
              CachedNetworkImage(
                progressIndicatorBuilder: (context, url, progress) => Center(
                  child: CircularProgressIndicator(
                    value: progress.progress,
                  ),
                ),
                imageUrl:
                    'https://images.unsplash.com/photo-1532264523420-881a47db012d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9',
              ),
            ),
            _sizedContainer(
              CachedNetworkImage(
                placeholder: (context, url) =>
                    const CircularProgressIndicator(),
                imageUrl: 'https://via.placeholder.com/200x150',
              ),
            ),
            _sizedContainer(
              CachedNetworkImage(
                imageUrl: 'https://via.placeholder.com/300x150',
                imageBuilder: (context, imageProvider) => Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.cover,
                      colorFilter: const ColorFilter.mode(
                        Colors.red,
                        BlendMode.colorBurn,
                      ),
                    ),
                  ),
                ),
                placeholder: (context, url) =>
                    const CircularProgressIndicator(),
                errorWidget: (context, url, error) => const Icon(Icons.error),
              ),
            ),
            _sizedContainer(
              CachedNetworkImage(
                imageUrl: 'https://notAvalid.uri',
                placeholder: (context, url) =>
                    const CircularProgressIndicator(),
                errorWidget: (context, url, error) => const Icon(Icons.error),
              ),
            ),
            _sizedContainer(
              CachedNetworkImage(
                imageUrl: 'not a uri at all',
                placeholder: (context, url) =>
                    const CircularProgressIndicator(),
                errorWidget: (context, url, error) => const Icon(Icons.error),
                errorListener: (e) {
                  if (e is SocketException) {
                    debugPrint(
                        'Error with ${e.address} and message ${e.message}');
                  } else {
                    debugPrint('Image Exception is: ${e.runtimeType}');
                  }
                },
              ),
            ),
            _sizedContainer(
              CachedNetworkImage(
                maxHeightDiskCache: 10,
                imageUrl: 'https://via.placeholder.com/350x200',
                placeholder: (context, url) =>
                    const CircularProgressIndicator(),
                errorWidget: (context, url, error) => const Icon(Icons.error),
                fadeInDuration: const Duration(seconds: 3),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _sizedContainer(Widget child) {
    return SizedBox(
      width: 300,
      height: 150,
      child: Center(child: child),
    );
  }
}

以上代码展示了一个简单的应用程序,其中包含了多个 CachedNetworkImage 的用法示例。你可以根据需要调整这些示例来满足你的具体需求。


更多关于Flutter图片缓存加载插件cached_network_image的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片缓存加载插件cached_network_image的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用 cached_network_image 插件在 Flutter 中实现图片缓存加载的示例代码。这个插件允许你加载网络图片,同时将其缓存到本地存储中,以便在后续应用中快速显示。

首先,你需要在你的 pubspec.yaml 文件中添加 cached_network_image 依赖:

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.1.0  # 请确保版本号是最新的

然后运行 flutter pub get 来获取依赖。

接下来,在你的 Dart 文件中使用 CachedNetworkImage 组件来加载和缓存图片。以下是一个完整的示例:

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 Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String imageUrl = 'https://via.placeholder.com/150'; // 示例图片URL

    return Scaffold(
      appBar: AppBar(
        title: Text('Cached Network Image Example'),
      ),
      body: Center(
        child: CachedNetworkImage(
          imageUrl: imageUrl,
          placeholder: (context, url) => CircularProgressIndicator(), // 占位符,加载中显示的组件
          errorWidget: (context, url, error) => Icon(Icons.error), // 加载失败时显示的组件
          fit: BoxFit.cover, // 图片适应模式
          width: 300, // 图片宽度
          height: 300, // 图片高度
        ),
      ),
    );
  }
}

在这个示例中:

  1. CachedNetworkImage:用于加载和缓存网络图片。
  2. imageUrl:网络图片的URL。
  3. placeholder:一个函数,返回在图片加载过程中显示的组件,这里使用了一个 CircularProgressIndicator
  4. errorWidget:一个函数,返回在图片加载失败时显示的组件,这里使用了一个显示错误的图标。
  5. fit:决定图片如何适应给定的框,这里使用了 BoxFit.cover
  6. widthheight:指定图片的宽度和高度。

这样,当你运行这个应用时,它会尝试从网络加载图片,并在成功加载后将图片缓存到本地存储。如果图片已经缓存,它将直接从本地存储加载图片,从而提高加载速度。

回到顶部