Flutter常用组件图片组件

图片组件

图片组件是显示图像的组件，Image 组件有很多构造函数，这里我们只给大家讲两个
Image.asset， 本地图片（加载工程内的图片）
Image.network 远程图片（加载网络图片）

名称	类型&说明
alignment	Alignment & 图片的对齐方式
color 和colorBlendMode	设置图片的背景颜色，通常和 colorBlendMode 配合一起使用，这样可以是图片颜色和背景色混。上面的图片就是进行了颜色的混合，绿色背景和图片红色的混合
fit	BoxFit & fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来的。BoxFit.fill:全图显示，图片会被拉伸，并充满父容。BoxFit.contain:全图显示，显示原比例，可能会有空隙。BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。一般常用BoxFit.cover

这是主要用的，当然width和height也不说了，就是一个double的值（double还是float来忘了，反正是个小数值）

我们实现了如下效果：

代码为：

Container(
        child: 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,
              fit: BoxFit.cover,
            ),
            width: 300.0,
            height: 400.0,
            decoration: BoxDecoration(color: Colors.yellow),
          ),
        ),
      )

其余的效果大家就自己去试试吧。不过要加载本地图片的话，要配置好文件，一定要get一下，不然可能会出现一些问题。

Flutter 实现圆角以及实现圆形图片

我们的代码为：

Center(
        child: Container(
          width: 300.0,
          height: 300.0,
          decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(150),  //这里也可以用shape来实现
            image: DecorationImage(
                image: new
                NetworkImage('https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg'),
                    fit: BoxFit.cover
                )
            ),
          ),
        );

当然实现圆角图片还有其余的方式，比如：CircleAvatar，ClipOval等；不过后者要实现圆形图片，要设置width和height相等，不然就是一个椭圆呈现在面前。