Image的用法

Flutter 提供了顯示圖片的控件Image。并且有多種構造函數。

• new Image 從ImageProvider獲取圖片
• new Image.asset 加載asset項目資源中的文件
• new Image.network 從URL獲取網絡圖片
• new Image.file 從File獲取本地文件圖片
• new Image.memory 加載Uint8List 的圖片

圖片的支持格式：JPEG, PNG, GIF, 動畫GIF, WebP, 動畫WebP, BMP, WBMP

1、Image

用法

    new Image(image: new AssetImage('images/logo.png'));
    new Image(image: new NetworkImage('http://www.baid.com/sports/201/pKtl744393.jpg'))

Image的一個參數就是ImageProvider ，是抽象類，需要自己實現獲取圖片數據的操作，但是SDK已經給出了ImageProvider的子類來滿足需求，一般不使用構造方法創建Image，因為其他四個靜態方法分別使用到了5個子類也可以自定義。

ImageProvider.png

pubspec.yaml 中 asset 部分中的每一項都應與實際文件相對應，但主資源項除外。當主資源缺少某個資源時，會按分辨率從低到高的順序去選擇，即如果 1x 中沒有的話會到 2x 中找，2x 中還沒有的話到 3x 中找。

2、Image.asset

首先在項目根目錄下創建image文件夾,支持多種分辨率供選擇，放入圖片

圖片目錄.png

聲明.png

    Image.asset('images/progress.gif',width: 300,height: 200,)

3、Image.network

直接攜帶URL參數即可

    new Image.network('http://www.baidu.com/sports/img//ddd.jpg')

有的時候我們需要像Android那樣使用一個占位圖或者圖片加載出錯時顯示某張特定的圖片，這時候需要用到 FadeInImage 這個組件：

        placeholder: 'images/logo.png',
        image: imageUrl,
        width: 120,
        fit: BoxFit.fitWidth,
    )
    new FadeInImage.memoryNetwork(
        placeholder: kTransparentImage,
        image: imageUrl,
        width: 120,
        fit: BoxFit.fitWidth,
    )

第一種方法是加載一個本地的占位圖，第二種是加載一個透明的占位圖，但是需要注意的是，這個組件是不可以設置加載出錯顯示的圖片的；但是我們還可以使用第三中方法package 的 CachedNetworkImage 組件

new CachedNetworkImage(
        width: 120,
        fit: BoxFit.fitWidth,
        placeholder: new CircularProgressIndicator(),
        imageUrl: imageUrl,
        errorWidget: new Icon(Icons.error),
  )

CachedNetworkImage 組件中的占位圖是一個 Widget，這樣的話就可以自定義了，你想使用什么樣的組件進行占位都行，同樣加載出錯的占位圖也是一個組件，也可以自己定義；該組件也是通過緩存來加載圖片的。

4、Image.file

加載本地的一個圖片文件，比如相冊的圖片

    new Image.file(new File('/storage/xxx/xxx/test.jpg'))

5、Image.memory

使用簡單

    new Image.memory(bytes),

Image的常用屬性

    child: new Image.asset(
          'images/2-normal.png',
          alignment: Alignment.center,
          color: Colors.green,
          colorBlendMode: BlendMode.dstATop,
          fit: BoxFit.contain,
        ),

1、alignment 對齊方式

• topCenter：頂部居中對齊
• topLeft：頂部左對齊
• topRight：頂部右對齊
• center：水平垂直居中對齊
• centerLeft：垂直居中水平居左對齊
• centerRight：垂直居中水平居右對齊
• bottomCenter底部居中對齊
• bottomLeft：底部居左對齊
• bottomRight：底部居右對齊

2、color和colorBlendMode

一般配合使用，BlendMode, 為混合模式的意思。有下面模式

image.png

3、fit 圖片拉伸

fit屬性用來控制圖片的拉伸和擠壓，這都是根據父容器來的。

• BoxFit.fill:全圖顯示，圖片會被拉伸，并充滿父容器。
• BoxFit.contain:全圖顯示，顯示原比例，可能會有空隙。
• BoxFit.cover：顯示可能拉伸，可能裁切，充滿（圖片要充滿整個容器，還不變形）。
• BoxFit.fitWidth：寬度充滿（橫向充滿），顯示可能拉伸，可能裁切。
• BoxFit.fitHeight ：高度充滿（豎向充滿）,顯示可能拉伸，可能裁切。
• BoxFit.scaleDown：效果和contain差不多，但是此屬性不允許顯示超過源圖片大小，可小不可大。

4、repeat 是否重復

• ImageRepeat.repeat : 橫向和縱向都進行重復，直到鋪滿整個畫布。
• ImageRepeat.repeatX: 橫向重復，縱向不重復。
• ImageRepeat.repeatY：縱向重復，橫向不重復。

5、centerSlice

當圖片需要被拉伸顯示的時候，centerSlice定義的矩形區域會被拉伸，可以理解成我們在圖片內部定義來一個點9文件用作拉伸。也就是說只有在顯示大小大于原圖大小的情況下，才允許使用這個屬性，否則會報錯。

    Image image = new Image.asset(
        'imgs/logo.jpeg',
        width: 500.0,
        height: 500.0,
        fit: BoxFit.contain,
        centerSlice: new Rect.fromCircle(center: const Offset(100.0, 100.0), radius: 10.0 ),
    );

6、matchTextDirection

與Directionality配合使用實現圖片反轉顯示

        new Directionality(
              textDirection: TextDirection.rtl,
              child: Image.asset(
                'images/dress.png',
                width: 800,
                height: 900,
                matchTextDirection: true,
              ),
            )
        Image(
              image: new AssetImage('images/dress.png'),
        )

image.png

7、gaplessPlayback

當ImageProvider發生變化后，重新加載圖片的過程中，原圖片的展示是否保留。若值為true，保留，若為false，不保留，直接空白等待下一張圖片加載。

補充

實現圓角

使用裁剪來實現圖片圓角：ClipRRect 控件

image.png

       new ClipRRect(
              child: new Directionality(
                textDirection: TextDirection.rtl,
                child: Image.asset(
                  'images/dress.png',
                  matchTextDirection: true,
                ),
              ),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
                
              ),
            )

使用邊框來實現圖片圓角：

image.png

           new Container(
              width: 300,
              height: 200,
              decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                borderRadius: BorderRadius.circular(10.0),
                image: DecorationImage(
                    image: new AssetImage('images/dress.png'),
                    fit: BoxFit.cover),
              ),
            )

實現圓形

image.png

    new ClipOval(
              child:  Image.asset('images/dress.png',
                width: 200,
                height: 200,
              ),
            )

image.png

    new CircleAvatar(
              backgroundImage: AssetImage('images/dress.png'),
              radius: 80.0, //半徑
            )