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)畫(huà)GIF, WebP, 動(dòng)畫(huà)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的子類來(lái)滿足需求，一般不使用構(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 中沒(méi)有的話會(huì)到 2x 中找，2x 中還沒(méi)有的話到 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è)組件：

new FadeInImage.assetNetwork(
    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è)組件，也可以自己定義；該組件也是通過(guò)緩存來(lái)加載圖片的。

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屬性用來(lái)控制圖片的拉伸和擠壓，這都是根據(jù)父容器來(lái)的。

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

4、repeat 是否重復(fù)

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

5、centerSlice

當(dāng)圖片需要被拉伸顯示的時(shí)候，centerSlice定義的矩形區(qū)域會(huì)被拉伸，可以理解成我們?cè)趫D片內(nèi)部定義來(lái)一個(gè)點(diǎn)9文件用作拉伸。也就是說(shuō)只有在顯示大小大于原圖大小的情況下，才允許使用這個(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ā)生變化后，重新加載圖片的過(guò)程中，原圖片的展示是否保留。若值為true，保留，若為false，不保留，直接空白等待下一張圖片加載。

補(bǔ)充

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

使用裁剪來(lái)實(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),
            
          ),
        )

使用邊框來(lái)實(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, //半徑
        )