1.繼承關係

Object > Diagnosticablet > DiagnosticableTreet > Widgett > StatefulWidgett > Image

2.介紹

一個顯示圖片的widget，支持圖像格式：JPEG，PNG，GIF，動畫GIF，WebP，動畫WebP，BMP和WBMP

3.創建Image

一共有五種方法:

Image()	構造方法
Image.asset	加載資源圖片
Image.file	加載本地圖片
Image.network	加載網絡圖片
Image.memory	加載Uint8List資源圖片

4.Image()

構造方法創建，構造方法：

  const Image({
    Key key,
    @required this.image,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  }) : assert(image != null),
       assert(alignment != null),
       assert(repeat != null),
       assert(filterQuality != null),
       assert(matchTextDirection != null),
       super(key: key);

下面參數詳解：

4.1 Key key

官方解釋：https://flutterchina.club/widgets-intro/#key

4.2 ImageProvider image

sdk已經給了ImageProvider的子類滿足開發使用，一般不使用構造方法創建Image，因爲其他四個靜態方法分別使用到了5個子類，進行顯示圖片！

如Image.asset使用了ExactAssetImage或者AssetImage

image = scale != null

? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)

: AssetImage(name, bundle: bundle, package: package)

4.3 String semanticLabel

圖像的語義描述，用於向Andoid上的TalkBack和iOS上的VoiceOver提供圖像描述

talkback是一款由谷歌官方開發的系統軟件,它的定位是幫助盲人或者視力有障礙的用戶提供語言輔助

Voiceover功能是APPLE公司在2009年4月新推出的一種語音輔助程序

4.4 bool excludeFromSemantics = false

是否啓用圖像的語義描述

4.5 double width

控件寬度

4.6 double height

控件高度

4.7 Color color

如果爲非null，則使用colorBlendMode將此顏色與每個圖像像素混合

4.8 BlendMode colorBlendMode

用於將color與此圖像組合。

默認爲BlendMode.srcIn。在混合模式方面，color是來源，此圖像是目的地。

在下一文章講解《Flutter BlendMode 混合模式詳解》

4.9 BoxFit fit

圖片如何在Image控件中顯示，正面列出enum BoxFit屬性：

BoxFit.fill	圖片按照指定的大小在Image中顯示，拉伸顯示圖片，不保持原比例，填滿Image
BoxFit.contain	以原圖正常顯示爲目的，如果原圖大小大於Image的size，就按照比例縮小原圖的寬高，居中顯示在Image中。如果原圖size小於Image的size，則按比例拉昇原圖的寬和高，填充Image一邊並居中顯示。
BoxFit.cover	以原圖填滿Image爲目的，如果原圖size大於Image的size，按比例縮小，居中顯示在Image上。如果原圖size小於Image的size，則按比例拉昇原圖的寬和高，填充Image居中顯示。
BoxFit.fitWidth	以原圖正常顯示爲目的，如果原圖寬大小大於（小於）Image的寬，就縮小（放大）原圖的寬與Image一致，居中顯示在Image中。
BoxFit.fitHeight	以原圖正常顯示爲目的，如果原圖高大小大於（小於）Image的高，就縮小（放大）原圖的高與Image一致，居中顯示在Image中。
BoxFit.none	保持原圖的大小，顯示在Image的中心。當原圖的size大於Image的size時，多出來的部分被截掉
BoxFit.scaleDown	以原圖正常顯示爲目的，如果原圖大小大於Image的size，就按照比例縮小原圖的寬高，居中顯示在Image中。如果原圖size小於Image的size，則不做處理居中顯示圖片。

4.10 AlignmentGeometry alignment

在《Flutter 控件之Container（容器）詳解》2.2節講解過，略

4.11 ImageRepeat repeat

當圖片沒完全覆着Image時，如何繪製未覆蓋的任何部分，默認值爲noRepeat

ImageRepeat.repeat	在x和y方向上重複圖像，直到填充框。
ImageRepeat.repeatX	在x方向上重複圖像，直到水平填充框
ImageRepeat.repeatY	在y方向重複圖像，直到垂直填充框
ImageRepeat.noRepeat	將盒子的未覆蓋部分保持透明

4.12 Rect centerSlice

指定中心區域進行九個補丁圖像，在中心切片內的圖像區域將水平和垂直拉伸，以使圖像適合其目的地。中心切片上方和下方的圖像區域將僅水平拉伸，而中心切片左側和右側的圖像區域僅垂直拉伸。

原圖118*110：

Image大小爲300*300 當 centerSlice= Rect.fromLTRB(42, 30, 80, 70) 後：

感覺沒有什麼用處？但注意的是，此值不能與fit同時設置

如何沒有理解錯的話，是實現android中的9官圖效果，centerSlice = Rect.fromLTRB(l, t, r, b),就取上圖的紅框四個角！

當然也不支持上圖那樣，左邊是分開倆處做黑邊，保留小箭頭不變形！

4.13 bool matchTextDirection = false,

官方翻譯：

是否在TextDirection的方向上繪製圖像。

如果這是真的，那麼在TextDirection.ltr上下文中，將在左上角繪製圖像（圖像的“正常”繪製方向）; 在TextDirection.rtl上下文中，圖像將在水平方向上以縮放因子-1繪製，以便原點位於右上角。

對於從左到右的區域設計的圖像，這偶爾會用於從右到左環境中的圖像。使用此功能時，請注意不要翻轉帶有整體陰影，文本或翻轉時看起來不正確的其他效果的圖像。

如果是這樣，則範圍內必須有環境 Directionality窗口小部件。

簡單來說：要與Directionality配合使用，進行圖片反轉顯示，例如：

        body: new ListView(
          children: <Widget>[
            new Directionality(
              textDirection: TextDirection.ltr, // 正常顯示
              child: image,
            ),
            new Directionality(
              textDirection: TextDirection.rtl, // 反轉顯示
              child: image,
            ),
          ],
        )

4.14 bool gaplessPlayback = false,

當圖像提供者發生變化時，是繼續顯示舊圖像，默認不顯示！

4.15 FilterQuality filterQuality

圖像過濾器的質量級別。(渲染模式的質量)

5.Image.asset

加載資源圖片,參數：

  Image.asset(String name, {
    Key key,
    AssetBundle bundle,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double scale,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    String package,
    this.filterQuality = FilterQuality.low,
  }): image = scale != null
         ? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
         : AssetImage(name, bundle: bundle, package: package)

主要解析name參數和AssetBundle類，其他與Image()構造的參數一致！

5.1 String name 本地靜態圖片

如何詳細請看中文文檔：在Flutter中添加資源和圖片

文章中沒說明白，有個坑，正面的紅框放錯到添加依賴地方去了，一直packages get不成功！

要放在最正面的flutter:下，然後參數name值就爲'images/chenlove1.jpg'

5.2 AssetBundle bundle

子類關係：

AssetBundle:應用程序使用的資源集合。

資產包包含可由應用程序使用的資源，例如圖像和字符串。對這些資源的訪問是異步的，因此可以通過網絡（例如，從NetworkAssetBundle）或從項目裏文件加載它們，而不會阻塞應用程序的用戶界面。

當不傳時，默認應用程序有一個rootBundle（PlatformAssetBundle），它包含應用程序在構建時打包的資源。

6.Image.file

加載本地圖片文件,參數:

 Image.file(File file, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  })image = FileImage(file, scale: scale)

主要解析file參數，其他與Image()構造的參數一致！

file: 對文件系統上的文件的引用。

File 實例是一個對象，它包含可以在其上執行操作的路徑。

7.Image.network

加載網絡圖片

 Image.network(String src, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
    Map<String, String> headers,
  }): image = NetworkImage(src, scale: scale, headers: headers)

主要解析src和headers參數，其他與Image()構造的參數一致！

String src ：圖片地址

Map<String, String> headers ：參數可用於通過圖像請求發送自定義HTTP標頭。

8.Image.memory

加載Uint8List資源圖片

 Image.memory(Uint8List bytes, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  })image = MemoryImage(bytes, scale: scale)

主要解析bytes參數，其他與Image()構造的參數一致！

Uint8List bytes :Uint8List獲取的ImageStream ，如sdk中從網絡轉Uint8List 源碼：

import 'dart:async';
import 'dart:io';
import 'dart:typed_data';

/// Efficiently converts the response body of an [HttpClientResponse] into a [Uint8List].
///
/// The future returned will forward all errors emitted by [response].
Future<Uint8List> consolidateHttpClientResponseBytes(HttpClientResponse response) {
  // response.contentLength is not trustworthy when GZIP is involved
  // or other cases where an intermediate transformer has been applied
  // to the stream.
  final Completer<Uint8List> completer = Completer<Uint8List>.sync();
  final List<List<int>> chunks = <List<int>>[];
  int contentLength = 0;
  response.listen((List<int> chunk) {
    chunks.add(chunk);
    contentLength += chunk.length;
  }, onDone: () {
    final Uint8List bytes = Uint8List(contentLength);
    int offset = 0;
    for (List<int> chunk in chunks) {
      bytes.setRange(offset, offset + chunk.length, chunk);
      offset += chunk.length;
    }
    completer.complete(bytes);
  }, onError: completer.completeError, cancelOnError: true);

  return completer.future;
}

9.參考：

https://docs.flutter.io/flutter/widgets/Image-class.html

https://docs.flutter.io/flutter/dart-ui/FilterQuality-class.html

sdk源碼

Flutter Image 參數詳解