Flutter入门:Hero共享元素

简介: 在Android中我们知道是可以设置共享元素的,这样在两个页面中相同的元素在转场时就会以一个过渡动画的形式展示,效果炫酷,用户体验上也更好。那么在Flutter中有同样的功能么?答案是一定的,在Flutter中它就是Hero,也是一个widget(flutter中万物皆是widget)。Hero指的是可以在路由(页面)之间“飞行”的widget。所以它实现了共享元素转换或共享元素动画的动画风格。

前言


在Android中我们知道是可以设置共享元素的,这样在两个页面中相同的元素在转场时就会以一个过渡动画的形式展示,效果炫酷,用户体验上也更好。

那么在Flutter中有同样的功能么?

答案是一定的,在Flutter中它就是Hero,也是一个widget(flutter中万物皆是widget)。Hero指的是可以在路由(页面)之间“飞行”的widget。所以它实现了共享元素转换或共享元素动画的动画风格。


Hero


相对于Android中的共享元素功能,Hero使用要简单的非常多,只需要将要共享的元素(widge)用Hero包一层即可,比如两个页面中都有一个Image,里面是同一张图片(比如一个是列表页面,一个是详情页面,都用了同一张图片),那么就可以通过hero将他们设置为共享元素

页面A中


Hero(
    tag: 'thumb',
    child: Image.file(
      File('xxxx/thumb'),
      fit: BoxFit.cover,
      filterQuality: FilterQuality.low,
    )
) 
复制代码


页面B中


Hero(
    tag: 'thumb',  //tag与上一个页面的一致
    child: Image.file(
      File('xxxx/thumb'),
    )
)  
复制代码


这样当页面切换是,就可以看到元素的移动缩放等过渡动画了。

这里注意:

在Hero下的tag要必须一致,同时为了获得最佳效果,Hero下面的widget树要几乎相同,比如上面的两个Hero下都只有一个Image,但是也可以是复杂的布局,这时最好widget树相似,否则实际效果会很差。


图片闪烁?


在我实际的开发过程中发现,为Image设置了共享元素后,在切换页面时发现动画时正常的,但是播放完动画后图片闪烁了一下。

经过反复测试发现是图片的cache机制导致的,比如我们将上面的代码修改一下:

页面A中


Hero(
    tag: 'thumb',
    child: Image.file(
      File('xxxx/thumb'),
      fit: BoxFit.cover,
      filterQuality: FilterQuality.low,
      cacheWidth: window.physicalSize.width ~/ 2.2,
    )
) 
复制代码


页面B中


Hero(
    tag: 'thumb',  //tag与上一个页面的一致
    child: Image.file(
      File('xxxx/thumb'),
      cacheWidth: window.physicalSize.width ~/ 2.2,
    )
)  
复制代码


为图片都加上cacheWidth。我们设置cacheWidth或cacheHeight是为了加载图片时压缩图片以节省内存空间,同时缓存到内存里。但是在Hero下的Image如果设置了cacheWidth或cacheHeight,在切换场景情况下过渡动画结束时就会闪一下。

去掉cache就不会再闪烁了,这里我简单猜测是因为resize导致的,因为需要resize所以Hero无法判断两个Image中的图片是不是完全一样(可以理解Hero没有对cacheWidth进行比较),所以到B页面后就没有直接使用内存中A页面的图片,而是重新加载resize了一次,所以会闪烁。

但是目前未找到在使用cache的同时不闪烁的解决方法。


目录
相关文章
|
存储 缓存 Dart
[Flutter]足够入门的Dart语言系列之面向对象:类成员的可见性、常量和工厂构造函数详解
类和成员的可见性,这在基于库或包的开发中非常重要,Dart中提供了工厂构造函数,可以方便的实现单例、缓存实例对象、返回子类等,以及常量构造函数的使用......
309 0
[Flutter]足够入门的Dart语言系列之面向对象:类成员的可见性、常量和工厂构造函数详解
在 Flutter 中如何使用 ChangeNotifierProvider 实现数据共享?
在 Flutter 中如何使用 ChangeNotifierProvider 实现数据共享?
|
2月前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
87 7
|
7月前
|
Dart 前端开发 开发工具
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
【4月更文挑战第30天】本文介绍了Flutter SDK的安装和配置过程,以及如何创建并运行第一个Flutter应用。首先确保安装了Dart SDK和Flutter SDK,支持macOS、Linux和Windows。安装完成后,设置环境变量,然后通过`flutter doctor`验证安装。接着,使用`flutter create`命令创建新项目,进入项目目录并运行`flutter run`启动应用。在`main.dart`中修改代码以自定义应用。Flutter支持热重载和DevTools调试。本文为Flutter初学者提供了快速入门的指导。
120 0
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
|
4月前
|
Dart 前端开发 JavaScript
Flutter&Dart-异步编程Future、Stream极速入门
Flutter&Dart-异步编程Future、Stream极速入门
82 4
Flutter&Dart-异步编程Future、Stream极速入门
|
4月前
|
Kubernetes Cloud Native 搜索推荐
探索云原生技术:Kubernetes入门与实践打造个性化安卓应用:从零开始的Flutter之旅
【8月更文挑战第31天】云原生技术正改变着应用开发和部署的方式。本文将带你了解云原生的基石——Kubernetes,通过实际的代码示例,从安装到部署一个简单的应用,让你迅速掌握Kubernetes的核心概念和操作方法。无论你是初学者还是有一定经验的开发者,这篇文章都将成为你进入云原生世界的桥梁。
|
5月前
|
开发框架 Dart Java
Flutter入门进阶之旅(一)-初识Flutter
Flutter 的目标是用来创建高性能、高稳定性、高帧率、低延迟的 Android 和 iOS 应用。并且开发出来的应用在不同的平台用起来跟原生应用具有一样的体验。不同的平台的原生体验应该得到保留,让该应用看起来同整个系统更加协调。不同平台的滚动操作、字体、图标 等特殊的特性 应该和该平台上的其他应用保持一致,让用户感觉就像操作原生应用一样。
75 1
|
5月前
|
Dart 搜索推荐
Flutter入门进阶之旅(二)Hello Flutter
好像几乎我们学习或者掌握任何一门编程语言都是Hello word开始的,本篇博文做为Flutter入门进阶的第一篇分享,我们也从最简单的Hello world开始,至于Flutter开发环境的配置,跟关于Dart语言的介绍,不是该专栏要讲解的内容,我就不详细做介绍了,读者可自行google或者百度了解一下。
51 0
|
6月前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
7月前
|
数据库 Android开发
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画