文章目錄

• 一、Image 組件簡介
• 二、Image 構造函數
• 三、Image.network 構造函數
• 四、Image.file 構造函數
• 五、Image.asset 構造函數
• 六、Image.memory 構造函數

一、Image 組件簡介

---

Flutter 中用于展示圖片的控件是 Image , 類似于 Android 中的 ImageView , iOS 中的 UIImageView ;

Flutter 中 Image 組件支持的圖片格式 :

• jpeg
• png
• bmp
• wbmp
• gif
• animated gif
• webp
• animated webp

下面介紹 Image 組件的構造函數 ;

二、Image 構造函數

---

Image 構造函數 :

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);

必須傳入 image 作為參數 , 其它參數都是可選的 , image 類型是 ImageProvider ;

/// The image to display. final ImageProvider image;

構造函數中 image , alignment , repeat , matchTextDirection 參數必須不能為空 ;

圖像尺寸說明 : 如果嚴格約束圖片的寬高 , 需要符合以下任意一個要求 :

• ① 指定 width 和 height 參數 ;
• ② 指定 Image 組件放置在嚴格約束的布局中 ;

如果以上都沒有設置 , 那么 Image 組件就是已加載的圖片的真實大小 , 這會使界面布局非常難看 ;

三、Image.network 構造函數

---

Image.network 是命名構造方法 , 該構造方法創建的 Image 組件用于顯示網絡的 ImageStream 圖片 ;

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,int cacheWidth,int cacheHeight,}) : image = ResizeImage.resizeIfNeeded(cacheWidth, cacheHeight, NetworkImage(src, scale: scale, headers: headers)),assert(alignment != null),assert(repeat != null),assert(matchTextDirection != null),assert(cacheWidth == null || cacheWidth > 0),assert(cacheHeight == null || cacheHeight > 0),super(key: key);

該構造函數需要傳入一個圖片 url 地址 , 其中 src , scale , repeat 三個參數必須不為空 ;

圖像尺寸說明 : 如果嚴格約束圖片的寬高 , 需要符合以下任意一個要求 :

• ① 指定 width 和 height 參數 ;
• ② 指定 Image 組件放置在嚴格約束的布局中 ;

如果以上都沒有設置 , 那么 Image 組件就是已加載的圖片的真實大小 , 這會使界面布局非常難看 ;

圖片緩存 : 所有的網絡圖片都會被緩存 ;

header 參數說明 : 可選的 header 參數 , 可以用于發送 帶有圖片請求的自定義 HTTP 頭 ;

四、Image.file 構造函數

---

Image.file構造函數 , 用于從本地文件中獲取圖片 , 顯示到 Image 組件中 ;

創建一個 Image 組件 , 展示從文件中獲取的 ImageStream 圖片 ;

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,int cacheWidth,int cacheHeight,}) : image = ResizeImage.resizeIfNeeded(cacheWidth, cacheHeight, FileImage(file, scale: scale)),loadingBuilder = null,assert(alignment != null),assert(repeat != null),assert(filterQuality != null),assert(matchTextDirection != null),assert(cacheWidth == null || cacheWidth > 0),assert(cacheHeight == null || cacheHeight > 0),super(key: key);

構造函數中 file , scale , repeat 三個參數必須不能為空 ;

圖像尺寸說明 : 如果嚴格約束圖片的寬高 , 需要符合以下任意一個要求 :

• ① 指定 width 和 height 參數 ;
• ② 指定 Image 組件放置在嚴格約束的布局中 ;

如果以上都沒有設置 , 那么 Image 組件就是已加載的圖片的真實大小 , 這會使界面布局非常難看 ;

在 Android 設備中 , 需要使用 SD 卡權限 , 在清單文件中添加 android.permission.READ_EXTERNAL_STORAGE 權限 ;

縮放圖片 : 縮放圖片時使用 filterQuality 參數去改變圖像的質量 ; 使用 FilterQuality.low 質量設置去縮放圖片 ;

• FilterQuality.low 對應 雙線性差值法 ( 圖像縮放算法 )
• FilterQuality.none 對應 最近鄰法 ( 圖像縮放算法 )

圖像緩存 :

• 參數作用 : 如果設置了 cacheWidth 或 cacheheheight 參數 , 則指示圖像引擎該圖片應該被解碼成指定的大小 ;
• 顯示圖片大小 : 緩存的大小不影響顯示大小 , 不管這兩個參數設置什么數值 , 圖像都會被渲染到 width 和 height 指定的布局下 ;
• 內存緩存大小 : cacheWidth 或 cacheheheight 參數主要用于減少圖片在內存中的大小 ;

五、Image.asset 構造函數

---

Image.asset 構造函數 : 創建一個 Image 組件 , 圖片來源是 asset bundle , 就是項目文件中的圖片 ;

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,int cacheWidth,int cacheHeight,}) : image = ResizeImage.resizeIfNeeded(cacheWidth, cacheHeight, 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),assert(cacheWidth == null || cacheWidth > 0),assert(cacheHeight == null || cacheHeight > 0),super(key: key);

構造函數中 name , repeat 參數必須不能為空 ;

圖像尺寸說明 : 如果嚴格約束圖片的寬高 , 需要符合以下任意一個要求 :

• ① 指定 width 和 height 參數 ;
• ② 指定 Image 組件放置在嚴格約束的布局中 ;

如果以上都沒有設置 , 那么 Image 組件就是已加載的圖片的真實大小 , 這會使界面布局非常難看 ;

縮放圖片 : 縮放圖片時使用 filterQuality 參數去改變圖像的質量 ; 使用 FilterQuality.low 質量設置去縮放圖片 ;

• FilterQuality.low 對應 雙線性差值法 ( 圖像縮放算法 )
• FilterQuality.none 對應 最近鄰法 ( 圖像縮放算法 )

圖像緩存 :

• 參數作用 : 如果設置了 cacheWidth 或 cacheheheight 參數 , 則指示圖像引擎該圖片應該被解碼成指定的大小 ;
• 顯示圖片大小 : 緩存的大小不影響顯示大小 , 不管這兩個參數設置什么數值 , 圖像都會被渲染到 width 和 height 指定的布局下 ;
• 內存緩存大小 : cacheWidth 或 cacheheheight 參數主要用于減少圖片在內存中的大小 ;

假設 pubspec.yaml 中有如下配置 :

flutter:assets:- images/cat.png- images/2x/cat.png- images/3.5x/cat.png

使用 Image.asset('images/cat.png') 代碼加載圖片 ;

• 在設備像素比 2.0 的屏幕上 , 加載 images/2x/cat.png 圖片 ;
• 在設備像素比 4.0 的屏幕上 , 加載 images/3.5x/cat.png 圖片 ;
• 在設備像素比 1.0 的屏幕上 , 加載 images/cat.png 圖片 ;

資源圖像的加載策略是就近加載 ;

Image 組件使用可以參考之前的 【Flutter】StatefulWidget 組件 ( Image 組件 | TextField 組件 ) 博客 ;

六、Image.memory 構造函數

---

Image.memory 構造函數 : 創建一個 Image 組件 , 圖片來源是 Uint8List 對象 , 就是內存中的數據 ;

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,int cacheWidth,int cacheHeight,}) : image = ResizeImage.resizeIfNeeded(cacheWidth, cacheHeight, MemoryImage(bytes, scale: scale)),loadingBuilder = null,assert(alignment != null),assert(repeat != null),assert(matchTextDirection != null),assert(cacheWidth == null || cacheWidth > 0),assert(cacheHeight == null || cacheHeight > 0),super(key: key);

構造函數中 bytes , scale , repeat 參數必須不能為空 ;

圖片數據只接受壓縮后的圖片格式 , 如 png 格式 ;

傳入未壓縮的圖片數據 , 如 RGB 數據 , 會報異常 ;

圖像尺寸說明 : 如果嚴格約束圖片的寬高 , 需要符合以下任意一個要求 :

• ① 指定 width 和 height 參數 ;
• ② 指定 Image 組件放置在嚴格約束的布局中 ;

如果以上都沒有設置 , 那么 Image 組件就是已加載的圖片的真實大小 , 這會使界面布局非常難看 ;

縮放圖片 : 縮放圖片時使用 filterQuality 參數去改變圖像的質量 ; 使用 FilterQuality.low 質量設置去縮放圖片 ;

• FilterQuality.low 對應 雙線性差值法 ( 圖像縮放算法 )
• FilterQuality.none 對應 最近鄰法 ( 圖像縮放算法 )

圖像緩存 :

• 參數作用 : 如果設置了 cacheWidth 或 cacheheheight 參數 , 則指示圖像引擎該圖片應該被解碼成指定的大小 ;
• 顯示圖片大小 : 緩存的大小不影響顯示大小 , 不管這兩個參數設置什么數值 , 圖像都會被渲染到 width 和 height 指定的布局下 ;
• 內存緩存大小 : cacheWidth 或 cacheheheight 參數主要用于減少圖片在內存中的大小 ;

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | Image.network 构造函数 | Image.asset 构造函数 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。