跨屏幕动画化小部件

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

使用 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 的 Hero 小部件包装第二个屏幕上的 Image。

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

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-06-26。 查看源代码 或 报告问题.