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,
        ),
      ),
);