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

最新推荐文章于 2022-12-08 09:43:28 发布
最新推荐文章于 2022-12-08 09:43:28 发布
阅读量3.8k 收藏 6
点赞数 1
分类专栏： Flutter 文章标签： Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shulianghan/article/details/115109857
版权

文章目录





一、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 参数主要用于减少图片在内存中的大小 ;
韩曙亮
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter组件学习—Image
02-24
之前，我们讲了Flutter中Text组件的一些用法以及API，本节我们继续学习Flutter中的Image组件，同样先上图：在Android中，我们都知道，图片的显示方式有很多，资源图片、网络图片、文件图片等等，在Flutter中也有多种方式，用来加载不同形式的图片：Image：通过ImageProvider来加载图片Image.asset：用来加载本地资源图片Image.file：用来加载本地（File文件）图片Image.network：用来加载网络图片Image.memory：用来加载Uint8List资源（byte数组）图片Image的一个参数是ImageProvider，基本上所有
Flutter控件之图片Image封装
知足常乐
05-20 1002
为了简洁代码，还有为了拓展原生组件没有的属性，就不得不进行一次简单的封装，使其在调用的时候，可以很方便的实现某些功能。
图片上马赛克
weixin_48687228的博客
06-10 109
vue图片打马赛克
promise应用问题
for_kk的博客
05-19 205
function loadImageAsync(url) { return new Promise(function(resolve, reject) { var image = new Image(); image.onload = function() { resolve(image); }; image.onerror = function
JS如何获取图片完全加载后信息
mtgr的博客
07-08 4849
很多情况下我们希望在onload事件中返回一个值，例如我们在图片加载完以后返回一些图片的信息 const image = new Image(); image.onload = function () { ... return ... }; image.src = url; 如果我们直接返回的话都知道是return不出来的，我之...
Flutter中的Image入门讲解，诚意分享
m0_69789996的博客
04-22 2183
图片大小小于容器事相当于none，图片大小大于容器时缩小图片大小实现contain [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bwmPWjKZ-1650620786670)(https://user-gold-cdn.xitu.io/2018/12/12/167a08fa8c45a8e1?imageView2/0/w/1280/h/960/ignore-error/1)] centerSlice属性专门用于nine-patch文件。 其他属性暂时不讲。 一般情况下这个控
Flutter - Image 组件分析
xia236326的博客
05-18 1345
Flutter 中提供了Widget 组件供开发者解决日常中关于图片相关的需求，其中包含 Image.file() 读取用户内存中图片，Image.asset() 加载程序包含的图片资源，Image.network() 用于网络图片的加载，我们主要通过 Image 对于网络图片加载的实现来初步了解 Image 组件的原理。 首先从构造函数开始： Image.network( String src, { Key? key, double scale = 1.0, ... ...
Flutter - Image
a136447572的专栏
12-08 473
Flutter 中，我们可以通过Image组件来加载并显示图片，Image的数据源可以是asset、文件、内存以及网络。
Flutter——最详细的Image（图像）使用教程
人生在世
12-03 5374
Image简介 用于显示一张图片，可以从文件、内存、网络、资源。可以指定适应方式、样式、颜色混合模式、重复模式等。 常用属性 属性 作用 fit 图片的适应模式 alignment 图片的对齐模式 获取资源文件和网络图片 class ImageWidget extends StatelessWidget { final assetsImagePath = "assets/images/flutter_mark_logo.png"; final netImageUrl =
Flutter随记五：Image、FadeImage、ResizeImage、FileImage、AssetImage组件使用及使用问题解决
鸡肋佐的博客
06-27 3513
Flutter随记五：Image、FadeImage、ResizeImage、FileImage、AssetImage组件使用及使用问题解决
【Flutter】Image 组件 ( 加载网络图片 加载静态图片 加载本地图片 path_provider 插件 ).zip
03-23
【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 ) https://hanshuliang.blog.csdn.net/article/details/115112899 博客源码快照
Flutter Image实现图片加载
08-25
主要为大家详细介绍了Flutter Image实现图片加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
flutter的image控件
01-07
使用 Image.network 来调用远程的图片 代码如下： class HomeContent extends StatelessWidget{ @override Widget build(BuildContext context){ return Center( child: Container( child: Image.network...
【Flutter】Dart 数据类型 Map 类型 ( 创建 Map 集合 | 初始化 Map 集合 | 遍历 Map 集合 )
热门推荐
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-05 1万+
一、 Dart 数据类型 Map 类型、 二、 Map 类型初始化并赋值、 1、 创建 Map 对象同时进行初始化操作、 2、 先创建 Map 对象再进行赋值、 三、 Map 集合遍历、 1、 使用 forEach 遍历 Map 集合、 2、 使用普通 for 循环遍历 Map 集合、 3、 使用 map 方法进行遍历生成新的 Map 集合、 四、 完整代码示例、 五、 相关资源
【Flutter】屏幕像素适配方案 ( flutter_screenutil 插件 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
09-01 1万+
一、推荐使用 flutter_screenutil 插件、 二、flutter_screenutil 插件使用、 1、导入 flutter_screenutil 插件依赖、 2、 flutter_screenutil 初始化、 3、 flutter_screenutil 使用 API、 4、 设置字体、 5、 设置宽高、 三、代码示例、 四、博客资源、
【Flutter】Flutter 页面生命周期 ( 初始化期 | createState | initState | 更新期 | build | 销毁期 | dispose)
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-03 1万+
一、Flutter 页面生命周期、 1、StatelessWidget 组件生命周期函数、 2、StatefulWidget 组件生命周期函数、 二、StatefulWidget 组件生命周期、 1、createState、 2、initState、 3、didChangeDependencies、 4、build、 5、didUpdateWidget、 6、deactivate、 7、dispose、 三、完整代码示例、 四、相关资源
【错误记录】Flutter / Android 报错 ( AAPT: error: attribute android:requestLegacyExternalStorage not found )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-14 1万+
Y:\002_WorkSpace\001_AS\flutter_photo\flutter_photo\android\app\src\main\AndroidManifest.xml:9:5-31:19: AAPT: error: attribute android:requestLegacyExternalStorage not found.
【Flutter】Dart 泛型 ( 泛型类 | 泛型方法 | 特定类型约束的泛型 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-25 9906
一、Dart 泛型类与泛型方法、 二、Dart 泛型中的特定类型约束、 三、Dart 自带泛型、 四、完整代码示例、 五、 相关资源、
【Flutter】Dart 数据类型 List 集合类型 ( 定义集合 | 初始化 | 泛型用法 | 初始化后添加元素 | 集合生成函数 | 集合遍历 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-18 8743
I . 定义集合并初始化 II . 集合泛型用法 III . 集合添加元素 IV . 集合生成函数 V . 集合遍历 VI . 集合示例代码
flutter 里面给Image.asset设置大小为什么不生效
最新发布
07-15
在 Flutter 中，使用 `Image.asset` 来加载本地资源图片时，设置图片的大小可能会受到一些因素的影响。下面讨论一些可能导致设置大小不生效的原因： 1. 父级容器限制：如果 `Image.asset` 是放在一个具有固定大小或...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值