载入图片的几种方式:
Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径
Image.network:网络资源图片,需要网络路径地址
Image.file:加载本地图片,是一个SD卡的绝对路径,跟包体无关
Image.memory: 加载Uint8List资源图片
图片的混合模式
child:new Image.network(
'https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C26%2C1190%2C785%3Bc0%3Dbaike150%2C5%2C5%2C150%2C50/sign=197c354ebf003af359f58620081aea6e/86d6277f9e2f07080797ff47e024b899a801f2e3.jpg',
color: Colors.greenAccent,
colorBlendMode: BlendMode.darken,
),
repeat图片重复
ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布
ImageRepeat.repeatX: 横向重复,纵向不重复
ImageRepeat.repeatY:纵向重复,横向不重复
Width和Height属性:
一般结合 ClipOval 才能看到效果
圆角、圆形图片
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.fevte.com/data/attachment/forum/201203/23/111646w5j1zbp10k7w0uwp.jpg'),
fit: BoxFit.cover)),
),
);
return Center(
child: Container(
child: ClipOval(
child: Image.network(
"https://abc.2008php.com/2011_Website_appreciate/2011-12-30/20111230224943.jpg",
width: 150.0,
height: 150.0,
),
)),
);