Fultter 中Image及设置圆形图片的两种方式

一、Image

1、color和colorBlendMode一起用

2、fit和repeat连用会最下面的会覆盖上面的设置 

fit: BoxFit.cover

fill：全图显示，图片会被拉伸，充满父容器

contain：全图显示，显示原比例，可能会有空隙

cover：图片要充满整个容器，还不变形

等等。。。

 

二、实现圆形图片的两种方式

1、实现圆型图片的第一种方式

Container + decoration，设置Container的宽高

Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(90),
            color: Colors.pink,
            image: DecorationImage(
            image: NetworkImage(
              'http://img5.cache.netease.com/photo/0003/2012-06-21/84G462VS51GQ0003.jpg'),
            fit: BoxFit.cover,
        ),
      ),
);

 

2、实现圆型图片的第二种方式

Container + ClipOval + Image实现，设置Image的宽高

return Container(
  child: ClipOval(
         child: Image.network(
          'http://img5.cache.netease.com/photo/0003/2012-06-21/84G462VS51GQ0003.jpg',
          width: 200,
          height: 200,
          fit: BoxFit.cover,
        ),
      ),
);