大家好，我是 17。
在 Flutter 中使用圖片是最基礎能力之一。17 做了精心準備，滿滿的都是干貨！本文介紹如何在 Flutter 中使用圖片，盡量詳細，示例完整，包會！
使用網絡圖片
使用網絡圖片超級簡單，直接給出網絡地址就行，本例運行后，顯示的是一張貓頭鷹的圖片。
完整代碼，貼到 main.dart 就能用。后面的代碼只給出 image 相關的。
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
final imageSrc =
'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04ec6088c3c544a2b9459582e335483c~tplv-k3u1fbpfcp-watermark.image?';
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(child: Image.NETwork(imageSrc)),
));
}
}
圖片加載成功后，不管 http 請求頭如何，都會被緩存起來，下次請求這個圖片會直接從內存中讀取。
一般我們需要指定圖片的寬度和高度，讓它以指定的尺寸顯示，避免圖片過大撐破布局。
Image.network(imageSrc,width: 100,height: 100,)
如果提供了 cacheWidth 或 cacheHeight，則指示引擎應以指定大小解碼圖像。無論這些參數如何，圖像都將根據約束進行渲染。cacheWidth 和 cacheHeight 主要是為了減少 ImageCache 的內存使用。
cacheWidth 和 cacheHeight 是為了優化內存用的，如果你能確定網絡圖片的尺寸都是合適的尺寸，就不用設置這兩個參數。如果不能保證來源圖片的尺寸，比如可能有大尺寸的圖片，最好設置這兩個參數。這兩個參數只能優化內存占用，對下載和解碼沒有幫助。如果要優化下載，需要把圖片緩存在磁盤上，下次直接從磁盤讀取，就像 web 緩存那樣。
把網絡圖片緩存到磁盤
我們可以用 cached_network_image 這個插件實現把網絡圖片緩存到磁盤這個功能。
安裝插件
Bash
flutter pub add cached_network_image
必須的參數只有一個 imageUrl。
MaterialApp(
home: Scaffold(
body: Center(child: CachedNetworkImage(
imageUrl: imageSrc,
)),
));
cached_network_image 自帶 fadeIn 的效果，在圖片加載過程中顯示 placeholder，出現錯誤，顯示 errorWidget。
CachedNetworkImage(
imageUrl: imageSrc,
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
)
有時我們需要把圖片應用到其它 widget ，比如用在 BoxDecoration 中，這時需要提供 imageProvider。
CachedNetworkImage(
imageUrl: imageSrc,
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
colorFilter:
ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
),
),
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
還有很多參數，可以 在文檔中查看
使用 assets 圖片
assets 也可以叫做資源。資源是與您的應用程序一起捆綁和部署的文件，可在運行時訪問。常見的資源類型包括靜態數據（例如 JSON 文件）、配置文件、圖標和圖像（JPEG、WebP、GIF、動畫 WebP/GIF、PNG、BMP 和 WBMP）。
每個資源都由資源文件所在的顯式路徑（相對于 pubspec.yaml 文件）標識。聲明資源的順序無關緊要。包含資源的目錄名稱無關緊要。
在構建過程中，Flutter 將資源放入一個名為資源包的特殊存檔中，應用程序會在運行時從中讀取。
Flutter 使用位于項目根目錄的 pubspec.yaml 文件來識別應用程序所需的資源。
資源文件夾的名稱是隨意的，我們可以把資源文件夾放在和 lib 平級的根目錄下面，為圖片建立文件夾 images，把上面示例中的貓頭鷹圖片放入其中。
修改 pubspec.yaml 的配置。
flutter:
assets:
- images/owl.png
注意空格
在代碼中可以通過 images/owl.png 使用圖片。
Image.asset(
'images/owl.png',
width: 200,
height: 200,
);
運行，成功顯示了貓頭鷹的圖片。當你發布應用程序的時候，pubspec.yaml 中配置的圖片會和代碼一起打包發布。
如果有很多圖片，這樣一張一張注冊很是麻煩，我們可以直接指定文件夾。比如我們可以一次性注冊 images 文件夾下面的所有圖片。
flutter:
assets:
- images/
適配淺色與深色模式
正常情況下，我們用的是淺色模式，在弱光環境下，打開深色模式可獲得出色的視覺體驗。
構建過程支持資源變體的概念：可以在不同上下文中顯示資源的不同版本。當在 pubspec.yaml 中指定資源路徑時，構建過程會在相鄰子目錄中查找任何具有相同名稱的文件。然后，此類文件與指定資源一起包含在資源包中。
在 images 下面增加 dark 文件夾，增加在深色模式下使用的與淺色文件同名的圖片。17 的電腦屏幕截圖：
適配淺色與深色模式的工作就完成了！
images/owl.png 和 images/dark/owl.png 都包含在您的資源包中。前者被視為主要資源，而后者被視為變體。在淺色模式下，Flutter 為我們顯示顯示 images/owl.png ，在深色模式下顯示 images/dark/owl.png。
在不同的設備使用不同分辨率的圖片
Flutter 可以根據當前設備像素比加載分辨率合適的圖像。
在 image 文件夾下增加 2.0x，3.0x文件夾，放入同名的高分辨率的圖片。17 的電腦屏幕的截圖：
1.5x 文件夾也是合法的。
適合不同設備分辨率的工作就完成了！
images/2.0x/owl.png 和 images/3.0x/owl.png 都包含在您的資源包中，都被視為變體。
flutter 會自動為我們在 dpr 為 2 的設備上使用 images/2.0x/owl.png 在 dpr 為 3 的設備上使用 images/3.0x/owl.png，在 dpr 為 1 設備上使用 images/owl.png。 images/owl.png 相當于是 images/1.0x/owl.png。
dpr 為設備分辨率（device pixel ratio）英文單詞的首字母
還是一樣的代碼，現在可以適配不同 dpr 的設備！
Image.asset(
'images/owl.png',
width: 200,
height: 200,
);
關于設備 dpr 不完全匹配的處理
Flutter 以 dpr 2.0 為界，采用不同的處理方案，目的是為了得到更好的體驗。
- 2.0 以下的設備匹配分辨率更高的圖片
- 2.0 以上的設備匹配分辨率最接近的圖片
比如有一個 dpr 為 1.25 的設備，會采用 2.0 的圖片，而不是 1.0的圖片。再比如有一個 dpr 為 2.25 的設備，會采用 2.0 的圖片，而不會采用 3.0 的圖片。
忽略 dpr 信息
如果要忽略 dpr 信息直接讀取主資源（就是不帶 x.0路徑的那個），用 ExactAssetImage?？梢灾付?scale，默認為 1.0。
如果 scale 為 2.0，則意味著每個邏輯像素對應四個圖像像素?？聪聦嶋H的效果就明白了。
Column(
mainAxisSize: MainAxisSize.min,
children: [
Image(image: ExactAssetImage('images/owl.png', scale: 5)),
Image(image: ExactAssetImage('images/owl.png', scale: 10)),
],
)
scale 越大，圖片顯示的越小，因為 scale 越大，每個邏輯像素對應的圖像像素就越多。
邏輯像素，也叫 設備獨立像素(device independent pixels)，簡稱 dip ，與具體設備無關。
使用相冊圖片
先安裝插件
Bash
flutter pub add image_picker
使用相冊圖片需要兩步
- 使用 image_picker 插件從相冊中讀取圖片
- 使用 Image.file 展示圖片
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
@override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
final _picker = ImagePicker();
File? _file;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () async {
var xfile = await _picker.pickImage(
source: ImageSource.gallery,
maxWidth: 200,
maxHeight: 300,
requestFullMetadata: false);
if (xfile != null) {
setState(() {
_file = File(xfile.path);
});
}
},
child: const Text('從相冊中選擇圖片')),
if (_file != null) Image.file(_file!)
],
);
}
}
maxWidth 和 maxHeight 最好設置一下，從源頭上控制一下圖片的大小，提高效率。如果這里沒控制大小，就必須讓 Image.file 加上 cacheWidth，cacheHeight參數，因為用 Image.file 顯示的圖片也會緩存起來，需要控制緩存的圖片大小，減少內存消耗。
requestFullMetadata: false 是為了避免 IOS 閃退。requestFullMetadata: false 表示要請求完整的 metadata，需要在 info.plist（ ios / Runner 下面 ）中申請權限。
打開 info.plist 的 dict 中加入如下內容就可以了。
<key>NSPhotoLibraryUsageDescription</key>
<string>APP需要您的同意，才能使用相冊，以便于上傳，發布照片</string>
Android 不需要申請權限。
使用相機拍攝的圖片
和使用相冊圖片步驟一樣，有兩點不同
- source: ImageSource.
gallery修改為source: ImageSource.camera - 申請相機的權限
android 不需要申請權限，直接可以使用相機，ios 需要 打開 info.plist 在 dict 中加入如下內容
<key>NSCameraUsageDescription</key>
<string>APP需要您的同意，才能使用攝像頭，以便于相機拍攝，上傳、發布照片</string>
使用內存圖片
Image.memory 的必選參數 bytes 是 Uint8List 類型，base64Decode 的返回值正好是 Uint8List，我們用 Image.memory 展示一下 base64 格式的圖片。
我們得到的 base64格式的圖片可能是這樣的
imageString = 'image/jpeg;base64,/9j/4AA...'
把 image/jpeg;base64, 刪除，只保留后面的數據，這樣才能正常顯示。
引用 dart:convert 把 imageString 用 base64Decode 轉成 Uint8List 類型，Image.memory 就能顯示了。
import 'dart:convert';
Image.memory(base64Decode(imageString));
圖片用做裝飾
DecoratedBox 是專門用來做裝飾的 widget
DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('images/owl.png')),
),
child: SizedBox(
width: 100,
height: 100,
),
)
更多時候，我們可以用 Container。
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('images/owl.png'))
),
)
DecorationImage 的 image 參數類型是 ImageProvider，ImageProvider 的子類都可以用作參數。除了 AssetImage，還可以用 FileImage，MemoryImage，NetworkImage。
圖片預加載
在網頁中的輪播圖中我們一般都會做圖片的預加載，用 js 預加載圖片，避免圖片在輪播時無法顯示。Flutter 中也有輪播圖，我們也可以做類似的事情。
和 js 預加載一樣，Flutter 預加載圖片也是很簡單的。
preload(BuildContext context) {
var configuration = createLocalImageConfiguration(context);
for (var src in ['圖片地址1', '圖片地址2', '圖片地址13']) {
NetworkImage(src).resolve(configuration);
}
}
圖片什么時候加載完成不用管。Flutter 會用 NetWorkImage 做 key，緩存圖片，下次用 NetworkImage 加載同樣的圖片，無論是否加載完成，都不會再次加載。
resolve 的作用就是把加載的工作提前執行。
判斷兩個 NetWorkImage 相同，需要 url，scale 都相同，所以如果如果 scale 不同，會觸發重新加載。
bool operator ==(Object other) {
if (other.runtimeType != runtimeType) {
return false;
}
return other is NetworkImage
&& other.url == url
&& other.scale == scale;
}
centerSlice
centerSlice 用來切 9圖的。比如下面這張圖片，我們用 9 圖的方式來切圖。
這張圖是300 x 300 的圖，把它顯示成 400 x 400。我們把它分成 9 個區域。
- 區域 5 會被垂直水平拉伸
- 區域 4，6 被垂直拉伸
- 區域 2，8 被水平拉伸
- 1，3，7，9 保持原樣
Column(
mainAxisSize: MainAxisSize.min,
children: [
Image.asset("images/btn.png",width: 300,height: 300,fit: BoxFit.fill,),
Image.asset("images/btn.png",
centerSlice: Rect.fromLTRB(100, 100, 200,200),width: 400,height:400,scale: 1,)
],
);
根據 9 圖的特性，我們可以把按鈕的背景圖做 9 圖，用來容納可變化的字數，也可以把聊天用的氣泡做成 9 圖。
centerSlice 只能放大，不能縮小。
原圖是 300 x 300， centerSlice 處理后的圖只能是寬比 300 大，高也比300 大，否則報錯。
全局緩存 ImageCache 的設置
ImageCache 有兩個屬性
- maximumSize 可以獲取和設置可以緩存的圖片的最大數量，默認 1000 張。
- maximumSizeBytes 可以獲取和設置可以緩存的圖片的最大容量，默認 100M。
既然這兩個屬性可以讓我們設置，就說明在有的時候，這兩個屬性的默認值是不合適的。我們可以通過 PaintingBinding.instance.imageCache 拿到全局 ImageCache 的實例，通過PaintingBinding.instance.imageCache.currentSize 監控一下當前已經緩存的圖片數量，如果經常達到最大值，說明默認值太小，可以設置的更大些。
maximumSize 設置的數量調高需要考慮到硬件的承受能力。如果硬件條件差，反而會適得其反。這個時候非但不能加大設置，還需要減小設置。
圖片類之間的關系
如果只是想會用 Flutter Image，上面的內容就夠用了，可以跳過后面的內容。
上面講了很多，都是零散的，涉及到的類很多，難免有混亂之感，所以需要對他們之間的關系梳理一下。
Image widget 是直接給我們用的。拋開那些命名構造函數，如果我們直接用 Image，只有一個必須的參數 image，image 類型是 ImageProvider。
ImageProvider
abstract class ImageProvider<T> {
ImageStream resolve(ImageConfiguration configuration) {
// 省略
}
Future<bool> evict({ ImageCache cache,
ImageConfiguration configuration = ImageConfiguration.empty }) async {
// 省略
}
Future<T> obtainKey(ImageConfiguration configuration);
@protected
ImageStreamCompleter load(T key); // 需子類實現
}
obtainKey(ImageConfiguration) 方法
該接口主要是為了配合實現圖片緩存，不同的 key 代表不同的圖片數據緩存。ImageProvider 從數據源加載完數據后，會在全局的 ImageCache 中緩存圖片。
resolve(ImageConfiguration) 方法
ImageStream resolve(ImageConfiguration configuration) {
... //省略
final ImageStream stream = ImageStream();
T obtainedKey; //
//定義錯誤處理函數
Future<void> handleError(dynamic exception, StackTrace stack) async {
... //省略
stream.setCompleter(imageCompleter);
imageCompleter.setError(...);
}
// 創建一個新Zone，為了當發生錯誤時不會干擾 MainZone
final Zone dangerZone = Zone.current.fork(...);
dangerZone.runGuarded(() {
Future<T> key;
// 先驗證是否已經有緩存
try {
// 生成緩存key，后面會根據此key來檢測是否有緩存
key = obtainKey(configuration);
} catch (error, stackTrace) {
handleError(error, stackTrace);
return;
}
key.then<void>((T key) {
obtainedKey = key;
// 緩存的處理邏輯
final ImageStreamCompleter completer = PaintingBinding.instance
.imageCache.putIfAbsent(key, () => load(key), onError: handleError);
if (completer != null) {
stream.setCompleter(completer);
}
}).catchError(handleError);
});
return stream;
}
resolve 是 ImageProvider 對外暴露的主要方法，我們可以調用這個方法來加載圖片，Image Widget 也是調用這個方法加載圖片。
要從 ImageProvider 獲取 ImageStream，調用 resolve 并向其傳遞一個 ImageConfiguration 對象。
ImageProvider 通過 obtainKey 獲得 Key 并使用全局的 imageCache 緩存圖片。
類型參數 T 是用于表示已解析配置的對象的類型。這也是圖像緩存中用于鍵的類型。它應該是不可變的并實現 == 運算符和 hashCode getter。
AssetBundleImageProvider，FileImage，MemoryImage，NetworkImage
這四個都是 ImageProvider 的子類，AssetBundleImageProvider 又有兩個子類，AssetImage 和 ExactAssetImage，這兩個和 FileImage，MemoryImage，NetworkImage 都可以直接給 image 參數賦值。
比如我們要讀取 owl.png
Image(image: AssetImage("image/owl.png"),);
Image.asset("image/owl.png");
這兩種都能顯示 owl.png。那么有什么區別呢？我們看下 Image.asset 構造函數的源碼
Image.asset(
String name, {
省略...
}) : image = ResizeImage.resizeIfNeeded(
cacheWidth,
cacheHeight,
scale != null
? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
: AssetImage(name, bundle: bundle, package: package),
),
省略...
;
Image.asset 構造函數為我們創建了 ImageProvider。
- 如果 scale 不為空，創建 ExactAssetImage，否則創建 AssetImage
- 用 ResizeImage.resizeIfNeeded 包起來。
ResizeImage.resizeIfNeeded 執行下面的邏輯：如果 cacheWidth，cacheHeight 同時為空，直接返回原 ImageProvider，否則返回 ResizeImage。
static ImageProvider<Object> resizeIfNeeded(int? cacheWidth, int? cacheHeight, ImageProvider<Object> provider) {
if (cacheWidth != null || cacheHeight != null) {
return ResizeImage(provider, width: cacheWidth, height: cacheHeight);
}
return provider;
}
ResizeImage 在放進緩存之前，會根據 cacheWidth，cacheHeight 對圖片做優化，這對于減少內存開銷有幫助。
從以上可以看出，沒有特殊需要，我們都使用 Image.asset、Image.network、Image.file、age.memory，這四個命名構造函數。
ImageProvider 的子類還有一個 ScrollAwareImageProvider， RawImage 會調用他避免在快速滾動時加載圖像。我們一般不需要直接使用他。
本文到這里就結束了，謝謝觀看！
