在屏幕之间动画化小部件

在用户在屏幕之间导航时，引导用户浏览应用程序通常很有帮助。引导用户浏览应用程序的一种常见技术是在一个屏幕到下一个屏幕之间动画化小部件。这将创建一个连接两个屏幕的视觉锚点。

使用 Hero 小部件在屏幕之间动画化小部件。此食谱使用以下步骤

1. 创建两个显示相同图像的屏幕。
2. 在第一个屏幕上添加一个Hero小部件。
3. 在第二个屏幕上添加一个Hero小部件。

在这个例子中，在两个屏幕上显示相同的图像。当用户点击图像时，将图像从第一个屏幕动画到第二个屏幕。现在，创建视觉结构；在接下来的步骤中处理动画。

import 'package:flutter/material.dart';

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main Screen'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return const DetailScreen();
          }));
        },
        child: Image.network(
          'https://picsum.photos/250?image=9',
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Image.network(
            'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

要使用动画将两个屏幕连接在一起，请将两个屏幕上的Image小部件包装在Hero小部件中。Hero小部件需要两个参数

tag

标识Hero的对象。它必须在两个屏幕上都相同。

child

要在屏幕之间进行动画的小部件。

Hero(
  tag: 'imageHero',
  child: Image.network(
    'https://picsum.photos/250?image=9',
  ),
)

要完成与第一个屏幕的连接，请使用与第一个屏幕中Hero相同的tag将第二个屏幕上的Image包装在Hero小部件中。

在将Hero小部件应用于第二个屏幕后，屏幕之间的动画就会正常工作。

Hero(
  tag: 'imageHero',
  child: Image.network(
    'https://picsum.photos/250?image=9',
  ),
)

import 'package:flutter/material.dart';

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

class HeroApp extends StatelessWidget {
  const HeroApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Transition Demo',
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

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

class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});

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