Flutter Image（圖片）

Image是一個用於展示圖片的組件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。

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 有以下常用屬性：

• 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 實現。

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 才有效
        ),
    ),
),