Flutter 中的路由动画库：实现自定义页面切换与过渡效果管理

在Flutter中，你可以使用PageRouteBuilder和Hero等工具来实现自定义页面切换和过渡效果。PageRouteBuilder允许你完全控制页面之间的过渡动画，而Hero则用于在页面之间共享元素的平滑过渡。

使用 PageRouteBuilder 实现自定义过渡动画

PageRouteBuilder 允许你自定义页面之间的过渡动画。你可以通过定义 transitionsBuilder 来创建自定义的动画效果。

import 'package:flutter/material.dart';

class CustomPageRoute extends PageRouteBuilder {
  final Widget enterPage;

  CustomPageRoute({required this.enterPage})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              enterPage,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              FadeTransition(
            opacity: animation,
            child: child,
          ),
        );
}

void main() {
  runApp(MaterialApp(
    home: FirstPage(),
  ));
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              CustomPageRoute(enterPage: SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: Text('This is the second page'),
      ),
    );
  }
}

在这个例子中，CustomPageRoute 使用了 FadeTransition 来实现页面之间的淡入淡出效果。你可以根据需要替换为其他动画效果，如 SlideTransition、ScaleTransition 等。

使用 Hero 实现共享元素过渡

Hero 是 Flutter 中用于在页面之间共享元素的工具，通常用于实现平滑的过渡效果。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: FirstPage(),
  ));
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: Hero(
          tag: 'heroTag',
          child: GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SecondPage()),
              );
            },
            child: Icon(Icons.star, size: 100.0),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: Hero(
          tag: 'heroTag',
          child: Icon(Icons.star, size: 200.0),
        ),
      ),
    );
  }
}

在这个例子中，Hero 标签用于在两个页面之间共享一个图标，并实现平滑的过渡效果。

通过这些工具，你可以灵活地创建和管理 Flutter 应用中的页面切换和过渡动画。