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源碼