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

Question

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

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

Answer 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);
        },
      ),
    );
  }
}