Flutter Image全解析

Flutter imgae支持的圖片格式為：JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP。Flutter Image是顯示圖片的一個Widget。

Flutter Image的幾個構造方法：

方法	釋義
Image()	從ImageProvider中獲取圖片，從本質上看，下面的幾個方法都是他的具體實現。
Image.asset(String name)	從AssetBundler中獲取圖片
Image.network(String src)	顯示網絡圖片
Image.file(File file)	從File中獲取圖片
Image.memory(Uint8List bytes)	從Uint8List中顯示圖片

這里來看下繼承關系，就知道“從本質上看，下面的幾個方法都是他的具體實現”的意思了。

 

ImageProvider具體實現

下面來一一介紹

加載圖片的幾種基本使用方式

• 加載網絡圖片 Image.network

Image.network(String src, { Key key, double scale = 1.0, this.semanticLabel, this.excludeFromSemantics = false, this.width, this.height, this.color, this.colorBlendMode, this.fit, this.alignment = Alignment.center, this.repeat = ImageRepeat.noRepeat, this.centerSlice, this.matchTextDirection = false, this.gaplessPlayback = false, this.filterQuality = FilterQuality.low, Map<String, String> headers, }) 

此方法中固定參數為src表示圖片的URL地址,其他為可選參數。我們指定src來加載顯示圖片。

Image.network("https://upload.jianshu.io/users/upload_avatars/3884536/d847a50f1da0.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240") 

 

image.png

• 加載File圖片 Image.file

Image.file(File file, { Key key, double scale: 1.0, String semanticLabel, bool excludeFromSemantics: false, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false, FilterQuality filterQuality: FilterQuality.low }) 

Image.file(File("/sdcard/flutter.jpeg")) 

注意在AndroidManifest.xml中配置讀寫文件權限

• 加載資源圖片(這個比較麻煩) Image.assets

  • step1
    在根目錄下創建assets文件夾，assets中新建images文件夾。由於Flutter加載圖片時需要2倍圖、3倍圖，默認圖。所以需要同時新建2.0x和3.0x文件夾。（iOS中常有這種）

    
    
     

    

    新建文件目錄

  • step2
    在pubspec.yaml配置文件中，我們可以看到添加資源文件的示例：

    
    
     

    

    pubspec img

assets: - assets/images/flutter.jpeg - assets/images/flutter2.jpeg 

yaml是類似於xml的一種標記性語言，其中“-”表示數組。在這里，我們也可以使用下面的寫法，加載整個資源文件圖片：
assets:
- assets/images/

• step3

當我們修改了pubspec.yaml配置文件后，切換到我們的dart文件中，可以看到下圖標記的提示，點擊后，就可以應用我們的資源文件了。

 

image.png

使用資源圖片文件(填入圖片的全路徑即可)：

Image.asset("assets/images/flutter.jpeg") 

構造方法：

Image({ Key key, @required this.image, this.semanticLabel, this.excludeFromSemantics = false, this.width, this.height, this.color, this.colorBlendMode, this.fit, this.alignment = Alignment.center, this.repeat = ImageRepeat.noRepeat, this.centerSlice, this.matchTextDirection = false, this.gaplessPlayback = false, this.filterQuality = FilterQuality.low, }) 

屬性

• semanticLabel 用來描述圖片的，無足輕重
• fit 設置圖片的填充模式，具體由BoxFit實現

屬性	釋義	顯示
BoxFit.contain	顯示整張圖片，按照原始比例縮放顯示
BoxFit.fill	顯示整張圖片，拉伸填充全部可顯示區域
BoxFit.cover	按照原始比例縮放，可能裁剪，填滿可顯示區域
BoxFit.fitHeight	按照原始比例縮放，可能裁剪，高度優先填滿
BoxFit.fitWidth	按照原始比例縮放，可能裁剪寬度優先填滿
BoxFit.none	圖片居中顯示，不縮放原圖，可能被裁剪
BoxFit.scaleDown	顯示整張圖片，只能縮小或者原圖顯示

• width&height
  指Image Widget的可顯示區域的寬高

Image Widget 是顯示image的一個載體，一個組件。Image Widget跟image是兩個概念，各有各的寬高區域。

• color(Color) & colorBlendMode(BlendMode)
  對圖片進行混合顏色處理

BlendMode是一個枚舉類，有多種枚舉值

 

BlendMode

 

隨便拉幾個看看

Code

Image.network( "http://img2018.cnblogs.com/news/66372/201809/66372-20180921155512352-228425089.jpg", color: Colors.blue, colorBlendMode: BlendMode.saturation, ) 

BlendMode	效果
默認顯示
BlendMode.colorBurn
BlendMode.screen
BlendMode.staturation

還有很多絢麗的效果，大家自己慢慢看吧~

• alignment
  這個是用來調整顯示位置的，在我的之前的博客Flutter Container 中有講解過(博客的最后面文章中有講解過)。

• centerSlice（Rect）
  將圖片中的centerSlice區域設置為.9圖片，按照.9圖片進行拉伸顯示。

Code

Image.network( "https://upload.jianshu.io/users/upload_avatars/3884536/d847a50f1da0.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240", width: 400, height: 400, fit: BoxFit.contain, centerSlice: Rect.fromLTWH(10, 10, 10, 10), ) 

Rect	效果
默認
centerSlice處理

• gaplessPlayback(bool)

英文意思是：無間隙播放

當image provider 發生變化時，顯示新圖片的過程中，如果true則保留舊圖片直至顯示出新圖片為止；如果false，則顯示新圖片的過程中，空白，不保留舊圖片。

• matchTextDirection
  
   

  

  image.png

matchTextDirection一般和TextDirection搭配使用

Code：

var img = Image.network( "https://upload-images.jianshu.io/upload_images/3884536-0a4766ccd55f287a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240", matchTextDirection: false, ); var center = Center( child: ListView( children: <Widget>[ Directionality( textDirection: TextDirection.ltr,//left to right child: img, ), Directionality( textDirection: TextDirection.rtl,//right to left child: img, ) ], )); return Scaffold( body: center, ); 

matchTextDirection	效果
false
true

• repeat(ImageRepeat)

code

@override Widget build(BuildContext context) { var img = Image.network( "https://upload.jianshu.io/users/upload_avatars/3884536/d847a50f1da0.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240", repeat: ImageRepeat.repeat,//設置圖片重復填充方式 ); return Scaffold( body: Container( child: img, constraints: BoxConstraints.expand(//對Image的約束 width: MediaQuery.of(context).size.width,//w填充屏幕 height: MediaQuery.of(context).size.height),//h填滿屏幕 ), ); } 

ImageRepeat	效果
ImageRepeat.noRepeat
ImageRepeat.repeat
ImageRepeat.repeatX
ImageRepeat.repeatY

好了，到這里終於把Image Widget的常用方法以及屬性講完了，下文見。

作者：徐愛卿