配置资源
1.在pubspec.yaml中的flutter部分添加如下内容:
assets:
- images/avatar.png
flutter 加载本地资源
new Image.asset("assets/images/wechat.png")
// or
new Image(
image: new AssetImage("assets/images/wechat.png"),
),
加载网络图片
Image.network(
model.coverImgUrl,
fit: BoxFit.cover,
)
fit设置模式
fit:该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。适应模式是在BoxFit中定义,它是一个枚举类型,有如下值:
fill:会拉伸填充满显示空间,图片本身长宽比会发生变化,图片会变形。
cover:会按图片的长宽比放大后居中填满显示空间,图片不会变形,超出显示空间部分会被剪裁。
contain:这是图片的默认适应规则,图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间,图片不会变形。
fitWidth:图片的宽度会缩放到显示空间的宽度,高度会按比例缩放,然后居中显示,图片不会变形,超出显示空间部分会被剪裁。
fitHeight:图片的高度会缩放到显示空间的高度,宽度会按比例缩放,然后居中显示,图片不会变形,超出显示空间部分会被剪裁。
none:图片没有适应策略,会在显示空间内显示图片,如果图片比显示空间大,则显示空间只会显示图片中间部分。
如何将加载的过得图片缓存到内存和本地
cached_network_image 缓存网络图片框架
dependencies:
cached_network_image: ^1.1.3
封装的图片工具类
import 'package:common_utils/common_utils.dart';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
class ImageUils {
//获取图片AssetImage
static ImageProvider getAssetImage(String name, {String format: 'png'}) {
return AssetImage(getImgPath(name, format: format));
}
//获取本地图片路径
static String getImgPath(String name, {String format: 'png'}) {
return 'assets/images/$name.$format';
}
//缓存图片,利用CachedNetworkImageProvider,这个框架在加载图片的时候
//会把图片缓存到本地,如果imageUrl是空的,那么就加载默认占位图
static ImageProvider getImageProvider(String imageUrl,
{String holderImg: "none"}) {
if (TextUtil.isEmpty(imageUrl)) {
return AssetImage(getImgPath(holderImg));
}
return CachedNetworkImageProvider(imageUrl);
}
}