在上一篇中,我们介绍了Image的用法,Flutter中除了Image还有几个常用的用来展示图片的控件:FadeInImage、CircleAvatar、RawImage.
FadeInImage
FadeInImage是一个带占位符且淡入的Image,构造函数如下:
FadeInImage.assetNetwork({
Key key,
@required String placeholder,
@required String image,
AssetBundle bundle,
double placeholderScale,
double imageScale = 1.0,
this.excludeFromSemantics = false,
this.imageSemanticLabel,
this.placeholderSemanticLabel,
this.fadeOutDuration = const Duration(milliseconds: 300),//控制placeholder的淡出动画时间
this.fadeOutCurve = Curves.easeOut,//控制placeholder的淡出动画方式
this.fadeInDuration = const Duration(milliseconds: 700),//控制目标图像的淡入动画时间
this.fadeInCurve = Curves.easeIn,//控制目标图像的淡入动画方式
this.width,
this.height,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.matchTextDirection = false,
})
从构造函数看,其用法比较简单,常用属性和Image没多大区别,特殊点在构造函数中已经标出说明了。
new FadeInImage.assetNetwork(
placeholder: 'image/test_icon.jpg',
image:
'http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg',
width: 60,
height: 60,
),
CircleAvatar
CircleAvatar是一个圆形Image,常用来显示用户Icon,比Android中实现圆形ImageView简单多了。构造方法如下:
const CircleAvatar({
Key key,
this.child,
this.backgroundColor,
this.backgroundImage,
this.foregroundColor,
this.radius,
this.minRadius,
this.maxRadius,
}) : assert(radius == null || (minRadius == null && maxRadius == null)),
super(key: key);
CircleAvatar用法也很简单,设置backgroundImage和radius就会显示出一个圆形Image效果。
new Container(
width: 80,
height: 80,
child: new CircleAvatar(
backgroundImage: NetworkImage(
'http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg'),
radius: 20,
),
),
new CircleAvatar(backgroundImage:AssetImage('image/test_icon.jpg'),
radius: 20,)
由于CircleAvatar不能设置大小,所以可以在外面包一层Container来设置CircleAvatar大小。
RawImage
RawImage很少使用,它是通过 paintImage 绘制出来的Image,一般推荐使用Image,Image底层其实就是封装了RawImage。