??在上一篇中喘漏,我們介紹了Image的用法护蝶,F(xiàn)lutter中除了Image還有幾個(gè)常用的用來(lái)展示圖片的控件:FadeInImage、CircleAvatar翩迈、RawImage.
??FadeInImage
??FadeInImage是一個(gè)帶占位符且淡入的Image持灰,構(gòu)造函數(shù)如下:
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的淡出動(dòng)畫(huà)時(shí)間
this.fadeOutCurve = Curves.easeOut,//控制placeholder的淡出動(dòng)畫(huà)方式
this.fadeInDuration = const Duration(milliseconds: 700),//控制目標(biāo)圖像的淡入動(dòng)畫(huà)時(shí)間
this.fadeInCurve = Curves.easeIn,//控制目標(biāo)圖像的淡入動(dòng)畫(huà)方式
this.width,
this.height,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.matchTextDirection = false,
})
從構(gòu)造函數(shù)看,其用法比較簡(jiǎn)單负饲,常用屬性和Image沒(méi)多大區(qū)別堤魁,特殊點(diǎn)在構(gòu)造函數(shù)中已經(jīng)標(biāo)出說(shuō)明了喂链。
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是一個(gè)圓形Image,常用來(lái)顯示用戶Icon妥泉,比Android中實(shí)現(xiàn)圓形ImageView簡(jiǎn)單多了椭微。構(gòu)造方法如下:
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用法也很簡(jiǎn)單,設(shè)置backgroundImage和radius就會(huì)顯示出一個(gè)圓形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不能設(shè)置大小蝇率,所以可以在外面包一層Container來(lái)設(shè)置CircleAvatar大小。
??RawImage
??RawImage很少使用匈仗,它是通過(guò) paintImage 繪制出來(lái)的Image瓢剿,一般推薦使用Image,Image底層其實(shí)就是封裝了RawImage悠轩。