flutter 图片组件

Image 组件的常用属性:

fit属性的设置

fit属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的，我们先来看看这些属性（建议此部分组好看视频理解）。

• BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。

• BoxFit.contain:全图显示，显示原比例，可能会有空隙。

• BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。

• BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。

• BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。

• BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大

图片的混合模式

图片混合模式（colorBlendMode）和color属性配合使用，能让图片改变颜色，里边的模式非常的多，产生的效果也是非常丰富的

• color：是要混合的颜色，如果你只设置color是没有意义的。
• colorBlendMode:是混合模式，相当于我们如何混合。

child:new Image.network(
  ‘https://abc.2008php.com/2011_Website_appreciate/2011-12-30/20111230224943.jpg‘,
    color: Colors.greenAccent,
    colorBlendMode: BlendMode.darken,
),

repeat图片重复

• ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。

• ImageRepeat.repeatX: 横向重复，纵向不重复。

• ImageRepeat.repeatY：纵向重复，横向不重复。

Width和height属性：

 assets:
 - imgs/a.jpeg
 - imgs/2.0x/a.jpeg
 - imgs/3.0x/a.jpeg

child: Container(
child: Image.asset("images/a.jpeg",
    fit:BoxFit.cover
),
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color: Colors.yellow ),

 return Center(
     child: Container(
         width: 300.0,
         height: 300.0,
         decoration: BoxDecoration(
           color: Colors.yellow,
           borderRadius: BorderRadius.circular(150),
           image: DecorationImage(
              image: new
NetworkImage(‘http://img4.imgtn.bdimg.com/it/u=3517152928,1333162930&fm=26&gp=0.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, ),
　　)
　　),
);