Image的用法
Flutter 提供了顯示圖片的控件Image。并且有多種構(gòu)造函數(shù)。
- new Image 從ImageProvider獲取圖片
- new Image.asset 加載asset項目資源中的文件
- new Image.network 從URL獲取網(wǎng)絡(luò)圖片
- 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的一個參數(shù)就是ImageProvider ，是抽象類，需要自己實現(xiàn)獲取圖片數(shù)據(jù)的操作，但是SDK已經(jīng)給出了ImageProvider的子類來滿足需求，一般不使用構(gòu)造方法創(chuàng)建Image，因為其他四個靜態(tài)方法分別使用到了5個子類也可以自定義。
pubspec.yaml 中 asset 部分中的每一項都應(yīng)與實際文件相對應(yīng)，但主資源項除外。當(dāng)主資源缺少某個資源時，會按分辨率從低到高的順序去選擇，即如果 1x 中沒有的話會到 2x 中找，2x 中還沒有的話到 3x 中找。
2、Image.asset
首先在項目根目錄下創(chuàng)建image文件夾,支持多種分辨率供選擇，放入圖片
然后，打開pubspec.yaml 聲明一下添加的圖片文件
最后，在代碼中就可以用了
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')
有的時候我們需要像Android那樣使用一個占位圖或者圖片加載出錯時顯示某張?zhí)囟ǖ膱D片，這時候需要用到 FadeInImage 這個組件：
placeholder: 'images/logo.png',
image: imageUrl,
width: 120,
fit: BoxFit.fitWidth,
)
new FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: imageUrl,
width: 120,
fit: BoxFit.fitWidth,
)
第一種方法是加載一個本地的占位圖，第二種是加載一個透明的占位圖，但是需要注意的是，這個組件是不可以設(shè)置加載出錯顯示的圖片的；但是我們還可以使用第三中方法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, 為混合模式的意思。有下面模式
3、fit 圖片拉伸
fit屬性用來控制圖片的拉伸和擠壓，這都是根據(jù)父容器來的。
- BoxFit.fill:全圖顯示，圖片會被拉伸，并充滿父容器。
- BoxFit.contain:全圖顯示，顯示原比例，可能會有空隙。
- BoxFit.cover：顯示可能拉伸，可能裁切，充滿（圖片要充滿整個容器，還不變形）。
- BoxFit.fitWidth：寬度充滿（橫向充滿），顯示可能拉伸，可能裁切。
- BoxFit.fitHeight ：高度充滿（豎向充滿）,顯示可能拉伸，可能裁切。
- BoxFit.scaleDown：效果和contain差不多，但是此屬性不允許顯示超過源圖片大小，可小不可大。
4、repeat 是否重復(fù)
- ImageRepeat.repeat : 橫向和縱向都進行重復(fù)，直到鋪滿整個畫布。
- ImageRepeat.repeatX: 橫向重復(fù)，縱向不重復(fù)。
- ImageRepeat.repeatY：縱向重復(fù)，橫向不重復(fù)。
5、centerSlice
當(dāng)圖片需要被拉伸顯示的時候，centerSlice定義的矩形區(qū)域會被拉伸，可以理解成我們在圖片內(nèi)部定義來一個點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配合使用實現(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'),
)
7、gaplessPlayback
當(dāng)ImageProvider發(fā)生變化后，重新加載圖片的過程中，原圖片的展示是否保留。若值為true，保留，若為false，不保留，直接空白等待下一張圖片加載。
補充
實現(xiàn)圓角
使用裁剪來實現(xiàn)圖片圓角：ClipRRect 控件
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),
),
)
使用邊框來實現(xiàn)圖片圓角：
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),
),
)
實現(xiàn)圓形
new ClipOval(
child: Image.asset('images/dress.png',
width: 200,
height: 200,
),
)
new CircleAvatar(
backgroundImage: AssetImage('images/dress.png'),
radius: 80.0, //半徑
)
