Flutter 學習 - Widget 之 Image和Icon

迷途小頑童T發表於2019-09-06
Flutter

前言

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

1、使用 - Image

載入本地資源

  • 在Flutter工程的根目錄下建立一個images目錄(名字可以隨意，images比較直觀)，然後將你需要展示的圖片新增到這個目錄下，如圖
    Flutter 學習 - Widget 之 Image和Icon
  • 開啟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",
),
複製程式碼

效果如下

Flutter 學習 - Widget 之 Image和Icon

原始碼分析

下面來看下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,
 )
複製程式碼

效果如下：

Flutter 學習 - Widget 之 Image和Icon

  • 新增顏色
Icon(
     Icons.android,
     color: Colors.blue,
 )
複製程式碼

效果如下：

Flutter 學習 - Widget 之 Image和Icon

  • 改變圖示大小
Icon(
     Icons.android,
     color: Colors.blue,
     size: 150.0,
 )
複製程式碼

效果如下：

Flutter 學習 - Widget 之 Image和Icon

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就介紹完了。

更多關於技術相關的內容請關注博主公眾號--迷途程式猿

迷途程式猿

相關文章