时间戳

首页 > 解决方案 > 如何为两个小部件制作英雄动画

flutter - 如何为两个小部件制作英雄动画

问题描述

我需要在两个不同的小部件中制作像英雄这样的动画。那可能吗？
带有图像 a 的小部件 a 和带有图像 a 的小部件 b 但小部件 a 在列表视图内，小部件 b 是全屏图像（它隐藏列表视图）

标签： flutterflutter-animation

解决方案

这很简单。您只需使用相同的 TAG 属性值将两个小部件包装在 Hero 小部件中。下面的代码片段假设您在 aImage中，ListTile并且在用户单击后您会显示一个具有相同图像的新页面，但该图像将由Hero小部件进行动画处理。

在列表页面中，列表项可以是

ListTile(
      leading: Hero(
        tag: IMAGE_TAG, // must be the same in different pages
        child: Image(image: AssetImage('you_asset_dir/yourImage.png')),
      ),
      title: Text('Anything'),
      onTap: () => // Just go to full screen page
    );

在全屏页面

Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Hero(
          tag: 'IMAGE_TAG', // must be the SAME VALUE DEFINED IN list tile hero child widget.  
          child: Image(image: AssetImage('you_asset_dir/yourImage.png')),
        ),
      ),
    );

OBS：Hero标签属性在不同的上下文中必须相同，但是如果您有一个包含许多使用Hero小部件的项目的列表，则每个Heroint 相同的上下文/页面必须具有不同的tag值。

要深入了解英雄动画的概念，请查看官方文档

推荐阅读