flutter学习----图片组件

Flutter图片组件

Image.asset，本地图片
mage.network远程图片

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	double	宽度一般结合ClipOval才能看到效果
height	double	高度一般结合ClipOval才能看到效果

fit属性效果图如下：

Flutter引入本地图片

在工程根目录下创建一个images目录，并将图片拷贝到该目录。

若要做到相应式，则需要在images目录下创建相应的文件夹，格式如下

--【mages】

----【2.0x】

----【3.0x】

----【4.0x】

image.jpg

在每个文件夹下面均放入image.jpg文件，则可以做到相应式的图片

打开pubspec.yaml声明添加的图片：

flutter:
	assets:
		- images/image.jpg
		- images/2.0x/image.jpg
		- images/3.0x/image.jpg

在代码中使用

实现圆角图片(头像)最理想方案

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