前言

在flutter中显示图片的就是Image，相当于android中的ImageView，但是要比ImageView功能强大很多。

比如支持gif动图，可以加载网络图片，缓存机制，图片处理等。实际上Image基本上实现了平时我们用到的图片加载框架（如glide）的大部分功能。

Image

根据加载图片的不同，可以使用不同的Image函数

Image.asset 加载项目内资源
Image.file 加载内存卡图片
Image.memory 加载byte[]数据
Image.network 加载网络图片

使用起来也很简单，如：

Image.file(File("xxx/xxxx/xxx.jpg"))

当然这只是最简单的使用，函数中还有很多属性可以设置，以达到不同的效果

比如图片填充方式

Image.file(File("xxx/xxxx/xxx.jpg"), fit: BoxFit.cover)

设置fit这个属性就可以了，cover表示图片宽高比不变，切割图片。

其他属性就不一一介绍了。

resize和缓存

当加载超大图片的时候，我们为了节省内存空间，需要将图片压缩成小尺寸再进行加载，即resize。

在Image中，resize是通过cacheWidth和cacheHeight这两个属性来处理的，同时也进行了缓存。

如：

Image.file(File("xxx/xxxx/xxx.jpg"),fit: BoxFit.cover,filterQuality: FilterQuality.low,cacheWidth: window.physicalSize.width ~/ 3,
)

这里将cacheWidth设为屏幕宽度的1/3。

加载图片的时候会先处理图片，将读到内存中的图片数据的压缩到宽度等于屏幕宽度的1/3，然后将新的小的图片数据缓存起来，再加载显示。

后面我们如果还用到了这个图片，且cacheWidth设置一样，就可以直接从缓存中取出数据加载显示。

当然如果cacheWidth设置不一样，就要重新再处理一次图片。

cacheWidth和cacheHeight这两个属性可以同时设置，也可以只设置一个，如果不想改变图片的宽高比，就设置一个就可以了。

Hero闪烁问题

但是这里注意，当使用Hero将Image当作共享元素时，如果设置了cacheWidth会出现闪烁的情况(注：Hero是flutter中处理共享元素的组件)。

拖动消失问题

如果页面有拖动效果，这时发现当进行拖动时，设置了cacheWidth或cacheHeight的Image中的图片会消失，拖动结束后图片又出现。

解决方法，在image中添加gaplessPlayback: true即可。

FadeInImage占位图

我们加载图片，尤其是网络图片的时候，需要先设置一个占位图。但是上面提到的几个函数都不存在相关的属性，怎么办呢？

我们可以使用FadeInImage，如下：

FadeInImage(placeholder: AssetImage("images/default.png"),image: FileImage(File("xxx/xxxx/xxx.jpg")),fadeOutDuration: Duration(milliseconds: 1),fadeInDuration: Duration(milliseconds: 1),)

这里placeholder就是占位图，而image就是真正加载的图片

注意这两个类型是ImageProvider，所以要使用FileImage、AssetImage等

FadeInImage在加载完成后替换占位图会执行一个渐出渐近的动画，所以也有相关的设置

比如fadeOutDuration和fadeInDuration设置动画的时长，fadeOutCurve和fadeInCurve可以设置动画曲线。

占位图解决，但是我们还想使用压缩和缓存怎么办？

可以使用ResizeImage解决，如下：

FadeInImage(placeholder: AssetImage("images/default.png"),image: ResizeImage(FileImage(File("xxx/xxxx/xxx.jpg")), width: window.physicalSize.width ~/ 3),fadeOutDuration: Duration(milliseconds: 1),fadeInDuration: Duration(milliseconds: 1),)

用ResizeImage将FileImage、AssetImage等包装一层就可以了。

关注公众号：BennuCTech，发送“Flutter开发实战”获取《Flutter完整开发实战详解》电子书一份。

Flutter入门：Image组件相关推荐

【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )
文章目录一.加载网络图片二.加载静态图片三.加载本地图片四.完整代码示例五.相关资源一.加载网络图片参考 [Flutter]Image 组件 ( Image 组件简介 | Image 构 ...
【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )
文章目录一.StatefulWidget 组件二.创建 StatefulWidget 组件三.MaterialApp 组件四.Scaffold 组件五. 相关资源一.StatefulWid ...
Flutter入门进阶之旅（二）Hello Flutter
开题好像几乎我们学习或者掌握任何一门编程语言都是Hello word开始的,本篇博文做为Flutter入门进阶的第一篇分享,我们也从最简单的Hello world开始,至于Flutter开发环境的配 ...
从零开始的Flutter入门实战（二）
目录前言一.Column布局 1.创建一个Column 2.添加Container 3.运行验证二.Row布局 1.将Column改成Row 三.Column布局和Row布局的混合使用 1.Si ...
Flutter入门——创建第一个Flutter项目
Flutter入门--创建第一个Flutter项目一.创建项目第一个项目使用Android Studio创建,步骤如下: 先打开Android Studio,会有一个创建新的Flutter应用的选 ...
Flutter 入门经典
Flutter是Google公司推出的新一代前端框架,最初目标只是为了满足移动端跨平台的应用开发, 开发人员可使用 Flutter 在 iOS 和 Android 上快速构建高质量的原生用户界面.但如 ...
Flutter入门进阶之旅（十二）Flutter 数据存储
前言之前的章节我们基本上把Flutter中基础部分的东西都做了简单的讲解,通过前面章节的循序学习读者也基本能完成一些简单的UI绘制并能利用Flutter处理一些简单的用户交互,读者可能也留意到,我们 ...
Flutter入门之——HelloWorld
Flutter入门之--HelloWorld 安装Flutter开发环境首先要准备好Flutter的开发环境和开发所使用的IDE,这里我们使用AndroidStudio作为开发工具. Flutter ...
【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | Image.network 构造函数 | Image.asset 构造函数 )
文章目录一.Image 组件简介二.Image 构造函数三.Image.network 构造函数四.Image.file 构造函数五.Image.asset 构造函数六.Image.mem ...
轻松 Flutter 入门，秒变大前端
本文作者:dickma,腾讯 IEG 前端开发工程师本文不是Flutter的教程,只是对 Flutter 的技术特性,做了一些略全面的入门级的介绍,如果你听说过Flutter,想去了解他,但是又不想 ...

Flutter入门：Image组件

前言