5. Flutter-Image组件

Image组件

• 主要分类：
  Image.asset， 本地图片
  Image.network， 远程图片

---

• 常用属性：

名称	类别	说明
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		宽度 一般结合 ClipOval 才能看到效果
height		高度 一般结合 ClipOval 才能看到效果

---

• 引入图片示例代码：

returnCenter( 
	child:Container( 
		// 引入本地图片
		// child:Image.asset("images/xxx.jpg", 
		// 引入远程图片
		child:Image.network( "url", 
			alignment:Alignment.topLeft, 
			color:Colors.red, 
			colorBlendMode:BlendMode.colorDodge, 
			//repeat:ImageRepeat.repeatX, 
			fit:BoxFit.cover, 
			),
		width:500, 
		height:600, 
		decoration:BoxDecoration( 
			color:Colors.yellow 
		),
	),
);