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 中，Flutter 应用程序屏幕上的每个组件都是一个小工具。屏幕的透视图完全依赖于用于构建应用程序的小部件的选择和分组。此外，应用程序代码的结构是一个小部件树。

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

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

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

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

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

HeroMode 小部件

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

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

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

演示模块: