新建项目-3.png

用于图片显示的Widget，常用类别：

1. Image.asset 资源图片

  1. Image.asset(
  2.     String name, {        //
  3.     Key key,
  4.     AssetBundle bundle,   //? 
  5.     this.frameBuilder,    //?
  6.     this.semanticLabel,   //语义标签
  7.     this.excludeFromSemantics = false, //是否排除此图像.  (在应用中无贡献的图像)
  8.     double scale,         // 图形显示的比例 .  图片显示 宽高 = 图片原图宽高/scale
  9.     this.width,           // 宽度，如果为null的话，则图像将选择最佳大小显示，而且会保留其固有宽高比的大小
  10.     this.height,          // 高度，如果为null的话，则图像将选择最佳大小显示，而且会保留其固有宽高比的大小
  11.     this.color,           // 图片的混合色值 
  12.     this.colorBlendMode,  // 图片与颜色的混合模式 
  13.     this.fit,             // 用于在图片的显示空间和图片本身大小不同时指定图片的适应模式
  14.     this.alignment = Alignment.center,  //图片的对齐方式
  15.     this.repeat = ImageRepeat.noRepeat, //当图片本身大小小于显示空间时，指定图片的重复规则
  16.     this.centerSlice,     //通过rect确定图片的四个角的大小，这四个角保持不变，其余部位拉伸，直至填满整个控件
  17.     this.matchTextDirection = false, //图片的绘制方向  true:从左往右  false:从右往左
  18.     this.gaplessPlayback = false,    //当图像提供者更改时  true：继续显示旧图像  false：简单地显示任何内容
  19.     String package,       
  20.     this.filterQuality = FilterQuality.low, //设置图片的过滤质量
  21.     int cacheWidth,
  22.     int cacheHeight,
  23.   })

1. 在 Flutter 工程的根目录下创建一个 image 目录，然后将一张 flutter.jpg 的图片拷贝到该目录，如下图：

image.png

2. 打开 pubspec.yml ,在 flutter 中添加图片的配置信息:

image.png

这样就可以添加 image 文件下的所有图片.如果想导入单张 后面加图片名字 …

3. Packages get 下

修改完pubspec.yaml的assets后都需要重新获取下
image.png

4. 使用 普通显示

  1. //图片保持比例，按原图大小显示，如果宽高任何一个超出了屏幕宽高，
  2. //则将超出屏幕的那个宽高设定为屏幕宽高，如果都超出了，
  3. //那么图片将尽可能大的在屏幕范围内按照原比例显示，
  4. //也就是图片显示的宽为屏幕宽（高按比例）或高为屏幕高（宽按比例）。
  6. //在图片可显示的尺寸内，图片居中，保持原比例显示
  8. Image.asset("image/flutter1.png"),

image.png

5. width、height 宽高

  1. //指定图片显示范围 width 和height
  2. //图片保持比例显示，尽量按原图大小显示，如果宽高任何一个超出了给定宽高，
  3. //则将超出给定宽高的那个宽高设定为给定宽高，
  4. //如果都超出了，那么图片将尽可能大的在给定范围内按照原比例显示，也就是图片显示的宽为给定宽（高按比例）或高为给定高（宽按比例）。
  5. //在图片可显示的尺寸内，图片居中，保持原比例显示
  7. Image.asset(
  8.   "image/flutter1.png",
  9.   width: 300,
  10.   height: 300,
  11. ),

6. scale 比例

图片显示 宽高 = 图片原图宽高/scale

  1. Image.asset(
  2.   "image/flutter1.png",
  3.   scale: 0.5, //扩大一倍
  4. ),

image.png

  1. Image.asset(
  2.   "image/flutter1.png",
  3.   scale: 2, //缩小一倍
  4. ),

image.png

7. BlendMode混合模式详解

Flutter BlendMode混合模式详解

8. fit 图片在容器中显示的适应模式

/
原始图 : 在容器里面加了一个图片,给容器加上背景

  1.  Container(
  2.   width: 300,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.   ),
  8. ),

image.png

1. BoxFit.fill: 会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。

  1.  <br /> 官方图:<br />     ![](https://cdn.nlark.com/yuque/0/2020/png/1032398/1585791022746-19adf15b-427e-4ed8-997e-79f924687633.png#align=left&display=inline&height=90&originHeight=90&originWidth=300&size=0&status=done&style=none&width=300)

荔枝: 

  1.  Container(
  2.   width: 300,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     fit: BoxFit.fill,  
  8.   ),
  9. ),

image.png

2. BoxFit.contain： 会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁

官方图:

Flutter Image - 图13

例子:

  1. Container(
  2.   width: 300,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     fit: BoxFit.contain,
  8.   ),
  9. ),

image.png

3. BoxFit.cover ： 这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。

官方图:

Flutter Image - 图15

例子:

  1. Container(
  2.   width: 300,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     fit: BoxFit.cover,
  8.   ),
  9. ),

image.png

4. BoxFit.fitWidth ： 图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。

官方图:
Flutter Image - 图17

列子:

  1.  Container(
  2.   width: 300,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     fit: BoxFit.fitWidth,
  8.   ),
  9. ),

image.png

5. BoxFit.fitHeight ： 图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。

官方图:

Flutter Image - 图19

例子:

  1. Container(
  2.   width: 300,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     fit: BoxFit.fitHeight,
  8.   ),
  9. ),

image.png

6. BoxFit.none ： 图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分

官方图:

Flutter Image - 图21

例子:

  1.  Container(
  2.   width: 300,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     fit: BoxFit.none,
  8.   ),
  9. ),

image.png

7. BoxFit.scaleDown: 对齐目标框内的源（默认情况下，居中），并在必要时缩小源以确保源适合框内。这与contains相同，如果这会缩小图像，否则它与none相同。


官方图:

Flutter Image - 图23

例子: 

  1.  Container(
  2.   width: 200,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     fit: BoxFit.scaleDown,
  8.   ),
  9. ),

image.png

9. alignment 图片对齐方式

1. Alignment.topLeft 左上对齐

  1. Container(
  2.   width: 400,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     alignment: Alignment.topLeft,
  8.   ),
  9. ),

image.png

2. Alignment.topCenter 上部居中对齐

  1.  Container(
  2.   width: 400,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     alignment: Alignment.topCenter,
  8.   ),
  9. ),

image.png

3. Alignment.topRight 右上对齐

  1.  Container(
  2.               width: 400,
  3.               height: 350,
  4.               color: Colors.lightGreenAccent,
  5.               child: Image.asset(
  6.                 "image/flutter1.png",
  7.                 alignment: Alignment.topRight,
  8.               ),
  9.             ),

image.png

4. Alignment.centerLeft 中间居左对齐

  1. Container(
  2.   width: 400,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     alignment: Alignment.centerLeft,
  8.   ),
  9. ),

image.png

5. Alignment.center 中间对齐

  1.  Container(
  2.   width: 400,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     alignment: Alignment.center,
  8.   ),
  9. ),

image.png

6. Alignment.centerRight 中间居右对齐

  1. Container(
  2.   width: 400,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     alignment: Alignment.centerRight,
  8.   ),
  9. ),

image.png

7. Alignment.bottomLeft 左下对齐

  1. Container(
  2.   width: 400,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     alignment: Alignment.bottomLeft,
  8.   ),
  9. ),

image.png

8. Alignment.bottomCenter 底部居中对齐

  1.  Container(
  2.   width: 400,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     alignment: Alignment.bottomCenter,
  8.   ),
  9. ),

image.png

9. Alignment.bottomRight 右下对齐

  1. Container(
  2.   width: 400,
  3.   height: 350,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     alignment: Alignment.bottomRight,
  8.   ),
  9. ),

image.png

10. Alignment.lerp(Alignment.topLeft, Alignment.topRight, t) 线性取值，t在0-1之间，t越小越倾向于左侧的值，t越大越倾向于右边的值

  1. Container(
  2.   width: 300,
  3.   height: 200,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     alignment: Alignment.lerp(Alignment.topLeft, Alignment.topRight, 0.25),
  8.   ),
  9. ),
  10. Container(
  11.   width: 300,
  12.   height: 200,
  13.   color: Colors.redAccent,
  14.   child: Image.asset(
  15.     "image/flutter1.png",
  16.     alignment: Alignment.lerp(Alignment.topLeft, Alignment.topRight, 0.5),
  17.   ),
  18. ),
  19. Container(
  20.   width: 300,
  21.   height: 200,
  22.   color: Colors.orangeAccent,
  23.   child: Image.asset(
  24.     "image/flutter1.png",
  25.     alignment: Alignment.lerp(Alignment.topLeft, Alignment.topRight, 0.75),
  26.   ),
  27. ),

image.png

  1.  Container(
  2.   width: 200,
  3.   height: 250,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     alignment: Alignment.lerp(Alignment.topLeft, Alignment.bottomLeft, 0.25),
  8.   ),
  9. ),
  10. Container(
  11.   width: 200,
  12.   height: 250,
  13.   color: Colors.redAccent,
  14.   child: Image.asset(
  15.     "image/flutter1.png",
  16.     alignment: Alignment.lerp(Alignment.topLeft, Alignment.bottomLeft, 0.5),
  17.   ),
  18. ),
  19. Container(
  20.   width: 200,
  21.   height: 250,
  22.   color: Colors.orangeAccent,
  23.   child: Image.asset(
  24.     "image/flutter1.png",
  25.     alignment: Alignment.lerp(Alignment.topLeft, Alignment.bottomLeft, 0.75),
  26.   ),
  27. ),

image.png

10. repeat 当图片本身大小小于显示空间时，指定图片的重复规则

1. ImageRepeat.repeat 在x和y轴上重复图像，直到填充满空间。

  1. Container(
  2.   width: 400,
  3.   height: 600,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     repeat: ImageRepeat.repeat,
  8.   ),
  9. ),

image.png

2. ImageRepeat.repeatX 在x轴上重复图像，直到填充满空间。

  1. Container(
  2.   width: 400,
  3.   height: 400,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     repeat: ImageRepeat.repeatX,
  8.   ),
  9. ),

image.png

3. ImageRepeat.repeatY 在y轴上重复图像，直到填充满空间

  1.  Container(
  2.   width: 400,
  3.   height: 600,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     repeat: ImageRepeat.repeatY,
  8.   ),
  9. ),

image.png

4. ImageRepeat.noRepeat 不重复

  1.  Container(
  2.   width: 400,
  3.   height: 400,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     repeat: ImageRepeat.noRepeat,
  8.   ),
  9. ),

image.png

11. centerSlice 通过rect确定图片的四个角的大小，这四个角保持不变，其余部位拉伸，直至填满整个控件

  1. Container(
  2.   width: 300,
  3.   height: 300,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.asset(
  6.     "image/flutter1.png",
  7.     centerSlice: Rect.fromLTRB(70, 70, 160, 160),
  8.   ),
  9. ),
  10. Text(
  11.   "原图",
  12.   style: TextStyle(
  13.     color: Colors.redAccent
  14.   ),
  15. ),
  16. Container(
  17.   width: 300,
  18.   height: 300,
  19.   color: Colors.lightGreenAccent,
  20.   child: Image.asset(
  21.     "image/flutter1.png",
  22.   ),
  23. ),

image.png

对比原图,四角没有被拉伸,中间拉伸了,一般这个属性是聊天汽包用.

12. filterQuality 设置图片的过滤质量

FilterQuality.none 最快的过滤。
FilterQuality.low 比none的过滤质量好，但是比none的时间要长。
FilterQuality.medium 比low的过滤质量好，但是也比low的时间要长
FilterQuality.high 过滤质量最高，但也最慢

2. Image.network 网络图片

  1. Container(
  2.   width: 300,
  3.   height: 300,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.network(
  6.       "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557781801455&di=17f9f2fc3ded4efb7214d2d8314e8426&imgtype=0&src=http%3A%2F%2Fimg2.mukewang.com%2F5b4c075b000198c216000586.jpg"
  7.   ),
  8. ),

image.png

3. Image.file 本地文件图片

  1. Container(
  2.   width: 300,
  3.   height: 300,
  4.   color: Colors.lightGreenAccent,
  5.   child: Image.file(
  6.      //本地图片路径
  7.      File("/Users/wei/Pictures/6036a50f4bfbfbeda345a6c174f0f736aec31f8c.jpg"),
  8.   ),
  9. ),

image.png

4. Image.memory 内存图片

Image.memory(bytes)：从内存加载显示图片
这里需要传入图片的bytes数据，类型是Uint8List