在 Flutter 中触创，提供了 Image 組件來描述圖片組件，Image 的數(shù)據(jù)源可以是靜態(tài)文件为牍、內(nèi)存以及網(wǎng)絡(luò)哼绑。
在 Image Widget 中，有一個(gè)必須的屬性 image吵聪，它對(duì)應(yīng)的是一個(gè) ImageProvider 。ImageProvider 是一個(gè)抽象類兼雄，主要定義了圖片數(shù)據(jù)獲取的接口 load()吟逝，從不同的數(shù)據(jù)源獲取圖片需要實(shí)現(xiàn)不同的 ImageProvider。
加載本地圖片
在 Flutter 中赦肋，加載本地圖片比加載網(wǎng)絡(luò)圖片還要復(fù)雜块攒。。佃乘。因?yàn)榧虞d本地圖片不僅僅是引用本地文件的資源路徑囱井，還要進(jìn)行相關(guān)的配置。
步驟一：在工程的根目錄創(chuàng)建一個(gè) images 目錄趣避，并將圖片拷貝至該目錄中庞呕。
步驟二：在 pubspec.yaml 中的 flutter 部分添加配置：
assets:
- images/space.jpg
需要注意的是 yaml 的語法，空格以及縮進(jìn)不能錯(cuò)程帕，修改配置后熱重載不會(huì)生效住练，需要重新啟動(dòng)項(xiàng)目。
步驟三：加載圖片
Image(
image: AssetImage("images/space.jpg"),
width: 100,
)
加載網(wǎng)絡(luò)圖片
轉(zhuǎn)自(https://flutterchina.club/assets-and-images/)
顯示圖片是大多數(shù)移動(dòng)應(yīng)用程序的基礎(chǔ)愁拭。Flutter提供了Image Widget來顯示不同類型的圖片讲逛。
為了處理來自URL的圖像，請(qǐng)使用Image.network構(gòu)造函數(shù)岭埠。
new Image.network(
'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg',
)
Bonus: GIF動(dòng)畫
Image Widget的一個(gè)驚艷的功能是：支持GIF動(dòng)畫盏混！
new Image.network(
'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',
);
完整的例子
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var title = 'Web Images';
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Image.network(
'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
),
),
);
}
}
占位圖過渡
當(dāng)使用默認(rèn)Image widget顯示圖片時(shí)，您可能會(huì)注意到它們?cè)诩虞d完成后會(huì)直接顯示到屏幕上惜论。這可能會(huì)讓用戶產(chǎn)生視覺突兀许赃。
相反，如果你最初顯示一個(gè)占位符馆类，然后在圖像加載完顯示時(shí)淡入图焰，那么它會(huì)不會(huì)更好？我們可以使用[FadeInImage]來達(dá)到這個(gè)目的蹦掐！
FadeInImage適用于任何類型的圖片：內(nèi)存技羔、本地Asset或來自網(wǎng)上的圖片僵闯。
在這個(gè)例子中，我們將使用transparent_image包作為一個(gè)簡單的透明占位圖藤滥。 您也可以考慮按照Assets和圖片指南使用本地資源來做占位圖鳖粟。
new FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);
完整例子
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Fade in images';
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Stack(
children: <Widget>[
new Center(child: new CircularProgressIndicator()),
new Center(
child: new FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image:
'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
),
),
],
),
),
);
}
}
使用緩存圖片
在某些情況下，在從網(wǎng)上下載圖片后緩存圖片可能會(huì)很方便拙绊，以便它們可以脫機(jī)使用向图。為此，我們可以使用cached_network_image包來達(dá)到目的标沪。
除了緩存之外榄攀，cached_image_network包在加載時(shí)還支持占位符和淡入淡出圖片！
new CachedNetworkImage(
imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);
添加一個(gè)占位符
cached_network_image包允許我們使用任何Widget作為占位符金句！在這個(gè)例子中檩赢，我們將在圖片加載時(shí)顯示一個(gè)進(jìn)度圈。
new CachedNetworkImage(
placeholder: new CircularProgressIndicator(),
imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);
完整的例子
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Cached Images';
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Center(
child: new CachedNetworkImage(
placeholder: new CircularProgressIndicator(),
imageUrl:
'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
),
),
),
);
}
}
