Flutter图片加载

Flutter中，通过Image组件来加载并显示图片,可以从asset、文件、内存以及网络获取图片，都需要实现不同的ImageProvider。

Flutter 图片加载方式:

Image()  // 通用方法，使用ImageProvider实现，如下方法本质上也是使用的这个方法
Image.asset // 加载资源图片
Image.file  // 加载本地图片文件
Image.network  // 加载网络图片
Image.memory   // 加载Uint8List资源图片

从asset中加载图片

AssetImage是实现了从Asset中加载图片的ImageProvider。

在工程根目录下创建一个images目录，并将图片avatar.png拷贝到该目录。
也可以设置其他自定义目录,如lib下面的images,方便管理。
在pubspec.yaml中的flutter部分添加如下内容：

assets:
    - images/avatar.png
    - images/a_dot_burr.jpeg
    - images/a_dot_ham.jpeg

如果不想像这样每添加一张图片都添加一条配置，直接包含某一个目录中的所有的资源，直接指定目录的名称：

assets:
    - images/

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

加载图片

Image(
  image: AssetImage("images/avatar.png"),
  width: 100.0
);

或者使用Image提供的一个快捷构造函数Image.asset用于从asset中加载图片：

Image.asset("images/avatar.png",
  width: 100.0,
)

从网络加载图片

Image(
  image: NetworkImage(
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
  width: 100.0,
)

或者使用Image提供的一个快捷的构造函数Image.network用于从网络加载图片：

Image.network(
  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
  width: 100.0,
)

注意一些点:
1.Image 的width、height参数，当不指定宽高时，图片会根据当前父容器的限制，尽可能的显示其原始大小。
如果只设置width、height的其中一个，那么另一个属性默认会按比例缩放,可以通过fit属性来指定适应规则,具体介绍参考文档。

2.Image缓存，Image加载过得图片只在内存中会有缓存，无法缓存本地。一旦应用关闭，这个缓存就没有了，下次重新启动还会从网络下载并缓存。

cached_network_image

一个用于显示来自Internet的图像并将它们保存在缓存目录中的flutter库，可以用来加载和缓存网络图像，也可以与占位符和错误小部件一起使用。

import 'package:cached_network_image/cached_network_image.dart';

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),//CircularProgressIndicator 属于cached_network_image库
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),

transparent_image

有默认占位图和淡入效果。

import 'package:transparent_image/transparent_image.dart';

FadeInImage.memoryNetwork(
    placeholder: kTransparentImage, //透明图,kTransparentImage 属于 transparent_image 库
    image: 'http://via.placeholder.com/350x150',
);

可以使用应用内的图片来做占位图:

FadeInImage.assetNetwork(
      placeholder: "lib/images/a.jpeg",
      image: "http://via.placeholder.com/350x150")

最后编辑于：2020.11.17 14:41:35