Flutter中，我们可以通过Image组件来加载并显示图片，Image的数据源可以是asset、文件、内存以及网络。

先上效果图如下：

下面我们分别演示一下如何从asset、文件、和网络加载图片。

1、从asset中加载图片

1. 在工程根目录下创建一个assets目录，并将图片拷贝到该目录。

1. 在pubspec.yaml文件中的flutter部分添加如下内容：

请注意空格缩进！！！

flutter:
  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/*.*
    - assets/images/image1.jpeg
    - assets/images/image2.jpeg

或者：

flutter:
  assets:
    - assets/

注：将pubspec.yaml文件中原有的assets部分解注释，然后修改成你自己的路径。

由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处assets前面应有两个空格。

1. 加载该图片

   Image(
     image: AssetImage("assets/images/image1.jpeg"),
   );

   或者：

   Image.asset("assets/images/image1.jpeg")

运行上面两个示例，图片加载成功后如下图所示：

2、从网络加载图片

Image(
  image: NetworkImage(
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566206241&di=7ac44909ccd5e1c89f63aa188e159305&imgtype=jpg&er=1&src=http%3A%2F%2Fdiy.qqjay.com%2Fu2%2F2014%2F1012%2F687570a473f4aacb5b34aa77fa746e1f.jpg"),
  width: 100.0,
)

Image也提供了一个快捷的构造函数Image.network用于从网络加载、显示图片：

Image.network(
  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566206241&di=7ac44909ccd5e1c89f63aa188e159305&imgtype=jpg&er=1&src=http%3A%2F%2Fdiy.qqjay.com%2Fu2%2F2014%2F1012%2F687570a473f4aacb5b34aa77fa746e1f.jpg",
  width: 100.0,
)

运行上面两个示例，图片加载成功后如下图所示：

3、从文件加载图片

        Image(
          image: FileImage(File(
              "/Users/maomao/Downloads/weibo_android_sdk-master/flutter_mm/assets/images/image2.jpeg")),
          width: 100.0,
          height: 80,
        ),

或者：

        Image.file(
          File(
              "/Users/maomao/Downloads/weibo_android_sdk-master/flutter_mm/assets/images/image2.jpeg"),
          width: 100.0,
          height: 80,
        ),

运行上面两个示例，图片加载成功后如下图所示：

4、参数

Image在显示图片时定义了一系列参数，通过这些参数我们可以控制图片的显示外观、大小、混合效果等。我们看一下Image的主要参数：

const Image({
  ...
  image: AssetImage("assets/images/image1.jpeg"),//加载图片的关键参数
  this.width, //图片的宽
  this.height, //图片高度
  this.color, //图片的混合色值
  this.colorBlendMode, //混合模式
  this.fit,//缩放模式
  this.alignment = Alignment.center, //对齐方式
  this.repeat = ImageRepeat.noRepeat, //重复方式
  ...
})

4.1 image

widget有一个必选的image参数，它对应一个ImageProvider。

从不同的数据源获取图片需要不同的ImageProvider，如AssetImage、NetworkImage

上面已经对AssetImage、NetworkImage进行了演示，这里不再累赘。

4.2 width、height

图片的宽、高。

当不指定宽高时，图片会根据当前父容器的限制，尽可能的显示其原始大小，如果只设置width、height的其中一个，那么另一个属性默认会按比例缩放，缩放比例可以通过下面介绍的fit属性来指定适应规则。

4.3 fit

该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。适应模式是在BoxFit中定义，它是一个枚举类型，有如下值：

效果图（借一张官网图片）：

4.4 color、colorBlendMode

• color和 colorBlendMode：在图片绘制时可以对每一个像素进行颜色混合处理，color指定混合色，而colorBlendMode指定混合模式，下面是一个简单的示例：

        Image(
          image: AssetImage("assets/images/image1.jpeg"),
          width: 100.0,
          color: Colors.blue,
          colorBlendMode: BlendMode.difference,
        ),

效果图：

混合前

混合后

4.5 repeat

• repeat：当图片本身大小小于显示空间时，指定图片的重复规则。简单示例如下：

        Image(
          image: AssetImage("assets/images/image1.jpeg"),
          width: 100.0,
          height: 150.0,
          repeat: ImageRepeat.repeatY,
        ),

效果图：

repeatY垂直平铺

5、Image缓存

Flutter框架对加载过的图片是有缓存的（内存），默认最大缓存数量是1000，最大缓存空间为100M。