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

如何解决Flutter - 我可以用 Hero 包裹每个小部件来为它们设置动画吗

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

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

解决方法

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