参考:
https://stackoverflow.com/questions/46326584/how-do-i-tell-when-a-networkimage-has-finished-loading
.
https://book.flutterchina.club/chapter14/image_and_cache.html#_14-5-1-imageprovider
动画部分就不赘述了,这里简要记录下如何监听Image.network的加载状态并设置淡入。
(省略动画以及部分代码)
...
Image? _image = null;//Image对象
bool _loading = true;//图片加载状态,加载中则为true
...
@override
void initState() {
// TODO: implement initState
super.initState();
//初始化动画
_initAnimation();
//获取图片URL并初始化Image和设置Image的加载状态监听器
_fetchImageUrl();
}
@override
Widget build(BuildContext context) {
//当Image加载中,显示loading控件 ; 当加载完成,显示Image
return _loading? loadingview() : Opacity(opacity: animationValue, child: _image);
}
...
_fetchImageUrl(){
...// 从API获取图片URL
//获取到图片的URL后初始化Image
_image = new Image.network(imgUrl, fit: BoxFit.cover);
//并设置加载状态监听器
_image!.image.resolve(new ImageConfiguration()).addListener(
ImageStreamListener((ImageInfo info, bool syncCall) {
//当加载完成
if (mounted) {
setState(() {
//显示Image
_loading = false;
//开始动画
controller.reset();
controller.forward();});
}
})
);
}