Image 组件

落日映苍穹つ 2021-09-13 15:34 493阅读 0赞

**主要参数说明：**

alignment: 图片的对齐方式
    
    color: 设置图片的背景颜色，通常和 colorBlendMode 配合一起使用，这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合，绿色背景和图片红色的混合
    
    fit: 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 才能看到效果

示例代码：

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