Image的用法

Flutter 提供了顯示圖片的控件Image。并且有多種構(gòu)造函數(shù)。

• new Image 從ImageProvider獲取圖片
• new Image.asset 加載asset項(xiàng)目資源中的文件
• new Image.network 從URL獲取網(wǎng)絡(luò)圖片
• new Image.file 從File獲取本地文件圖片
• new Image.memory 加載Uint8List 的圖片

圖片的支持格式：JPEG, PNG, GIF, 動(dòng)畫GIF, WebP, 動(dòng)畫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的一個(gè)參數(shù)就是ImageProvider ，是抽象類，需要自己實(shí)現(xiàn)獲取圖片數(shù)據(jù)的操作，但是SDK已經(jīng)給出了ImageProvider的子類來滿足需求，一般不使用構(gòu)造方法創(chuàng)建Image，因?yàn)槠渌膫€(gè)靜態(tài)方法分別使用到了5個(gè)子類也可以自定義。

ImageProvider.png

pubspec.yaml 中 asset 部分中的每一項(xiàng)都應(yīng)與實(shí)際文件相對(duì)應(yīng)，但主資源項(xiàng)除外。當(dāng)主資源缺少某個(gè)資源時(shí)，會(huì)按分辨率從低到高的順序去選擇，即如果 1x 中沒有的話會(huì)到 2x 中找，2x 中還沒有的話到 3x 中找。

2、Image.asset

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

圖片目錄.png

聲明.png

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

3、Image.network

直接攜帶URL參數(shù)即可

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

有的時(shí)候我們需要像Android那樣使用一個(gè)占位圖或者圖片加載出錯(cuò)時(shí)顯示某張?zhí)囟ǖ膱D片，這時(shí)候需要用到 FadeInImage 這個(gè)組件：

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

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

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

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

4、Image.file

加載本地的一個(gè)圖片文件，比如相冊(cè)的圖片

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

5、Image.memory

使用簡(jiǎn)單

    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 對(duì)齊方式

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

2、color和colorBlendMode

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

image.png

3、fit 圖片拉伸

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

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

4、repeat 是否重復(fù)

• ImageRepeat.repeat : 橫向和縱向都進(jìn)行重復(fù)，直到鋪滿整個(gè)畫布。
• ImageRepeat.repeatX: 橫向重復(fù)，縱向不重復(fù)。
• ImageRepeat.repeatY：縱向重復(fù)，橫向不重復(fù)。

5、centerSlice

當(dāng)圖片需要被拉伸顯示的時(shí)候，centerSlice定義的矩形區(qū)域會(huì)被拉伸，可以理解成我們?cè)趫D片內(nèi)部定義來一個(gè)點(diǎn)9文件用作拉伸。也就是說只有在顯示大小大于原圖大小的情況下，才允許使用這個(gè)屬性，否則會(huì)報(bào)錯(cuò)。

    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配合使用實(shí)現(xiàn)圖片反轉(zhuǎn)顯示

        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

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

補(bǔ)充

實(shí)現(xiàn)圓角

使用裁剪來實(shí)現(xiàn)圖片圓角：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),
                
              ),
            )

使用邊框來實(shí)現(xiàn)圖片圓角：

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),
              ),
            )

實(shí)現(xiàn)圓形

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, //半徑
            )