一、Flutter圖片組件
1.網(wǎng)絡(luò)圖片 Image.network
return Center(
child: Container(
child: Image.network(
"http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
alignment: Alignment.topLeft,
color: Colors.red,
colorBlendMode: BlendMode.colorDodge,
// repeat: ImageRepeat.repeatX,
fit: BoxFit.cover,
),
width: 300.0,
height: 400.0,
decoration: BoxDecoration(
color: Colors.yellow
),
),
);
image.png
image.png
2.本地圖片 Image.asset
然后唐瀑，打開 pubspec.yaml 聲明一下添加的圖片文件群凶， 注意要配置對(duì)
image.png
最后请梢，在代碼中就可以用了
image.png
child: Container(
child: Image.asset("images/a.jpeg",
fit:BoxFit.cover
),
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color: Colors.yellow
),
),
3.實(shí)現(xiàn)圓角以及實(shí)現(xiàn)圓形圖片
實(shí)現(xiàn)圓角圖片
return Center(
child: Container(
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.circular(150),
image: DecorationImage(
image: new NetworkImage('https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg'),
fit: BoxFit.cover
)
),
),
);
實(shí)現(xiàn)圓形圖片
return Center(
child: Container(
child:ClipOval(
child:Image.network("https://www.itying.com/images/201905/
thumb_img/1101_thumb_G_1557845381862.jpg",
width: 150.0,
height: 150.0,
) ,
)
),
);
