【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | Image.network 构造函数 | Image.asset 构造函数 )

文章目录

• 一、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 构造函数 :

代码语言：javascript复制

  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 ;

代码语言：javascript复制

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

构造函数中 image , alignment , repeat , matchTextDirection 参数必须不能为空 ;

图像尺寸说明 : 如果严格约束图片的宽高 , 需要符合以下任意一个要求 :

• ① 指定 width 和 height 参数 ;
• ② 指定 Image 组件放置在严格约束的布局中 ;

如果以上都没有设置 , 那么 Image 组件就是已加载的图片的真实大小 , 这会使界面布局非常难看 ;

三、Image.network 构造函数

---

Image.network 是命名构造方法 , 该构造方法创建的 Image 组件用于显示网络的 ImageStream 图片 ;

代码语言：javascript复制

  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 图片 ;

代码语言：javascript复制

  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 , 就是项目文件中的图片 ;

代码语言：javascript复制

  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 中有如下配置 :

代码语言：javascript复制

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 对象 , 就是内存中的数据 ;

代码语言：javascript复制

  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 参数主要用于减少图片在内存中的大小 ;

缓存 flutter image 布局 内存

0 人点赞