序言

上一節中，我們講了 Flutter 中 Text 組件的一些用法以及 API，本節我們繼續學習 Flutter 中的 Image 組件，同樣先上圖：

Image組件的構造方法

在 Android 中，我們都知道，圖片的顯示方式有很多，資源圖片、網絡圖片、文件圖片等等，在 Flutter 中也有多種方式，用來加載不同形式的圖片：

• Image：通過ImageProvider來加載圖片
• Image.asset：用來加載本地資源圖片
• Image.file：用來加載本地（File文件）圖片
• Image.network：用來加載網絡圖片
• Image.memory：用來加載Uint8List資源（byte數組）圖片

1、Image

Image 的一個參數是 ImageProvider，基本上所有形式的圖片加載都是依賴它，這個類里面就是實現圖片加載的原理。用法如下：

new Image(image: new AssetImage('images/logo.png'));new Image(image: new NetworkImage('http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg'))

2、Image.asset

加載一個本地資源圖片，和 Android 一樣，有多種分辨率的圖片可供選擇，但是沿襲的是 iOS 的圖片風格，分為 1x，2x，3x，具體做法是在項目的根目錄下創建兩個文件夾，如下圖所示：

然后需要在 pubspec.yaml 文件中聲明一下：

flutter:# The following line ensures that the Material Icons font is# included with your application, so that you can use the icons in# the material Icons class.uses-material-design: trueassets:- images/logo.png- images/2.0x/logo.png- images/3.0x/logo.png

用法如下：

new Image.asset('images/logo.png')

3、Image.file

加載一個本地 File 圖片，比如相冊中的圖片，用法如下

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

4、Image.network

加載一個網絡圖片，用法如下：

new Image.network('http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg')

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

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

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

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

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

5、Image.memory

用來將一個 byte 數組加載成圖片，用法如下：

new Image.memory(bytes)

Text組件的API

API名稱功能

width & height	用來指定顯示圖片區域的寬高（并非圖片的寬高）
fit	設置圖片填充，類似于Android中的ScaleType
color & colorBlendMode	這兩個屬性需要配合使用，就是顏色和圖片混合，就類似于Android中的Xfermode
alignment	用來控制圖片擺放的位置
repeat	用來設置圖片重復顯示（repeat-x水平重復，repeat-y垂直重復，repeat兩個方向都重復，no-repeat默認情況不重復）
centerSlice	設置圖片內部拉伸，相當于在圖片內部設置了一個.9圖，但是需要注意的是，要在顯示圖片的大小大于原圖的情況下才可以使用這個屬性，要不然會報錯
matchTextDirection	這個需要配合Directionality進行使用
gaplessPlayback	當圖片發生改變之后，重新加載圖片過程中的樣式（1、原圖片保留）

fit 屬性中有很多值可以設置：

屬性名稱樣式

BoxFit.contain	全圖居中顯示但不充滿，顯示原比例
BoxFit.cover	圖片可能拉伸，也可能裁剪，但是充滿容器
BoxFit.fill	全圖顯示且填充滿，圖片可能會拉伸
BoxFit.fitHeight	圖片可能拉伸，可能裁剪，高度充滿
BoxFit.fitWidth	圖片可能拉伸，可能裁剪，寬度充滿
BoxFit.scaleDown	效果和contain差不多， 但是只能縮小圖片，不能放大圖片

colorBlendMode 屬性中有很多值可以設置，由于可選值太多，這里就不一一介紹了，有興趣的可以去官網colorBlendMode屬性介紹看看

實現圓角/圓形圖片

1、圓角

很多時候我們需要給圖片設置圓角，那么在flutter中是怎么實現的呢？有很多種方法可以實現，下面我舉兩個例子：

使用裁剪來實現圖片圓角：new ClipRRect(child: Image.network(imageUrl,scale: 8.5,fit: BoxFit.cover,),borderRadius: BorderRadius.only(topLeft: Radius.circular(20),topRight: Radius.circular(20),), )使用邊框來實現圖片圓角：new Container(width: 120,height: 60,decoration: BoxDecoration(shape: BoxShape.rectangle,borderRadius: BorderRadius.circular(10.0),image: DecorationImage(image: NetworkImage(imageUrl),fit: BoxFit.cover),), )

需要注意的是，使用邊框實現的時候要注意設置 fit 屬性，不然效果也是有問題的，當然了你還可以使用 Material 組件來實現，這個大家可以自己去嘗試。

2、圓形

圓形圖片用得最多的應該是頭像之類的，這種同樣有多種方式可以實現，下面我也舉兩個例子：

使用裁剪實現圓形圖片：new ClipOval(child: Image.network(imageUrl,scale: 8.5,), )使用CircleAvatar來實現圓形圖片：new CircleAvatar(backgroundImage: NetworkImage(imageUrl),radius: 50.0, )

當然了，你還可以使用邊框 BoxDecoration 來實現，效果也是一樣的。

下面來看一下詳細的代碼實現：

class _ImageViewWidget extends State<ImageViewWidget> {var imageUrl ="http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg";var imageUrl2 ="http://n.sinaimg.cn/sports/2_img/upload/4f160954/107/w1024h683/20181128/Yrxn-hpinrya6814381.jpg";@overrideWidget build(BuildContext context) {return new Align(child: ListView(children: <Widget>[new Text('資源圖片：'),new Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[new Padding(padding: const EdgeInsets.all(10.0),child: Image.asset('images/logo.png',),), // new Image.file( // File('/storage/emulated/0/Download/test.jpg'), // width: 120, // //fill(全圖顯示且填充滿，圖片可能會拉伸)，contain（全圖顯示但不充滿，顯示原比例），cover（顯示可能拉伸，也可能裁剪，充滿） // //fitWidth（顯示可能拉伸，可能裁剪，寬度充滿），fitHeight顯示可能拉伸，可能裁剪，高度充滿），scaleDown（效果和contain差不多，但是） // ),],),new Text('網絡占位圖片CachedNetworkImage：'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Image.network(imageUrl,scale: 8.5,),new Padding(padding: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),child: CachedNetworkImage(width: 120,fit: BoxFit.fitWidth,placeholder: Image(image: AssetImage('images/logo.png')),imageUrl: imageUrl,errorWidget: new Icon(Icons.error),),),new CachedNetworkImage(imageUrl: imageUrl,width: 120,fit: BoxFit.fitWidth,placeholder: CircularProgressIndicator(),errorWidget: new Icon(Icons.error),)],),),new Text('網絡占位圖片FadeInImage：'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: new Row(children: <Widget>[new FadeInImage.memoryNetwork(placeholder: kTransparentImage,image: imageUrl,width: 120,fit: BoxFit.fitWidth,),new Padding(padding: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),child: new FadeInImage.assetNetwork(placeholder: 'images/logo.png',image: imageUrl,width: 120,fit: BoxFit.fitWidth,),),],mainAxisAlignment: MainAxisAlignment.center,),),new Text('圓形圓角圖片：'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[new ClipOval(child: Image.network(imageUrl,width: 100,height: 100,fit: BoxFit.fitHeight,),),new Padding(padding: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),child: ClipOval(child: Image.asset('images/logo.png',width: 100,height: 100,fit: BoxFit.fitHeight,),),),new ClipRRect(child: Image.network(imageUrl,scale: 8.5,fit: BoxFit.cover,),borderRadius: BorderRadius.only(topLeft: Radius.circular(20),topRight: Radius.circular(20),),)],),),new Text('顏色混合圖片：'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[new Image.asset('images/logo.png',color: Colors.red,colorBlendMode: BlendMode.darken,),new Padding(padding: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),child: Image.network(imageUrl,scale: 8.5,colorBlendMode: BlendMode.colorDodge,color: Colors.blue,),),],),),new Text('centerSlice圖片內部拉伸：'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: new Image.asset('images/logo.png',width: 250,height: 250,fit: BoxFit.contain,centerSlice:new Rect.fromCircle(center: const Offset(20, 20), radius: 1),),),new Text('matchTextDirection圖片內部方向'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[new Directionality(textDirection: TextDirection.ltr,child: Image.network(imageUrl,height: 100,matchTextDirection: true,fit: BoxFit.fitHeight,),),new Padding(padding: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),child: Directionality(textDirection: TextDirection.rtl,child: Image.network(imageUrl,height: 100,matchTextDirection: true,fit: BoxFit.fitHeight,),),),],),),new Text('點擊替換圖片'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: Row(children: <Widget>[new RaisedButton(onPressed: () {setState(() {widget.networkImage =new NetworkImage(imageUrl2, scale: 8.5);});},child: Text('點擊更換圖片'),),new Image(gaplessPlayback: false,fit: BoxFit.contain,image: widget.networkImage,),],),)],),);} }

代碼已上傳至Github

公眾號

歡迎關注我的個人公眾號【IT先森養成記】，專注大前端技術分享，包含Android，Java，Kotlin，Flutter，HTML，CSS，JS等技術；在這里你能得到的不止是技術上的提升，還有一些學習經驗以及志同道合的朋友，趕快加入我們，一起學習，一起進化吧！！！

總結

以上是生活随笔為你收集整理的Flutter组件学习（二）—— Image的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。