08*：flutter之Image：（Image、Image.network）

問題

 

目錄

1：構造器

2：屬性詳解

預備

 

正文

1：構造器

一、構造函數
const Image({
    Key key,
    @required this.image,
    this.frameBuilder,
    this.loadingBuilder,
    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,
  }) : assert(image != null),
       assert(alignment != null),
       assert(repeat != null),
       assert(filterQuality != null),
       assert(matchTextDirection != null),
       super(key: key);

二、命名構造函數
// 2.1 用於創建來自網絡的圖片
Image.network(
    String src, {
    Key key,
    double scale = 1.0,
    this.frameBuilder,
    this.loadingBuilder,
    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,
  }) : image = NetworkImage(src, scale: scale, headers: headers),
       assert(alignment != null),
       assert(repeat != null),
       assert(matchTextDirection != null),
       super(key: key);
// 2.2 創建來自文件為圖片
Image.file(
    File file, {
    Key key,
    double scale = 1.0,
    this.frameBuilder,
    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,
  }) : image = FileImage(file, scale: scale),
       loadingBuilder = null,
       assert(alignment != null),
       assert(repeat != null),
       assert(filterQuality != null),
       assert(matchTextDirection != null),
       super(key: key);
// 2.3 創建來自asset的圖片
Image.asset(
    String name, {
    Key key,
    AssetBundle bundle,
    this.frameBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double scale,
    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,
    String package,
    this.filterQuality = FilterQuality.low,
  }) : image = scale != null
         ? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
         : AssetImage(name, bundle: bundle, package: package),
       loadingBuilder = null,
       assert(alignment != null),
       assert(repeat != null),
       assert(matchTextDirection != null),
       super(key: key);
// 2.4 創建來自內存的圖片
Image.memory(
    Uint8List bytes, {
    Key key,
    double scale = 1.0,
    this.frameBuilder,
    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,
  }) : image = MemoryImage(bytes, scale: scale),
       loadingBuilder = null,
       assert(alignment != null),
       assert(repeat != null),
       assert(matchTextDirection != null),
       super(key: key);

 ImageProvider image

要顯示的圖片。

1. AssetImage(‘assets/images/lake.jpg’): 獲取來自assets的圖片;
2. NetworkImage(‘http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg’)：獲取來自網絡的圖片
3. FileImage(File(’/Users/maxlz/Desktop/StudyData/Flutter/flutterdemo/assets/images/lake.jpg’))：加載來自文件的圖片

使用資源圖片前必做兩個步驟：

1、在根目錄下創建子目錄，子目錄中創建2.0x和3.0x（也可以創建4.0x、5.0x... 但是2.0和3.0是必須的）目錄，在對應目錄中添加對應分辨率圖片。（圖1）

2、打開pubspec.yaml文件， 配置圖片源。（圖2）

     

2：屬性詳解

屬性	說明
image	Image.asset:加載資源圖片       不支持 熱加載 Image.file:加載本地圖片 Image.network:加載網絡圖片 Image.memory:加載Uint8List資源圖片
semanticLabel	圖像的語義描述。
excludeFromSemantics	默認false  是否啟用圖像的語義描述
width	寬度 一般結合 ClipOval 才能看到效果
height	高度 一般結合 ClipOval 才能看到效果
color	背景色
colorBlendMode	使圖像與背景色混合 模式 混合模式很多，這里就不多介紹了，具體看官網BlendMode
fit	BoxFit.fill:全圖顯示，圖片會被拉伸，並充滿父容器。 BoxFit.contain:全圖顯示，顯示原比例，可能會有空隙。 BoxFit.cover：顯示可能拉伸，可能裁切，充滿（充滿容器不變形）。 BoxFit.fitWidth：寬度充滿（橫向充滿），顯示可能拉伸，可能裁切。 BoxFit.fitHeight ：高度充滿（豎向充滿）,顯示可能拉伸，可能裁切。 BoxFit.scaleDown：效果和 contain 差不多，但是此屬性不允許顯示超過源圖片大小，可小不可大。
alignment	對齊方式
repeat	平鋪 ImageRepeat.repeat : 橫向和縱向都進行重復，直到鋪滿整個畫布。 ImageRepeat.repeatX: 橫向重復，縱向不重復。 ImageRepeat.repeatY：縱向重復，橫向不重復。
centerSlice	設定拉伸部位，不能和fit一同使用 圖片大於等於容器時 屬性無效
matchTextDirection	默認false   官方翻譯：是否在TextDirection的方向上繪制圖像。
gaplessPlayback	默認false 官方翻譯：當圖像提供者發生變化時，是繼續顯示舊圖像，默認不顯示！
filterQuality	默認FilterQuality.low 官方翻譯：圖像過濾器的質量級別。(渲染模式的質量)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

代碼示例

child: Container(
        //設置容器大小
        width: 320.0, 
        height: 203.0, 
        decoration: BoxDecoration(
          //背景色
          color: Colors.yellow
        ),
        /*
        加載資源圖片
        child: Image.asset('images/aa.jpg'),
        */
 
        /*
        加載網絡圖片
        child: Image.network(
          'https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/ba.jpg',
        ),
        */
        
        /*
        圖片混合藍色
        child: Image.network(
          'https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/ba.jpg',
          color: Colors.blue,
          colorBlendMode: BlendMode.colorDodge,
        ),
        */
 
        /*
        圖片平鋪
        child: Image.network(
          'https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/bc.jpg',
          repeat: ImageRepeat.repeat,
        ),
        */
 
        /*
        設定拉伸部位
        child: Image.network(
          'https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/bc.jpg',
          centerSlice:Rect.fromLTRB(10, 11, 12, 13),
        ),
        */
         
        // 圓形圖片
        child: ClipOval(
              child:Image.network(
                'https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/a.jpg',
                height: 100,
                width: 100,
                fit: BoxFit.cover,
              ),
            ),
      ), 

圖片混合藍色

圖片平鋪

設定拉伸部位

注意

 

引用

1：【Flutter】三、Flutter之圖片

2：Flutter Image圖片顯示