Flutter Image(圖片)

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 纔有效
        ),
    ),
),
相關文章
相關標籤/搜索