Flutter - 我可以用 Hero 包装每个小部件来为它们设置动画吗

Posted 2023-02-23

【中文标题】Flutter - 我可以用 Hero 包装每个小部件来为它们设置动画吗

【英文标题】：Flutter - Can I wrap every widget with Hero to animate them

【发布时间】：2021-07-08 17:27:02

【问题描述】：

Hero 小部件通过分析自行为不同的小部件提供动画。那么我可以用 Hero 包装不同的小部件，以使它们具有动画效果并看起来不错吗？因为我不知道结果或者它会显示或完全不显示什么动画，哪个小部件会，哪个不会......所以我可以用她的小部件包装它们中的大部分吗？如果是，那么哪些小部件可以被包裹以获得动画，与英雄包裹后我是否需要做任何额外的工作？请举个例子。

或者有什么方法可以一次将动画应用到所有可能的小部件中的整个应用程序，这样会更高效且更省心？

【问题讨论】：

自己试试吧 ;) 没有比这更简单的方法了。

【参考方案1】：

Hero 小部件会自动在两条导航路线之间创建一个 Hero 过渡。

Flutter 将确定小部件在两条路线中的位置，并为位置之间的变化设置动画。

假设您想使用一张图片作为您的英雄。

把它放在两个页面路由上，一个是你要转换的，一个是你要转换的 正在过渡到。

然后，在两个页面上使用 Hero 小部件包装图像。添加标签。这可以是任何对象。重要的是在两个页面上使用相同的标签，以便 Flutter 知道您正在为哪个英雄设置动画。

你已经完成了。

import 'package:flutter/material.dart';

void main() => runApp(HeroApp());

class HeroApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Transition Demo',
      home: MainScreen(),
    );
  


class MainScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://picsum.photos/250?image=9',
          ),
        ),
        onTap: () 
          Navigator.push(context, MaterialPageRoute(builder: (_) 
            return DetailScreen();
          ));
        ,
      ),
    );
  


class DetailScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://picsum.photos/250?image=9',
            ),
          ),
        ),
        onTap: () 
          Navigator.pop(context);
        ,
      ),
    );
  

【讨论】：

你能把一个英雄包裹在一个小部件周围，比如一张在下一个屏幕上展开的卡片，而不是一张图片吗？>

是的。将 Hero 小部件包裹在要设置动画的小部件周围。