图片组件

Image.asset， 本地图片

Image.network 远程图片

lutter2.x以后引入远程图片的时候必须使用https协议

Image 组件的常用属性:

名称	类型	说明
alignment	Alignment	图片的对齐方式
color 和 colorBlendMode		设置图片的背景颜色，通常和 colorBlendMode 配合一起使用，这样可以是图片颜色和背景色混合。上面的图片就 是进行了颜色的混合，绿色背景和图片红色的混合
fit	BoxFit	fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来的。 BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。 BoxFit.contain:全图显示，显示原比例，可能会有空隙。 BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。 BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。 BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。 BoxFit.scaleDown：效果和 contain 差不多，但是此属性不允许显示超过源图片大小，可小不可大。
repeat	平铺	ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。 ImageRepeat.repeatX: 横向重复，纵向不重复。 ImageRepeat.repeatY：纵向重复，横向不重复。
width 和 height		宽度 高度 一般结合 ClipOval 才能看到效果

一、Flutter 引入网络图片 

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,
      ),
       300.0,
      height: 400.0,
      decoration: BoxDecoration(
         color: Colors.yellow ),
      ),
);

二、Flutter 引入本地图片 

 

然后，打开 pubspec.yaml 声明一下添加的图片文件，注意要配置对

最后，在代码中就可以用了

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

三、Flutter 实现圆角以及实现圆形图片

return Center(
  child: Container(
     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_15578 45381862.jpg'),
             fit: BoxFit.cover
            )
       ),
     ),
);

return Center( 
  child: Container(
    child:ClipOval(
      child:Image.network(
        "https://www.itying.com/images/201905/ thumb_img/1101_thumb_G_1557845381862.jpg",
         150.0,
        height: 150.0,
      ) ,
    )
  ),
);