Flutter HeroMode Widget 动画转场组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qqYfElTD-1631112789467)(https://ducafecat.tech/2021/09/09/translation/heromode-widget-in-flutter/2021-09-08-22-37-25.png)]

原文

https://medium.com/flutterdevs/heromode-widget-in-flutter-9fac046fbf86

代码

https://github.com/flutter-devs/flutter_heromode_demo

参考

  • https://flutter.dev

正文

Flutter HeroMode Widget 动画转场组件_第1张图片

在 Flutter 中,Flutter 应用程序屏幕上的每个组件都是一个小工具。屏幕的透视图完全依赖于用于构建应用程序的小部件的选择和分组。此外,应用程序代码的结构是一个小部件树。

在本博客中,我们将了解 HeroMode 小部件及其在 flutter 中的功能。我们将在这个 HeroMode 小部件的演示程序的实现中看到。

“ Flutter 是谷歌的 UI 工具包,它可以帮助你在创纪录的时间内用一个代码库为移动设备、网络和桌面构建漂亮的本地组合应用程序。”

它是免费和开源的。它最初是由谷歌发展而来,目前由 ECMA 标准监管。 Flutter 应用程序利用达特编程语言来制作应用程序。这个 dart 编程和其他编程语言有一些相同的亮点,比如 Kotlin 和 Swift,并且可以被转换成 JavaScript 代码。

如果你想探索更多关于 Flutter ,请访问 Flutter 的官方网站,以获得更多的信息。 Flutter’s official website

以下这些公司和产品正在使用 Flutter —— Flutter 展示

Flutter HeroMode Widget 动画转场组件_第2张图片

HeroMode 小部件

Hero 小部件是一个伟大的开箱即用的动画,用于通信小部件从一个页面飞到另一个页面的导航动作。英雄动画是两个不同页面之间共享的元素过渡(动画)。现在来看看这个,想象一个超级英雄在行动中飞行。例如,您必须有一个图像列表。当我们用英雄标签包装它的时候。现在我们点击一个项目清单。而且当被敲击时。然后图像列表项目的土地其位置在详细页面。当我们取消它并返回到列表页面,然后 hero 小部件返回到它的页面。

HeroMode 小部件具有动画功能,可以在两个屏幕之间启用或禁用元素。基本上,当你想禁用 Hero 小部件的动画功能时,这个小部件是必需的。如果您想了解 Hero 模式小部件,那么首先您需要了解 Hero 小部件。

是 Hero 小部件的一部分,引入这个小部件的目的是启用和禁用 Hero 小部件的动画---- 如果你不想在两个屏幕之间动画元素,然后用 HeroMode 小部件包装 Hero 小部件,我们可以通过使用它们的静态属性或动态地启用和禁用它们,然后通过包装这个小部件,当你仔细看下面的例子视频时发生了什么,那么你就可以看到这个动画中的可衡量的区别。

演示模块:

你可能感兴趣的:(flutter,动画,javascript)