Flutter中的图片组件

Flutter图片组件(Image)

图片组件是显示图像的组件,Image组件有很多构造函数,其中两个构造函数为

Image.asset 本地图片

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

Flutter中实现圆角(容器四周圆角)

return Center( 
    child: Container( 
        width: 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 ) 
        ), 
    ), 
);

Flutter实现圆形图片

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