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 引入本地图片

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

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

--【mages】

----【2.0x】

----【3.0x】

----【4.0x】

image.jpg

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

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

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

3. 在代码中使用

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

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