搜索
简帛阁>技术文章>Flutter入门:Image组件

Flutter入门:Image组件

前言

在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,相当于android中的ImageView,但是要比ImageView功能强大很多。比如支持gif动图,可以加载网络图片,缓存机制,图片处理等。实际上I
Image简介Androidios原生中使用ImageView来加载显示图片。在flutter中通过Image来加载并显示图片。所有的widget并不是直接绘制图片的,而是控制的图片的主要属性的容器
文章目录Flutter功能型组件监听返回键菜单类型组件Flutter功能型组件监听返回键两次点击返回键才会退出程序。class_MyHomePageStateextendsState<MyHo
最近学习ReactNative感觉到挺有意思的,在学习的过程中,发现网上一些人写的文章内容过时了,这主要是ReactNative的版本升级太快,如果你现在看一篇16甚至15年写的文章,把知识点和官方文
文实例为大家分享了Unity实现圆形Image组件的具体代码,供大家参考,具体内容如下一、前言游戏里很多图片都是以圆形展示的,例如头像、技能图标等,一般做法是使用Image组件+Mask组件实现,但
vueelement组件imageviewer使用注意引用注意事项引用在vue头中引用组件,因为imageviewer是属于Image组件中一个单独的功能,我们单独导入此包。代码如下:importE
文章目录Fluttershape类型组件BeveledRectangleBorderBorderCircleBorderContinuousRectangleBorderRoundedRectangl
上一篇简略的学习了dart语言,接下来是改学fluter项目开发了。对于需要看到界面和效果的单单看文章是无法满足我这种空间思维不足的人的,所以我决定去找视频,经过多番筛选我选择了哔哩哔哩里面的:htt
开逻辑不说,具有好的布局能力才可以做到符合设计图符合上级口味的界面,此篇亦是布局讲解:1import'package:flutter/materialdart';2import'res/listDa
ocker对container的使用基本是建立在LXC基础之上,然而LXC存在的问题是难以移动,难以通过标准化的模板去制作、重建、复制和移动container。在以VM为基础的虚拟化中,有image