Flutter 學習 - Widget 之 Image和Icon

前言

前面的文章中我們介紹了文字展示Widget，在實際的開發中我們不僅僅只會用文字進行內容展示，還會用到很直觀的內容控件 - 圖片，在Flutter中圖片的展示Widget有兩個：Image和Icon，下面我們來逐個介紹這兩個Widget。

1、使用 - Image

加載本地資源

• 在Flutter工程的根目錄下創建一個images目錄(名字可以隨意，images比較直觀)，然後將你需要展示的圖片添加到這個目錄下，如圖
• 打開pubspec.yml，在flutter中添加圖片的配置信息:如果只是添加一張圖片：

flutter:
  uses-material-design: true
  assets:
    - images/flutter_demo.jpeg

或者我們有多張圖片要添加的時候可以把整個目錄配置上，就不需要一張張的添加圖片了

flutter:
  uses-material-design: true
  assets:
    - images/

注：這裏一定要注意一點，此處有深坑

填坑：這裏需要注意assets的縮進位置，一定要在flutter:的下級，切記切記！！！

• 在代碼中使用的時候就只需要傳如圖片的路徑就可以了：

Image.asset(
    "images/flutter_demo.jpeg",
),

效果如下

源碼分析

下面來看下Image的源碼，可以看到，Image一共提供了5種構造函數，除了默認的，還有其他4種命名構造函數，我們在實際使用時一般使用的是後面4種命名構造函數，也代表了不同的圖片來源：

class Image extends StatefulWidget {
   final ImageProvider image;
  const Image({ 
    @required this.image,
    ...
  }) : assert(image != null),
        ...;
/**
 * 從網絡加載顯示圖片 這裏需要傳入圖片的地址 src
 */
  Image.network(
    String src, {
    ...
  }) : image = NetworkImage(src, scale: scale, headers: headers),
       ...;
  /**
 * 從本地文件加載顯示圖片，這裏需要傳入圖片的本地地址
 */  
  Image.file(
    File file, {
    ...
  }) : image = FileImage(file, scale: scale),
      ...;
 /**
 * 從Flutter 項目的資源文件里加載顯示圖片
 * 這裏需要傳入Flutter 項目圖片資源文件的路徑及圖片名字（在.yaml中聲明的）
 */     
  Image.asset(
    String name, {
    ...
  }) : image = scale != null
         ? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
         : AssetImage(name, bundle: bundle, package: package),
      ...;
  /**
 * 從內存加載顯示圖片，
 * 這裏需要傳入圖片的bytes數據，類型是Uint8List
 */    
  Image.memory(
    Uint8List bytes, {
    ...
  }) : image = MemoryImage(bytes, scale: scale),
        ...;
       
}

下面來看下5個構造函數中的參數，這5個構造函數，參數略有差異，但是大部分相同，我們先看下相同的部分，這些參數都是可選的

參數名字	參數類型	參數含義
key	Key	Widget 的標識
scale	double	圖形顯示的比例
semanticsLabel	String	給 Image 加上一個語義標籤
width	double	圖片的寬
height	double	圖片的高
matchTextDirection	bool	圖片的繪製方向，true:從左往右，false:從右往左
gaplessPlayback	bool	當圖像提供者更改時，true：繼續顯示舊圖像，false：簡單地顯示任何內容
excludeFromSemantics	bool	是否將圖像從語義中排除，用於不提供有意義信息的圖像
color	Color	圖片的混合色值
colorBlendMode	BlendMode	圖片與顏色的混合模式
fit	BoxFit	用於在圖片的顯示空間和圖片本身大小不同時指定圖片的適應模式
alignment	Alignment	圖片的對齊方式
repeat	ImageRepeat	當圖片本身大小小於顯示空間時，指定圖片的重複規則
centerSlice	Rect	在這個矩形範圍內的圖片會被當成.9的圖片
filterQuality	FilterQuality	設置圖片的過濾質量
frameBuilder	ImageFrameBuilder	可以使用這個構建器添加動效（如淡入效果）或者佔位符
loadingBuilder	ImageLoadingBuilder	圖片加載的進度構建器

下面來看看其他命名構造函數中的額外字段

• Image

const Image({
    @required this.image,//需要展示的圖片資源
  }) 

• Image.network

Image.network(
    String src, { //圖片的URL地址
    Map<String, String> headers,//用於在圖像請求的時候發送自定義Http header 
  })

• Image.file

Image.file(
    File file, {//需要展示的手機中的圖片文件，注意在Android上運行時需要添加"android.permission.READ_EXTERNAL_STORAGE"權限
  })

-Image.asset

Image.asset(
    String name, {//項目中資源文件的圖片路徑
    AssetBundle bundle,//加載資源功能類
    String package, //使用包中的資源文件的時候這個參數不能爲空，需要把對應的包名加上
  }) 

• Image.memory

Image.memory(
    Uint8List bytes, {//這裏需要傳入圖片的bytes數據，類型是Uint8List
  })

接下來我們來看看在加載圖片的時候有用到哪些新的數據類型（只說幾個常用的）

• BoxFit ：用於在圖片的顯示空間和圖片本身大小不同時指定圖片的適應模式。

enum BoxFit {
  fill,//會拉伸填充滿顯示空間，圖片本身長寬比會發生變化，圖片會變形。
  contain,//會按圖片的長寬比放大後居中填滿顯示空間，圖片不會變形，超出顯示空間部分會被剪裁。
  cover,//這是圖片的默認適應規則，圖片會在保證圖片本身長寬比不變的情況下縮放以適應當前顯示空間，圖片不會變形。
  fitWidth,//圖片的寬度會縮放到顯示空間的寬度，高度會按比例縮放，然後居中顯示，圖片不會變形，超出顯示空間部分會被剪裁。
  fitHeight,//圖片的高度會縮放到顯示空間的高度，寬度會按比例縮放，然後居中顯示，圖片不會變形，超出顯示空間部分會被剪裁。
  scaleDown,//對齊目標框內的源（默認情況下，居中），並在必要時縮小源以確保源適合框內。這與contains相同，如果這會縮小圖像，否則它與none相同。
  none,//圖片沒有適應策略，會在顯示空間內顯示圖片，如果圖片比顯示空間大，則顯示空間只會顯示圖片中間部分
}

• Alignment ：圖片的對齊方式

class Alignment extends AlignmentGeometry {
   ///左上對齊
  static const Alignment topLeft = Alignment(-1.0, -1.0);
  ///上部居中對齊
  static const Alignment topCenter = Alignment(0.0, -1.0);
  ///右上對齊 
  static const Alignment topRight = Alignment(1.0, -1.0);
  ///中間居左對齊 
  static const Alignment centerLeft = Alignment(-1.0, 0.0);
  /// 中間對齊
  static const Alignment center = Alignment(0.0, 0.0);
  ///中間居右對齊 
  static const Alignment centerRight = Alignment(1.0, 0.0);
  ///左下對齊 
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);
  ///底部居中對齊
  static const Alignment bottomCenter = Alignment(0.0, 1.0);
  /// 右下對齊
  static const Alignment bottomRight = Alignment(1.0, 1.0);
}

• ImageRepeat：當圖片本身大小小於顯示空間時，指定圖片的重複規則。

enum ImageRepeat {
  repeat,//在x和y軸上重複圖像，直到填充滿空間。
  repeatX,//在x軸上重複圖像，直到填充滿空間。
  repeatY,//在y軸上重複圖像，直到填充滿空間。
  noRepeat,//不重複
}

• FilterQuality：設置圖片的過濾質量

enum FilterQuality {
  none,//最快的過濾。
  low,//比none的過濾質量好，但是比none的時間要長。
  medium,//比low的過濾質量好，但是也比low的時間要長
  high,//過濾質量最高，但也最慢
}

2、使用 - Icon

• 單獨使用

 Icon(
     Icons.android,
 )

效果如下：

• 添加顏色

Icon(
     Icons.android,
     color: Colors.blue,
 )

效果如下：

• 改變圖標大小

Icon(
     Icons.android,
     color: Colors.blue,
     size: 150.0,
 )

效果如下：

Icon源碼分析

const Icon(
    this.icon, {//所要展示的icon數據，類型爲IconData
    Key key,//Widget 的標識	
    this.size,//double 類型，icon的大小	
    this.color,//icon的顏色	類型爲Color
    //String類型，給 Image 加上一個語義標籤沒有實際用處
    this.semanticLabel,
    this.textDirection,//Icon的繪製方向	類型爲TextDirection	
  }) : super(key: key);

結尾

截止到這裏Image和Icon就介紹完了。
以下是我的Flutter系列的鏈接，後續會持續更新，歡迎大家指正。

Flutter 系列文章

• Flutter 學習 - 開篇
• Flutter 學習 - 基礎框架
• Flutter 學習 - 網絡請求和數據解析
• Flutter 學習 - Widget 之 Text
• Flutter 學習 - Widget 之 RichText
• Flutter 學習 - Widget 之 Image和Icon

更多關於技術相關的內容請關注博主公衆號–迷途程序猿