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

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

这是一个用于从网络获取数据并将其作为字符串写入缓存目录的包。如果缓存文件存在，则将从缓存文件读取数据而不是从网络获取。 此外，它提供了一个用于查看缓存的组件。

安装

flutter pub add cached_network

开始使用

使用CachedNetwork

import 'package:cached_network/cached_network.dart';

void main() async {
  var network = CachedNetwork();
  await network.request('https://google.com');
}

使用CacheView

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

void main() {
  runApp(const MaterialApp(
    home: CacheViewDemo(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return const CacheView();
  }
}

重要事项

如果你不在Flutter应用中或者在隔离环境中使用CachedNetwork，你应该在构造实例时指定cacheDirectory。


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

1 回复

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


在Flutter中，cached_network_image 是一个常用的插件，用于加载和缓存网络图片。它可以帮助你高效地管理图片资源，避免重复下载，并且提供了丰富的配置选项。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.2.3

然后运行 flutter pub get 来安装依赖。

2. 基本用法

CachedNetworkImage 是一个可以直接在 Flutter 项目中使用的 Widget。以下是一个简单的使用示例：

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: Center(
          child: CachedNetworkImage(
            imageUrl: 'https://example.com/image.jpg',
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
        ),
      ),
    );
  }
}

3. 参数说明

  • imageUrl: 要加载的图片的 URL。
  • placeholder: 图片加载时显示的 Widget。
  • errorWidget: 图片加载失败时显示的 Widget。
  • fadeInDuration: 图片淡入的持续时间。
  • fadeOutDuration: 图片淡出的持续时间。
  • width 和 height: 设置图片的宽度和高度。
  • fit: 图片的填充方式，类似于 BoxFit。
  • filterQuality: 图片的过滤质量。

4. 高级用法

4.1 自定义缓存管理器

你可以通过 CachedNetworkImageProvider 来自定义缓存管理器的行为：

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: imageProvider,
        fit: BoxFit.cover,
      ),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
);

4.2 使用 CachedNetworkImageProvider

如果你需要直接使用 ImageProvider，可以使用 CachedNetworkImageProvider：

Image(
  image: CachedNetworkImageProvider('https://example.com/image.jpg'),
);

4.3 清除缓存

你可以使用 CachedNetworkImage.evictFromCache 方法来清除特定 URL 的缓存：

CachedNetworkImage.evictFromCache('https://example.com/image.jpg');

5. 处理图片加载状态

CachedNetworkImage 提供了 placeholder 和 errorWidget 来处理图片加载的不同状态。你也可以通过 ImageStreamListener 来监听图片加载的进度和状态。

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  progressIndicatorBuilder: (context, url, downloadProgress) => 
      CircularProgressIndicator(value: downloadProgress.progress),
  errorWidget: (context, url, error) => Icon(Icons.error),
);

6. 使用 CachedNetworkImage 与 ListView

在 ListView 或 GridView 中使用 CachedNetworkImage 时，Flutter 会自动处理图片的加载和缓存，确保滚动时的性能。

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return CachedNetworkImage(
      imageUrl: 'https://example.com/image$index.jpg',
      placeholder: (context, url) => CircularProgressIndicator(),
      errorWidget: (context, url, error) => Icon(Icons.error),
    );
  },
);
回到顶部