flutter控件之Image & FadeInImage &

2023-04-17  本文已影响0人  肉肉要次肉

Image

Image可加载本地图片和网络图片,跟iOS中的UIImageView一样。

加载本地资源图片,如 Image.asset(‘images/logo.png’);

加载网络图片,如 Image.network('http://xxx/xxx/test.gif') 。

FadeInImage

在加载网络图片的时候,为了提升用户的等待体验,我们往往会加入占位图、加载动画等元素,但是默认的 Image.network 构造方法并不支持这些高级功能,这时候 FadeInImage 控件就派上用场了。

FadeInImage 控件提供了图片占位的功能,并且支持在图片加载完成时淡入淡出的视觉效果。此外,由于 Image 支持 gif 格式,我们甚至还可以将一些炫酷的加载动画作为占位图。

FadeInImage.assetNetwork( 

placeholder: 'assets/loading.gif', //gif占位 

image: 'https://xxx/xxx/xxx.jpg', fit: BoxFit.cover, //图片拉伸模式 

width: 200, 

height: 200,

)

CachedNetworkImage

第三方加载网络图片与前两个最大区别就是,flutter系统自带image加载不带缓存,所以,一般项目中需要加载网络图片,都是使用CachedNetworkImage。

CachedNetworkImage使用方法与Image类似,除了支持图片缓存外,还提供了比FadeInImage更为强大的加载过程占位与加载错误占位,可以支持比用图片占位更灵活的自定义控件占位。

1、引入库


pubspec.yaml 中添加插件

在dev_dependencies中,添加cached_network_image第三方包,添加完,点击pub get下载一下这个依赖包

2、在你需要用到的页面,引入头文件


import 'package:cached_network_image/cached_network_image.dart';

3、使用代码


CachedNetworkImage( 

imageUrl: "http://xxx/xxx/jpg", 

placeholder: (context, url) => CircularProgressIndicator(), 

errorWidget: (context, url, error) => Icon(Icons.error), 

width:100,

height:200,

fit:BoxFit.fill,//图片展示模式,相当于iOS的contentMode属性

)

上一篇 下一篇

猜你喜欢

热点阅读