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

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中加载图片

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

  assets:    - images/avatar.png

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

3. 加载该图片

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

4. 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 插件，提供了一个带有缓存功能的网络图像加载器，可以有效地加载和缓存网络图像，提高应用程序的性能并节省带宽消耗。

主要特点：

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

构造方法

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: 缓存的有效时间和无效时间。

具体使用

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

dependencies:  flutter:    sdk: flutter      cached_network_image: ^3.3.1

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

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

小结

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

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

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