Image是一個用於展現圖片的組件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。python
Image 有許多的靜態函數:網絡
- new Image.asset - 用於從資源目錄的顯示圖片。
- new Image.network - 用於從網絡上顯示圖片。
- new Image.file - 用於從文件裏顯示圖片。
- new Image.memory - 用於從內存裏(Uint8List)顯示圖片。
// 資源圖片 new Image.asset('imgs/logo.jpeg'), //網絡圖片 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 有如下經常使用屬性:less
- alignment → AlignmentGeometry - 圖像邊界內對齊圖像。
- centerSlice → Rect - 九片圖像的中心切片。
- color → Color - 該顏色與每一個圖像像素混合colorBlendMode。
- colorBlendMode → BlendMode - 用於 color 與此圖像結合使用。
- fit → BoxFit - 圖像在佈局中分配的空間。
- gaplessPlayback → bool - 當圖像提供者發生變化時,是繼續顯示舊圖像(true)仍是暫時不顯示(false)。
- image → ImageProvider - 要顯示的圖像。
- matchTextDirection → bool - 是否在圖像的方向上繪製圖像 TextDirection。
- repeat → ImageRepeat - 未充分容器時,是否重複圖片。
- height → double - 圖像的高度。
- width → double - 圖像的寬度。
圓角圖片
Image 是不支持圓角和陰影的,目前能夠經過使用 CircleAvatar 和 Container 實現。ide
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 實現,其原理是把圖片放在 decoration 裏,而不是 child 裏,由於把圖片放在 child 裏並設置 borderRadius 時會出現一個圖片穿透的問題,Container 尚未 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, ), ),
上面實現的都是一個圓形圖片,下面的實現一個真正的圓角圖片。佈局
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, // <-- 這裏須要設置爲 rectangle borderRadius: new BorderRadius.all( const Radius.circular(20.0), // <-- rectangle 時,BorderRadius 纔有效 ), ), ),