英文:
How to make Hero animation for two widgets
问题
我需要在两个不同的小部件中制作类似“Hero”一样的动画。这可能吗？
小部件A具有图像A，小部件B也具有图像A，但小部件A位于ListView内，小部件B是全屏图像（它隐藏了ListView）。
英文:
I need to make animation like Hero in two different widgets. Is that possible?<Br>
Widget a with image a and widget b with image a but widget a is inside a listview and widget b is full screen image(it hide listview)
答案1
得分: 1
以下是已翻译的内容：
这很简单。您只需将两个小部件都包装在一个具有相同TAG属性值的Hero小部件中。下面的片段假设您在ListTile中有一个Image，用户点击后会显示一个新页面，其中该图像将由Hero小部件进行动画处理。
在列表页面中，列表项可以是
ListTile(
leading: Hero(
tag: IMAGE_TAG, // 在不同页面中必须相同
child: Image(image: AssetImage('you_asset_dir/yourImage.png')),
),
title: Text('Anything'),
onTap: () => // 转到全屏页面
);
在全屏页面中
Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Hero(
tag: 'IMAGE_TAG', // 在列表项Hero小部件中必须有相同的值
child: Image(image: AssetImage('you_asset_dir/yourImage.png')),
),
),
);
注意：在不同上下文/页面中，Hero标签属性必须相同，但如果您有一个使用Hero小部件的许多项目的列表，每个在相同上下文/页面中的Hero小部件必须具有不同的tag值。
要深入了解有关Hero动画的概念，请查阅官方文档。
英文:
It's very simple. You just need to wrap both widgets in a Hero widget using the same TAG property value. The snippet below is assuming you've a Image in a ListTile and after user clicks you show a new page with the same image but that image will be animated by Hero widget.
In list page the list items can be
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
);
In 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: The Hero tag property must be the same in different contexts but if you have a list with many items using Hero widget each Hero int the same context/page must have different tag values.
To deep dive concepts about Hero animations check the official doc
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论