第七十三回：如何对图片进行缩放

我们在上一章回中介绍了国际化相关的内容，本章回中将介绍 如何对图片进行缩放.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的图片缩放不是简单地对图片进行放大或者缩小，而是通过一定的缩放方式让图片在Image组件中显示出好的观看效果。 在实际项目中Image组件的大小可能是固定的，或者受限于它父组件的大小，而图片的实际大小与Image组件的大小不相同，因此需要使用一定的缩放方式让Image组件很好地显示图片。

使用方法

Image组件提供了名叫fit的属性来控制图片的缩放，给该属性赋值不同的缩放模式可以得到不同的缩放效果，下面是各种缩放模式的含义：

• BoxFit.fill：表示图片的尺寸与Image组件的长度和宽度不同时会对图片进行拉伸操作；
• BoxFit.cover：表示图片的尺寸与Image组件的长度和宽度不同时会对图片进行剪裁操作；
• BoxFit.contain：表示图片的尺寸与Image组件的长度和宽度不同时会对图片进行缩放操作；

这三种属性值中，我们推荐使用contain属性值，它既能正常地显示图片，又能满足Image组件的长度和宽度。此外，BoxFit还提供了其它的属性值，我们在这里就不一一列出了，大家可以参考源代码中的注释去了解各个属性值的含义。

示例代码

 //组件尺寸和图片不同时，图片会有拉伸
  Image buildImageFill() {
    return Image(
      width: 160,
      height: 60,
      image: AssetImage("images/panda.jpeg"),
      fit: BoxFit.fill,
      filterQuality:FilterQuality.high ,
    );
  }

  //组件尺寸和图片不同时，图片会有剪裁
  Image buildImageCover() {
    return Image(
      width: 160,
      height: 60,
      image: AssetImage("images/panda.jpeg"),
      fit: BoxFit.cover,
      filterQuality:FilterQuality.high,
    );
  }

  //组件尺寸和图片不同时，图片正常显示，不过有缩放现象
  Image buildImageContain() {
    return Image(
      width: 160,
      height: 60,
      image: AssetImage("images/panda.jpeg"),
      fit: BoxFit.contain,
      filterQuality:FilterQuality.high,
    );
  }

上面的代码中，我们把Image组件封装成了不同的方法，这样可以放到column组件中，方便我们对比它们之间的差异，我的经验是放一个没有缩放操作的Image，然后把它当作基准值去和其它有缩放操作的Image组件做比较。这个操作在完整代码中有演示，大家可以参考Github上ex003文件中的代码。最后，我们建议大家自己动手去实践，这样才能真正看到各个属性值之间的差异。

看官们，关于"如何对图片进行缩放"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!