文章目录

• 一、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 构造函数 )的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。