flutter: 图片的fit取值(flutter 3.7.0)

一，查看各个取值的效果

 为了直观起见，我们使用了两张图片演示，分别为横片和竖片

1,BoxFit.contain

说明：图片等比例进行缩放，

       直到图片的高或者宽填充满控件

2,BoxFit.cover

说明：

图片等比例缩放，直到图片的宽和高都充满整个控件，

图片有可能超出控件的范围，导致显示不完整

3,BoxFit.fill

说明：图片填充满整个控件，不按照比例来伸缩，

显示会铺满整个控件导致可能比例失调

4，BoxFit.none

说明：不缩放，保持原大小

5,fitWidth

说明：

等比例进行缩放，按图片的宽度充满控件，

不管图片高度是否会超出控件

6，fitHeight

说明：

等比例进行缩放，按图片的高度充满控件，

不管图片宽度是否会超出控件

7，scaleDown

说明：

图片的宽或高大于控件时，显示与contain一样，

等比例进行缩放，直到完全显示在控件中

 

图片的宽和高都小于控件时，显示与none一样，

不做任何缩放，保持原大小居中显示

 

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/06/04/flutter-tu-pian-de-fit-qu-zhi-flutter-3-7/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，查看flutter的版本:

liuhongdi@liuhongdideMBP ~ % flutter --version
Flutter 3.7.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b06b8b2710 (2 weeks ago) • 2023-01-23 16:55:55 -0800
Engine • revision b24591ed32
Tools • Dart 2.19.0 • DevTools 2.20.1