Flutter图片缓存加载插件cached_network_image的使用
Flutter图片缓存加载插件cached_network_image的使用
Cached network image
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
更多关于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, // 图片高度
),
),
);
}
}
在这个示例中:
CachedNetworkImage
:用于加载和缓存网络图片。imageUrl
:网络图片的URL。placeholder
:一个函数,返回在图片加载过程中显示的组件,这里使用了一个CircularProgressIndicator
。errorWidget
:一个函数,返回在图片加载失败时显示的组件,这里使用了一个显示错误的图标。fit
:决定图片如何适应给定的框,这里使用了BoxFit.cover
。width
和height
:指定图片的宽度和高度。
这样,当你运行这个应用时,它会尝试从网络加载图片,并在成功加载后将图片缓存到本地存储。如果图片已经缓存,它将直接从本地存储加载图片,从而提高加载速度。