Flutter图片缓存插件image_cacheing的使用

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

Flutter图片缓存插件image_cacheing的使用

image_cacheing 是一个用于图片缓存的插件。目前该插件已在Android应用中进行了测试。

ImageCacheing 组件通过接收URL作为参数来加载图片。url 参数接受一个字符串形式的图片URL。

ImageCacheing(url: "Image URL"),

ImageCacheing 组件还支持 loadingWidget 参数，当图片正在加载到系统缓存时会显示该参数指定的组件。

ImageCacheing(
    url: global.imageLoadingUrl,
    loadingWidget: Center(child: CircularProgressIndicator())),

ImageCacheing 组件同样支持 errorWidget 参数，当组件中发生错误（例如提供了一个无效的URL）时，将显示该参数指定的组件。

ImageCacheing(
    url: global.imageErrorUrl,
    errorWidget: Center(child: Icon(Icons.warning)))

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 image_cacheing 插件：

import 'package:flutter/material.dart';
import 'package:image_cacheing/image_cacheing.dart';
import './global/vars.dart' as global;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

// 示例代码展示图片缓存
class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            // 正常图片缓存
            Container(child: ImageCacheing(url: global.imageUrl)),
            // 带有加载指示器的图片缓存
            // 可以传递任何类型的widget作为加载指示器
            Container(
                child: ImageCacheing(
                    url: global.imageLoadingUrl,
                    loadingWidget: Center(child: CircularProgressIndicator()))),
            // 带有警告图标的图片缓存
            // 可以传递任何类型的widget作为错误指示器
            Container(
                child: ImageCacheing(
                    url: global.imageErrorUrl,
                    errorWidget: Center(child: Icon(Icons.warning)))),
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


在Flutter中，image_caching 并不是官方或者广泛认可的包名用于图片缓存。通常，Flutter 社区使用 cached_network_image 这个包来实现图片的缓存功能。这个包能够很好地处理从网络加载图片时的缓存问题，从而提高应用的性能和用户体验。

以下是如何使用 cached_network_image 包的一个示例代码：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.1.0  # 请检查最新版本号并更新

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

2. 使用 CachedNetworkImage

接下来，在你的 Dart 文件中导入 cached_network_image 包并使用 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(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cached Network Image Example'),
        ),
        body: Center(
          child: CachedNetworkImage(
            imageUrl: 'https://example.com/path/to/your/image.jpg',
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
        ),
      ),
    );
  }
}

代码解释

  • CachedNetworkImage 小部件用于从网络加载并缓存图片。
  • imageUrl 参数指定图片的 URL。
  • placeholder 参数指定在图片加载过程中显示的占位符（例如一个进度指示器）。
  • errorWidget 参数指定在图片加载失败时显示的错误小部件（例如一个错误图标）。

额外配置

cached_network_image 包还提供了许多其他配置选项，比如设置缓存位置、缓存大小限制等。以下是一些高级配置的示例：

CachedNetworkImage(
  imageUrl: 'https://example.com/path/to/your/image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
  fit: BoxFit.cover, // 图片的适应方式
  width: 300, // 图片宽度
  height: 200, // 图片高度
  cacheConfig: CacheConfig(
    maxAge: const Duration(days: 7), // 图片缓存的最大年龄
    maxCount: 100, // 缓存中图片的最大数量
  ),
)

通过这种方式，你可以灵活地控制图片的加载和缓存行为，以适应你的应用需求。如果你确实在寻找一个名为 image_caching 的特定包，请确保你查找的是正确的包名或者查看该包的官方文档以获取正确的使用方法。

回到顶部