Flutter SDK--(cached_network_image使用详情)图片本地缓存/网络加载

 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);

猜你喜欢

转载自blog.csdn.net/eastWind1101/article/details/130315377
今日推荐