上一節介紹了按鈕組件的使用，這一節將介紹圖片部件。

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——圖片

從asset中加載圖片

從網絡加載圖片

文件加載

內存中加載

cached_network_image

小結