如何显示本地图像,直到NetworkImage()加载起来为止?
问题描述:
new CircleAvatar(
backgroundColor: Colors.black87,
backgroundImage: new NetworkImage(url),
radius: 45.0,
)
我想在CircleAvatar
之前显示本地图像,直到NetworkImage
从互联网上完全加载。如何显示本地图像,直到NetworkImage()加载起来为止?
答
你可能想尝试FadeInImage
包裹在一个ClipOval
。 FadeInImage
提供了一个placeholder
属性,您可以在加载网络映像时使用该属性。
备注:ClipOval
可能会很贵,如果你做了很多,请谨慎使用它。
答
使用StateflWidget
,你可以添加一个listener
到ImageStream
和覆盖initState
触发本地图像,当它是满载从互联网上获得的一个之间的替代品。
我已经使用了高分辨率的图像显示加载时间:
var _loadImage = new AssetImage(
'assets/img/basic2-090_loader_loading-512.png');
var _myEarth = new NetworkImage(
"http://qige87.com/data/out/73/wp-image-144183272.png");
bool _checkLoaded = true;
@override
void initState() {
_myEarth.resolve(new ImageConfiguration()).addListener((_, __) {
if (mounted) {
setState(() {
_checkLoaded = false;
});
}
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(child: new Container(
decoration: new BoxDecoration(shape: BoxShape.circle,),
height: 80.0,
width: 80.0,
child: new CircleAvatar(
backgroundColor: Theme
.of(context)
.scaffoldBackgroundColor,
backgroundImage: _checkLoaded ? _loadImage : _myEarth,
),)
)
);
}
}
答
虽然大图像加载,显示回退的财富!
new PlutoImage.networkWithPlaceholder("http://68.media.tumblr.com/f7e2e01128ca8eb2b9436aa3eb2a0a33/tumblr_ogwlnpSpcU1sikc68o1_1280.png", new Image.asset("assets/placeholder.png"));