面试题：Flutter 中 MaterialPageRoute 个性化导航栏动画定制

Question

在使用 MaterialPageRoute 构建个性化导航栏时，要求实现一种非默认的页面切换动画，比如从底部向上滑动并带有淡入效果的动画。请详细说明实现思路，并给出核心代码片段，包括如何集成到导航栏跳转逻辑中。

Answer 1

实现思路

1. 自定义 PageRouteBuilder：通过继承 PageRouteBuilder 来自定义页面切换动画。PageRouteBuilder 允许我们自定义页面过渡的各个阶段的动画。
2. 定义动画曲线：选择合适的动画曲线来控制动画的速度变化，例如 Curves.easeInOut。
3. 实现淡入和滑动动画：利用 AnimatedBuilder 结合 Tween 来创建从底部向上滑动并淡入的动画效果。
4. 集成到导航栏跳转逻辑：在使用 MaterialPageRoute 的地方，替换为自定义的 PageRouteBuilder。

核心代码片段

import 'package:flutter/material.dart';

class SlideUpFadeRoute<T> extends PageRouteBuilder<T> {
  final Widget page;
  SlideUpFadeRoute({required this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) {
            const begin = Offset(0.0, 1.0);
            const end = Offset.zero;
            const curve = Curves.easeInOut;

            var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

            return SlideTransition(
              position: animation.drive(tween),
              child: FadeTransition(
                opacity: animation,
                child: child,
              ),
            );
          },
        );
}

集成到导航栏跳转逻辑

假设在导航栏的某个按钮点击事件中进行页面跳转：

ElevatedButton(
  onPressed: () {
    Navigator.of(context).push(
      SlideUpFadeRoute(
        page: const NextPage(), // 目标页面
      ),
    );
  },
  child: const Text('跳转到下一页'),
)

在上述代码中，SlideUpFadeRoute 自定义了从底部向上滑动并带有淡入效果的动画。在导航栏按钮的 onPressed 回调中，使用 Navigator.of(context).push 并传入 SlideUpFadeRoute 来实现带有自定义动画的页面跳转。NextPage 是目标页面，你需要根据实际情况替换为真实的页面。