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

 1.cached_network_image

是Flutter中的一个预先构建的组件,用于在Flutter中显示网络图片。它可以在网络图片加载时显示占位符,并在图片加载完成后缓存它们.类似于OC中的SDImage.

2.主要属性:

序列号属性注解
1imageUrl需要显示的图片URL
2placeholder在图片加载完成前显示的占位符,可以是一个图片URL或者一个Widget Widget
3errorWidget在图片加载失败时显示的小部件Widget
4fadeInDuration图片加载后的淡入动画持续时间,单位是毫秒
5fadeOutDuration图片加载时淡出的动画持续时间,单位是毫秒
6width图片的宽度
7height图片的高度
8fit指定图片如何适应父容器,包括 BoxFit.fill(填充整个框架)、BoxFit.contain(保持宽高比而最大限度地使用容器)、BoxFit.cover(保持纵横比并填充整个容器)等
9alignment指定图片的对齐方式,可以是Alignment.center、Alignment.topCenter等
10repeat如果需要重复显示图片(如平铺),可以设置这个属性为 ImageRepeat.repeat
11imageBuilder在显示之前调用的映像生成器
12filterQuality筛选质量,会在渲染图片时应用
13maxHeightDiskCache设置缓存时的最大高度
14maxWidthDiskCache设置缓存时的最大宽度

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值