Flutter Widget 之Hero

Hero Transitions 是一种常见的UI模式。

他们让那个用户知道他们改变了屏幕，同时让交互的焦点保持在前沿和中心。

Flutter有Hero Widget，它将自动在两个导航器路径之间创建一个Hero过渡。

Flutter会弄清除Widget在两个route中的位置，并为位置之间的变化设置动画。

打个比方，你想用一张图片作为你的Hero。

将它放在两个页面route上，您将要离开的route和您要达到的route

class MyHomePage extends StatelessWidget {
    @override
    Widget build(context) {
        ...
        Image.asset('images/dash.jpg),
        ...
    }
}

class MyDetailPage extends StatelessWidget {
    @override
    Widget build(context) {
        ...
        Image.asset('image/dash.jpg'),
        ...
    }
}

然后，在两个页面上用Hero Widget包裹该图片，并添加tag，tag这可以是任何对象。

class MyHomePage extends StatelessWidget {
    @override
    Widget build(context) {
        ...
        Hero (
            tag: 'dash',
            child: Image.asset('images/dash.jpg),
        ),
        ...
    }
}

class MyDetailPage extends StatelessWidget {
    @override
    Widget build(context) {
        ...
        Hero (
            tag: 'dash',
            child: Image.asset('image/dash.jpg'),
        )
        ...
    }
}

重要的是在两个页面上使用相同的标签，以便Flutter知道我们正在制作哪个Hero。

这样就完成了。

为了获得最佳效果，请在两个屏幕上使Hero Widget下方的widget tree相同。

当然， Hero不仅可以包裹image。你可以尝试使用Clips来创造一些非常酷的动画效果。

如果想了解有关Hero的内容，或者关于Flutter的其他功能，请访问flutter.io

原文翻译自视频：视频地址