博客地址：flutterall.com

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

Flutter Image的幾個構(gòu)造方法：

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

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

ImageProvider具體實現(xiàn)

下面來一一介紹

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

加載網(wǎng)絡(luò)圖片 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,
  })

此方法中固定參數(shù)為src表示圖片的URL地址,其他為可選參數(shù)。我們指定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中配置讀寫文件權(quán)限

加載資源圖片(這個比較麻煩) Image.assets
- step1
  在根目錄下創(chuàng)建assets文件夾，assets中新建images文件夾。由于Flutter加載圖片時需要2倍圖、3倍圖，默認(rèn)圖。所以需要同時新建2.0x和3.0x文件夾。（iOS中常有這種）
  
  新建文件目錄
- step2
  在pubspec.yaml配置文件中，我們可以看到添加資源文件的示例：
  
  pubspec img

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

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

step3

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

image.png

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

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

構(gòu)造方法：

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 設(shè)置圖片的填充模式，具體由BoxFit實現(xiàn)

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

width&height
指Image Widget的可顯示區(qū)域的寬高

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

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

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

BlendMode

隨便拉幾個看看

Code


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

BlendMode	效果
默認(rèn)顯示
BlendMode.colorBurn
BlendMode.screen
BlendMode.staturation

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

alignment
這個是用來調(diào)整顯示位置的，在我的之前的博客Flutter Container 中有講解過(博客的最后面文章中有講解過)。
centerSlice（Rect）
將圖片中的centerSlice區(qū)域設(shè)置為.9圖片，按照.9圖片進(jìn)行拉伸顯示。

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	效果
默認(rèn)
centerSlice處理

gaplessPlayback(bool)

英文意思是：無間隙播放

當(dāng)image provider 發(fā)生變化時，顯示新圖片的過程中，如果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,//設(shè)置圖片重復(fù)填充方式
    );
    return Scaffold(
      body: Container(
        child: img,
        constraints: BoxConstraints.expand(//對Image的約束
            width: MediaQuery.of(context).size.width,//w填充屏幕
            height: MediaQuery.of(context).size.height),//h填滿屏幕
      ),
    );
  }