Flutter
中,通过Image
组件来加载并显示图片,可以从asset
、文件、内存以及网络获取图片,都需要实现不同的ImageProvider
。
Flutter
图片加载方式:
Image() // 通用方法,使用ImageProvider实现,如下方法本质上也是使用的这个方法
Image.asset // 加载资源图片
Image.file // 加载本地图片文件
Image.network // 加载网络图片
Image.memory // 加载Uint8List资源图片
从asset中加载图片
AssetImage
是实现了从Asset
中加载图片的ImageProvider
。
- 在工程根目录下创建一个
images
目录,并将图片avatar.png
拷贝到该目录。
也可以设置其他自定义目录,如lib
下面的images
,方便管理。 - 在
pubspec.yaml
中的flutter
部分添加如下内容:
assets:
- images/avatar.png
- images/a_dot_burr.jpeg
- images/a_dot_ham.jpeg
如果不想像这样每添加一张图片都添加一条配置,直接包含某一个目录中的所有的资源,直接指定目录的名称:
assets:
- images/
注意: 由于 yaml 文件对缩进严格,所以必须严格按照每一层两个空格的方式进行缩进,此处assets前面应有两个空格。
- 加载图片
Image(
image: AssetImage("images/avatar.png"),
width: 100.0
);
或者使用Image
提供的一个快捷构造函数Image.asset
用于从asset
中加载图片:
Image.asset("images/avatar.png",
width: 100.0,
)
从网络加载图片
Image(
image: NetworkImage(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
width: 100.0,
)
或者使用Image
提供的一个快捷的构造函数Image.network
用于从网络加载图片:
Image.network(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
width: 100.0,
)
注意一些点:
1.Image
的width、height
参数,当不指定宽高时,图片会根据当前父容器的限制,尽可能的显示其原始大小。
如果只设置width、height
的其中一个,那么另一个属性默认会按比例缩放,可以通过fit
属性来指定适应规则,具体介绍参考文档。
2.Image
缓存,Image
加载过得图片只在内存中会有缓存,无法缓存本地。一旦应用关闭,这个缓存就没有了,下次重新启动还会从网络下载并缓存。
cached_network_image
一个用于显示来自Internet
的图像并将它们保存在缓存目录中的flutter
库,可以用来加载和缓存网络图像,也可以与占位符和错误小部件一起使用。
import 'package:cached_network_image/cached_network_image.dart';
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => CircularProgressIndicator(),//CircularProgressIndicator 属于cached_network_image库
errorWidget: (context, url, error) => Icon(Icons.error),
),
transparent_image
有默认占位图和淡入效果。
import 'package:transparent_image/transparent_image.dart';
FadeInImage.memoryNetwork(
placeholder: kTransparentImage, //透明图,kTransparentImage 属于 transparent_image 库
image: 'http://via.placeholder.com/350x150',
);
可以使用应用内的图片来做占位图:
FadeInImage.assetNetwork(
placeholder: "lib/images/a.jpeg",
image: "http://via.placeholder.com/350x150")
网友评论