上一节介绍了按钮组件的使用，这一节将介绍图片部件。

Flutter的图片部件支持JPEG、PNG、GIF、动画GIF、WebP、动画WebP、BMP、WBMP等图像格式。底层平台可能支持其他格式。Flutter将尝试调用平台API来解码无法识别的格式，如果平台API支持解码图像，Flutter将能够渲染图像。

构造方法

Image({
  Key? key,
  required ImageProvider image,
  double? width,
  double? height,
  BoxFit? fit,
  AlignmentGeometry alignment = Alignment.center,
  ImageRepeat repeat = ImageRepeat.noRepeat,
  Rect? centerSlice,
  bool matchTextDirection = false,
  bool gaplessPlayback = false,
  bool isAntiAlias = false,
  FilterQuality filterQuality = FilterQuality.low,
  Color? color,
  BlendMode? colorBlendMode,
  BoxFit? errorBuilder(BuildContext context, Object error, StackTrace? stackTrace),
  bool excludeFromSemantics = false,
  int? semanticLabel,
  bool loadingBuilder(BuildContext? context, Widget child, ImageChunkEvent? loadingProgress),
})

常用参数说明：

image: 要显示的图像。可以是网络图像、本地图像或Asset图像。
width: 图像的宽度。
height: 图像的高度。
fit: 图像的适配模式，如填充、缩放等。
alignment: 图像的对齐方式。
repeat: 图像的重复方式，如平铺、拉伸等。
color: 图像的颜色，用于着色图像。
errorBuilder: 加载图像失败时的回调函数。
loadingBuilder: 图像加载中的回调函数，可用于显示加载进度或占位符。

内置构造函数

Image.new, 用于从ImageProvider获取图像。
Image.asset, 使用key从AssetBundle获取图像。
Image.network, 用于从URL获取图像。
Image.file, 用于从文件中获取图像。
Image.memory, 用于从Uint8List中获取图像。

从asset中加载图片

在工程根目录下创建一个images目录，并将图片 avatar.png 拷贝到该目录。
在pubspec.yaml中的flutter部分添加如下内容：

  assets:
    - images/avatar.png

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

加载该图片

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

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

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

从网络加载图片

NetworkImage 可以加载网络图片，例如：

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,
)

运行上面两个示例，效果如下：

文件加载

从本地文件下加载图片，代码如下：

Image.file(File('file://test.png'))

内存中加载

有时我们图片已经加载过了，并且我们已经拿到数据信息，就没必要再加载一次了，直接加载现有的数据即可。或者是我们生成的一张图片，这时也直接加载即可。

// 内存中加载
Image.memory(memoryData)

// 定义图片数据
late Uint8List memoryData;
// 加载图片到内存中
loadAssetImage('img_02.jpeg'.img);
// 加载资源图片
Future<void> loadAssetImage(String path) async {
  var data = await rootBundle.load(path);
  memoryData = data.buffer.asUint8List();
  setState(() {});
}

cached_network_image

从网络加载图片，直接使用 Flutter 自带的 Image.network 下载图片只会缓存在内存中，如果app退出之后，下次再加载该网络图片又需要重新下载，体验和性能都不太好。

cached_network_image 是一个 Flutter 插件，提供了一个带有缓存功能的网络图像加载器，可以有效地加载和缓存网络图像，提高应用程序的性能并节省带宽消耗。

主要特点：

网络图像缓存: cached_network_image 自动将网络图像缓存在设备上，以便在后续访问时提供更快的加载速度，节省带宽消耗。
自动缓存管理: 插件会自动管理缓存大小和过期策略，确保缓存的有效性和可靠性。
支持多种图像格式: 支持加载和显示多种常见的图像格式，包括JPEG、PNG、GIF等。
加载进度指示器: 可以显示加载进度指示器，提供更好的用户体验。
错误处理: 支持处理加载图像失败的情况，可以显示占位符或错误信息。
灵活配置: 提供了丰富的参数和配置选项，可以根据应用程序的需求进行定制。

构造方法

CachedNetworkImage({
  Key? key,
  required String imageUrl,
  double? width,
  double? height,
  BoxFit? fit,
  AlignmentGeometry alignment = Alignment.center,
  Widget? placeholder,
  LoadingErrorWidgetBuilder? errorWidget,
  Duration? fadeInDuration,
  Curve fadeInCurve = Curves.easeIn,
  Duration fadeOutDuration = const Duration(milliseconds: 1000),
  Curve fadeOutCurve = Curves.easeOut,
  Widget? progressIndicator,
  ProgressIndicatorBuilder? progressIndicatorBuilder,
  double? progressIndicatorHeight,
  double? progressIndicatorWidth,
  bool useOldImageOnUrlChange = false,
  ImageRenderMethodForWeb? imageRenderMethodForWeb,
  int? memCacheWidth,
  int? memCacheHeight,
  FilterQuality? filterQuality,
  int? fadeOutDurationMs,
  int? fadeInDurationMs,
  int? maxHeightDiskCache,
  int? maxWidthDiskCache,
  bool cacheKeyIncludeUrl = true,
  BaseCacheManager? cacheManager,
  bool? ignoreMemoryCache,
  bool? ignoreDiskCache,
  ImageCacheManager? imageCacheManager,
  Duration? cacheValidTtl,
  Duration? cacheInvalidTtl,
  bool disableMemoryCache = false,
  bool disableDiskCache = false,
  Stream<FileInfo>? fileInfoStream,
  bool cacheManagerVerification,
})

主要参数：

imageUrl: 要加载的网络图像的URL。
width, height: 图像的宽度和高度。
fit: 图像的适配模式。
placeholder: 图像加载过程中显示的占位符。
errorWidget: 图像加载失败时显示的小部件。
progressIndicator: 加载进度指示器，通常用于显示加载进度。
fadeInDuration, fadeOutDuration: 图像显示和消失时的动画持续时间。
memCacheWidth, memCacheHeight: 内存缓存的宽度和高度。
cacheManager: 缓存管理器，用于管理图像的缓存。
ignoreMemoryCache, ignoreDiskCache: 是否忽略内存缓存和磁盘缓存。
cacheValidTtl, cacheInvalidTtl: 缓存的有效时间和无效时间。

具体使用

首先在 pubspec.yaml 中添加依赖：

dependencies:
  flutter:
    sdk: flutter
    
  cached_network_image: ^3.3.1

CachedNetworkImage可以直接使用，也可以通过ImageProvider使用。如下代码增加了占位图部件，如果加载图片失败之后的失败部件：

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

小结

Flutter 中的 Image 组件是用于显示图像的基础组件，具有以下特点：

多种来源: Image 可以显示多种来源的图像，包括网络图像、本地文件、Asset 图像等。
参数丰富: 支持丰富的参数配置，包括图像的大小、适配模式、对齐方式等。
灵活定制: 可以通过参数自定义图像的加载过程、错误处理、缓存策略等。
易于使用: 使用简单，只需指定图像来源并设置必要的参数即可显示图像。

cached_network_image 是一个非常有用的 Flutter 插件，可以有效地管理和加载网络图像，并提供了丰富的功能和配置选项。通过使用该插件，可以显著提高应用程序的性能和用户体验，特别是在需要频繁加载和显示网络图像的情况下。

玖叶教程网

前端编程开发入门

Flutter——图片（flutter imagepicker）

从asset中加载图片

从网络加载图片

文件加载

内存中加载

cached_network_image

小结