1.繼承關(guān)系

Object > Diagnosticablet > DiagnosticableTreet > Widgett > StatefulWidgett > Image

2.介紹

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

3.創(chuàng)建Image

一共有五種方法:

Image()????????	構(gòu)造方法
Image.asset????????	加載資源圖片
Image.file????????	加載本地圖片
Image.network????????	加載網(wǎng)絡(luò)圖片
Image.memory????????	加載Uint8List資源圖片

4.Image()????????

構(gòu)造方法創(chuàng)建，構(gòu)造方法：?

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

下面參數(shù)詳解：

4.1 Key key

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

4.2 ImageProvider image

sdk已經(jīng)給了ImageProvider的子類滿足開發(fā)使用，一般不使用構(gòu)造方法創(chuàng)建Image，因?yàn)槠渌膫€(gè)靜態(tài)方法分別使用到了5個(gè)子類，進(jìn)行顯示圖片！

?如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是一款由谷歌官方開發(fā)的系統(tǒng)軟件,它的定位是幫助盲人或者視力有障礙的用戶提供語言輔助

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

4.4 bool excludeFromSemantics = false

是否啟用圖像的語義描述

4.5 double width

控件寬度

4.6 double? height

控件高度

4.7 Color color

如果為非null，則使用colorBlendMode將此顏色與每個(gè)圖像像素混合

4.8 BlendMode colorBlendMode

用于將color與此圖像組合。

默認(rèn)為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的中心。當(dāng)原圖的size大于Image的size時(shí)，多出來的部分被截掉
BoxFit.scaleDown????????	以原圖正常顯示為目的，如果原圖大小大于Image的size，就按照比例縮小原圖的寬高，居中顯示在Image中。如果原圖size小于Image的size，則不做處理居中顯示圖片。?

4.10 ?AlignmentGeometry alignment

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

4.11 ImageRepeat repeat

當(dāng)圖片沒完全覆著Image時(shí)，如何繪制未覆蓋的任何部分，默認(rèn)值為noRepeat

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

4.12 Rect centerSlice

指定中心區(qū)域進(jìn)行九個(gè)補(bǔ)丁圖像，在中心切片內(nèi)的圖像區(qū)域?qū)⑺胶痛怪崩?#xff0c;以使圖像適合其目的地。 中心切片上方和下方的圖像區(qū)域?qū)H水平拉伸，而中心切片左側(cè)和右側(cè)的圖像區(qū)域僅垂直拉伸。

原圖118*110：

Image大小為300*300 當(dāng) centerSlice= Rect.fromLTRB(42, 30, 80, 70) 后：

感覺沒有什么用處？但注意的是，此值不能與fit同時(shí)設(shè)置

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

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

4.13 bool matchTextDirection = false,

官方翻譯：

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

如果這是真的，那么在TextDirection.ltr上下文中，將在左上角繪制圖像（圖像的“正常”繪制方向）;?在TextDirection.rtl上下文中，圖像將在水平方向上以縮放因子-1繪制，以便原點(diǎn)位于右上角。

對于從左到右的區(qū)域設(shè)計(jì)的圖像，這偶爾會用于從右到左環(huán)境中的圖像。使用此功能時(shí)，請注意不要翻轉(zhuǎn)帶有整體陰影，文本或翻轉(zhuǎn)時(shí)看起來不正確的其他效果的圖像。

如果是這樣，則范圍內(nèi)必須有環(huán)境?Directionality窗口小部件。

簡單來說：要與Directionality配合使用，進(jìn)行圖片反轉(zhuǎn)顯示，例如：

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

4.14 bool gaplessPlayback = false,

當(dāng)圖像提供者發(fā)生變化時(shí)，是繼續(xù)顯示舊圖像，默認(rèn)不顯示！

4.15 FilterQuality filterQuality

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

5.Image.asset

加載資源圖片,參數(shù)：

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參數(shù)和AssetBundle類，其他與Image()構(gòu)造的參數(shù)一致！

5.1 String name 本地靜態(tài)圖片

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

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

要放在最正面的flutter:下，然后參數(shù)name值就為'images/chenlove1.jpg'

5.2 AssetBundle bundle

子類關(guān)系：

AssetBundle:應(yīng)用程序使用的資源集合。

資產(chǎn)包包含可由應(yīng)用程序使用的資源，例如圖像和字符串。對這些資源的訪問是異步的，因此可以通過網(wǎng)絡(luò)（例如，從NetworkAssetBundle）或從項(xiàng)目里文件加載它們， 而不會阻塞應(yīng)用程序的用戶界面。

當(dāng)不傳時(shí)，默認(rèn)應(yīng)用程序有一個(gè)rootBundle（PlatformAssetBundle），它包含應(yīng)用程序在構(gòu)建時(shí)打包的資源。

6.Image.file????????

加載本地圖片文件,參數(shù):

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參數(shù)，其他與Image()構(gòu)造的參數(shù)一致！

file: 對文件系統(tǒng)上的文件的引用。

File 實(shí)例是一個(gè)對象，它包含可以在其上執(zhí)行操作的路徑。

7.Image.network????????

加載網(wǎng)絡(luò)圖片

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參數(shù)，其他與Image()構(gòu)造的參數(shù)一致！

String src ： 圖片地址

Map<String, String> headers ： 參數(shù)可用于通過圖像請求發(fā)送自定義HTTP標(biāo)頭。

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參數(shù)，其他與Image()構(gòu)造的參數(shù)一致！

Uint8List bytes :Uint8List獲取的ImageStream? ，如sdk中從網(wǎng)絡(luò)轉(zhuǎn)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源碼

總結(jié)

以上是生活随笔為你收集整理的Flutter Image 参数详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。