面试题：Flutter 中 MaterialPageRoute 与动画结合优化用户体验

实现思路

导入必要的库：确保项目中导入了 flutter/material.dart 库，因为 MaterialPageRoute 和动画相关的类都在这个库中。
创建自定义路由：继承 PageRouteBuilder 类，它允许我们自定义页面过渡动画。在 PageRouteBuilder 的构造函数中，我们可以设置 pageBuilder 来指定要跳转的页面（即购物车页面），同时设置 transitionsBuilder 来定义动画效果。
定义动画效果：在 transitionsBuilder 中，我们可以使用 AnimatedBuilder 结合 AnimationController 和 CurvedAnimation 来创建动画。例如，可以使用 FadeTransition 实现淡入淡出效果，ScaleTransition 实现缩放效果，SlideTransition 实现滑动效果等，或者将多种效果组合使用。

关键代码

import 'package:flutter/material.dart';

class CartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('购物车'),
      ),
      body: Center(
        child: Text('这是购物车页面'),
      ),
    );
  }
}

// 跳转到购物车页面的方法
void navigateToCart(BuildContext context) {
  Navigator.of(context).push(
    PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => CartPage(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        const begin = Offset(1.0, 0.0);
        const end = Offset.zero;
        const curve = Curves.ease;

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

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

在商品详情页中，调用 navigateToCart 方法来实现带有动画的页面跳转：

class ProductDetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品详情'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            navigateToCart(context);
          },
          child: Text('跳转到购物车'),
        ),
      ),
    );
  }
}

上述代码中，navigateToCart 方法使用 PageRouteBuilder 自定义了从商品详情页到购物车页面的跳转动画，这里使用了 SlideTransition 实现从右侧滑入的效果。在商品详情页 ProductDetailPage 中，通过点击按钮调用 navigateToCart 方法实现页面跳转并展示动画。

星途面试题库

面试题：Flutter 中 MaterialPageRoute 与动画结合优化用户体验

知识考点

面试题答案

实现思路

关键代码