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 参数详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。