时间戳

首页 > 解决方案 > Flutter - 我可以用 Hero 包装每个小部件来为它们设置动画吗

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

问题描述

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

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

标签： flutterdartanimationwidget

解决方案

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

推荐阅读