Image是一個(gè)用于展示圖片的組件谤草。支持 JPEG跟束、PNG、GIF丑孩、Animated GIF冀宴、WebP、Animated WebP温学、BMP 和 WBMP 等格式略贮。
Image 有許多的靜態(tài)函數(shù)：
- new Image.asset - 用于從資源目錄的顯示圖片。
- new Image.network - 用于從網(wǎng)絡(luò)上顯示圖片仗岖。
- new Image.file - 用于從文件里顯示圖片逃延。
- new Image.memory - 用于從內(nèi)存里（Uint8List）顯示圖片。
// 資源圖片
new Image.asset('imgs/logo.jpeg'),
//網(wǎng)絡(luò)圖片
new Image.network(
'https://flutter.io/images/homepage/header-illustration.png'),
// 本地文件圖片
new Image.file(new File("/Users/gs/Downloads/1.jpeg")),
// Uint8List圖片
new Image.memory(bytes),
//使用ImageProvider加載圖片
new Image(image: new NetworkImage("https://flutter.io/images/homepage/screenshot-2.png"))
Image 有以下常用屬性：
- alignment → AlignmentGeometry - 圖像邊界內(nèi)對(duì)齊圖像轧拄。
- centerSlice → Rect - 九片圖像的中心切片揽祥。
- color → Color - 該顏色與每個(gè)圖像像素混合colorBlendMode。
- colorBlendMode → BlendMode - 用于 color 與此圖像結(jié)合使用檩电。
- fit → BoxFit - 圖像在布局中分配的空間拄丰。
- gaplessPlayback → bool - 當(dāng)圖像提供者發(fā)生變化時(shí)，是繼續(xù)顯示舊圖像（true）還是暫時(shí)不顯示（false）俐末。
- image → ImageProvider - 要顯示的圖像料按。
- matchTextDirection → bool - 是否在圖像的方向上繪制圖像 TextDirection。
- repeat → ImageRepeat - 未充分容器時(shí)卓箫，是否重復(fù)圖片载矿。
- height → double - 圖像的高度。
- width → double - 圖像的寬度烹卒。
圓角圖片
Image 是不支持圓角和陰影的闷盔，目前可以通過(guò)使用 CircleAvatar 和 Container 實(shí)現(xiàn)。
var img = 'https://b-ssl.duitang.com/uploads/item/' +
'201602/15/20160215235057_EU3tS.thumb.700_0.jpeg';
new CircleAvatar(
backgroundImage: new NetworkImage(url),
radius: 100.0, // --> 半徑越大旅急，圖片越大
),
使用 Container 實(shí)現(xiàn)逢勾，其原理是把圖片放在 decoration 里，而不是 child 里坠非，因?yàn)榘褕D片放在 child 里并設(shè)置 borderRadius 時(shí)會(huì)出現(xiàn)一個(gè)圖片穿透的問(wèn)題敏沉，Container 還沒(méi)有 overflow 屬性果正。
new Container(
width: 200.0,
height: 200.0,
margin: const EdgeInsets.all(20.0),
decoration: new BoxDecoration(
color: Colors.white,
image: new DecorationImage(image: new NetworkImage(this.imgsrc), fit: BoxFit.cover),
shape: BoxShape.circle,
),
),
上面實(shí)現(xiàn)的都是一個(gè)圓形圖片炎码，下面的實(shí)現(xiàn)一個(gè)真正的圓角圖片盟迟。
new Container(
width: 200.0,
height: 200.0,
margin: const EdgeInsets.all(20.0),
decoration: new BoxDecoration(
color: Colors.white,
image: new DecorationImage(image: new NetworkImage(this.imgsrc), fit: BoxFit.cover),
shape: BoxShape.rectangle, // <-- 這里需要設(shè)置為 rectangle
borderRadius: new BorderRadius.all(
const Radius.circular(20.0), // <-- rectangle 時(shí)，BorderRadius 才有效
),
),
),
