Flutter Image 本地&网络图片、圆形图片、CachedNetworkImage Widget 和 FadeInImage Widget
一、Image Widget
1、使用网络图片 Image.network
Image.network
支持 Flutter 加载并渲染网络图片,构造函数如下:
其中 src 是 String 类型,并且是必填的第一个参数,其他的都是命名参数
fit
属性用来指定 图片的适配方式,和 weex 的 image 标签的 resize 属性或者 rax 的 resizeMode 效果一致。
使用 Image.network 加载网络图片:
String IMAGE_SRC = 'https://picsum.photos/id/142/600/400';
Image.network(
IMAGE_SRC,
alignment: Alignment.bottomRight,
color: Colors.blue,
colorBlendMode: BlendMode.colorBurn,
fit: BoxFit.cover, // 填充拉伸裁剪
width: 100.0,
height: 100.0
// repeat: ImageRepeat.repeatX, // 重复
)
上面使用 color: Colors.blue, colorBlendMode: BlendMode.colorBurn,
做了颜色覆盖,最终效果:
2、ClipOval 实现圆形图片
通过 ClipOval
可以剪切 Image.network
加载的图片
直接将 Image.network 放在 ClipOval
的 child 属性中即可,需要制定图片的宽度和高度
ClipOval(
child: Image.network(
IMAGE_SRC,
fit: BoxFit.cover,
width: 100,
height: 100,
// color: Colors.black
),
);
效果:
3、利用 Container 实现圆形图片
借助 Container 的 BorderRadius 也一样可以实现一个圆形图片
需要注意的是,
return Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.pink,
borderRadius: BorderRadius.all(Radius.circular(50)),
image: DecorationImage(
image: NetworkImage(IMAGE_SRC),
fit: BoxFit.cover,
),
), // 通过 container 实现圆角
);
上面代码中,通过 borderRadius
指定了 Radius.circular(50)
实现一个圆形的 Container
然后在 image
属性中通过 DecorationImage
塞入了一个 image
,不过此时不能使用 Image.network
,而是应该直接使用 NetworkImage
将 IMAGE_SRC 传入即可。
效果:
4、Image.asset 本地图片
Image.asset
可以用来加载本地的图片素材,加载本地图片素材是需要在依赖中声明的
在 pubspec.yaml
中指定 assets
字段,配置了 2.0x
和 3.0x
的文件
# To add assets to your application, add an assets section, like this:
assets:
- images/demo.png
- images/2.0x/demo.png
- images/3.0x/demo.png
声明之后,重新执行 flutter pub get
,
加载本地代码:
return Container(
child: Image.asset('images/demo.png', fit: BoxFit.contain),
width: 100,
height: 100,
);
效果:
二、使用 cached_network_image
图片库
上面 Image.network
记载图片没有任何的缓存,每次都是重新加载时间比较慢,同时没有任何的动画效果
cached_network_image
这个库实现了图片缓存加载和载入效果。
库文档地址:https://pub.dev/packages/cached_network_image
dependencies:
flutter:
sdk: flutter
cached_network_image: ^0.8.0
使用 CachedNetworkImage Widget:
return Container(
child: CachedNetworkImage(
width: 100,
height: 50,
fit: BoxFit.cover,
imageUrl: IMAGE_SRC,
placeholder: (context, url) => CircularProgressIndicator(
// backgroundColor: Colors.pink,
),
errorWidget: (context, url, error) => Icon(Icons.error),
),
);
CachedNetworkImage
Widget 支持传入 imageUrl
图片的地址、placeholder
加载方式(或者家在动画),errorWidget
加载错误的图示
上面的加载动画中我使用了 CircularProgressIndicator
Widget 可以看到明显的加载动画和过度效果
三、使用 FadeInImage
记载图片过渡效果
除了使用上面 CachedNetworkImage 自带过度效果外,还可以使用 FadeInImage
Widget 实现过度效果
FadeInImage
本身支持指定本地图片作为 loading 的图标
需要注意的是本地图片需要在 pubspec.yaml
中声明 assets:
# To add assets to your application, add an assets section, like this:
assets:
- images/demo.png
- images/2.0x/demo.png
- images/3.0x/demo.png
- images/loading.gif
示例代码:
return FadeInImage.assetNetwork(
placeholder: 'images/loading.gif',
image: IMAGE_SRC,
width: 100,
height: 50,
);
结果:
四、完整代码
github 代码示例:
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/flutter-image-cachednetworkimage-fadeinimage.html
转载请注明文章原始出处 !