1.cached_network_image
是Flutter中的一个预先构建的组件,用于在Flutter中显示网络图片。它可以在网络图片加载时显示占位符,并在图片加载完成后缓存它们.类似于OC中的SDImage.
2.主要属性:
序列号 | 属性 | 注解 |
1 | imageUrl | 需要显示的图片URL |
2 | placeholder | 在图片加载完成前显示的占位符,可以是一个图片URL或者一个Widget Widget |
3 | errorWidget | 在图片加载失败时显示的小部件Widget |
4 | fadeInDuration | 图片加载后的淡入动画持续时间,单位是毫秒 |
5 | fadeOutDuration | 图片加载时淡出的动画持续时间,单位是毫秒 |
6 | width | 图片的宽度 |
7 | height | 图片的高度 |
8 | fit | 指定图片如何适应父容器,包括 BoxFit.fill(填充整个框架)、BoxFit.contain(保持宽高比而最大限度地使用容器)、BoxFit.cover(保持纵横比并填充整个容器)等 |
9 | alignment | 指定图片的对齐方式,可以是Alignment.center、Alignment.topCenter等 |
10 | repeat | 如果需要重复显示图片(如平铺),可以设置这个属性为 ImageRepeat.repeat |
11 | imageBuilder | 在显示之前调用的映像生成器 |
12 | filterQuality | 筛选质量,会在渲染图片时应用 |
13 | maxHeightDiskCache | 设置缓存时的最大高度 |
14 | maxWidthDiskCache | 设置缓存时的最大宽度 |
3.使用cached_network_image的案例:
CachedNetworkImage(
imageUrl: 'https://picsum.photos/250?image=9',
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
)
/*
imageUrl参数用于指定要加载的网络图片的URL;
placeholder参数用于指定加载图片时的占位符;
errorWidget则用于指定加载出错时的占位符。
*/
注意事项:使用cached_network_image时需要依赖internet权限,否则无法正常加载网络图片。此外,为了更好地利用缓存机制,我们还需要在应用程序初始化时调用以下代码:
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
@override
void initState() {
super.initState();
//该代码用于在应用启动时初始化cached_network_image的下载回调,用于实现缓存功能
CachedNetworkImageProvider().downloadImageCallback = (uri, headers) async {
final response = await http.get(uri, headers: headers);
return response.bodyBytes;
};
}
}
4.清除图片缓存
//imageUrl参数指定需要清除缓存的图片地址
CachedNetworkImage.evict(imageUrl);