Flutter Hero 动画组件的飞行过程显示控制
前言
继续 Hero
组件的介绍,本篇来介绍 Hero
组件的另一个属性 flightShuttleBuilder
。这个属性用于设置飞行过程中的组件。默认的话 Hero
组件在飞行过程中是使用源页面的 Hero
子组件。有了flightShuttleBuilder
,我们就可以在行过程中可以更换组件。
flightShuttleBuilder 定义
flightShuttleBuilder
是一个返回飞行过程中的方法,定义如下:
其中 flightDirection
是一个枚举,用于区分是 push
还是 pop
。animation
原以为会在动画过程中变化,但是 debug
的时候发现只有一个起始值。三个 context
是在需要的时候可以使用,一般用不到。我们可以通过flightDirection
来定义 push
过程和 pop
过程中的组件。
示例
示例起始比较简单,我们这里使用了两个简单的色块作为飞行中的组件。
注意,这个只需要在源页面的 Hero 组件定义就可以了,无需在目标 Hero 组件定义。下面是运行效果。从目前的使用来看,感觉好处是如果前后两个 Hero 的组件存在差别,使用来回不同的飞行组件可能会感觉更一致一些。其他似乎并没有很大的用途,可能还需要继续深入研究应用案例。
平台差异性
注意 Hero 组件在 iOS 和安卓平台是有差异的,最大的差异是 iOS 的兼容性有点问题,比如 iOS 在模拟器上需要开启 transitionOnUserGestures
为 true
才支持返回。
如果不开启,点击几次导航栏的返回按钮后会报错:'_backGestureController != null': is not true
。网上是说模拟器的问题,真机还没验证。而开启后,虽然不会报错,但是点击目标页面的 Hero 组件不会返回源页面。点击返回按钮或用手势倒没什么问题。安卓平台是没有这个问题的。
这个问题需要区分平台处理,对于 iOS 平台开启因此,iOS 平台需要特别注意一下。解决的方法之一是,在 iOS 平台上设置 MaterialPageRoute
的fullscreenDialog
属性为 true
。不过这样是不支持侧滑返回了。如下所示:
因此,在 iOS 平台,如果 Hero 组件有点击互动的效果的,推荐设置fullscreenDialog
为 true
。如果没有是可以设置transitionOnUserGestures
为 true
来支持手势操作。
总结
本篇介绍了 Hero
组件的flightShuttleBuilder
的使用,以及 iOS 和安卓平台在 Hero 组件的差异化处理。那么 Hero
组件到底有哪些应用场景呢,接下来我会讲两个应用案例。相关源码已上传至:Flutter 入门与实战 - 动画相关源码。
版权声明: 本文为 InfoQ 作者【岛上码农】的原创文章。
原文链接:【http://xie.infoq.cn/article/42f978c5208c6770561386667】。文章转载请联系作者。
评论