如何在 Flutter 中实现屏幕之间的自定义转换？ - 前端面试题

在 Flutter 中实现屏幕之间的自定义转换可以通过多种方式进行，这里我将通过一个简单的例子来说明如何使用 PageRouteBuilder 来创建自定义页面转换效果。

首先，让我们从基本的 Flutter 页面转换开始。通常，当我们需要在 Flutter 应用中从一个屏幕（或页面）导航到另一个屏幕时，我们会使用 Navigator.push 方法。默认情况下，这会产生一个直接的页面推入效果，但如果我们想要自定义这种效果，我们可以使用 PageRouteBuilder。

以下是一个示例，展示了如何使用 PageRouteBuilder 创建一个缩放和淡入效果的页面转换：

dart
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('第一页')),
      body: Center(
        child: ElevatedButton(
          child: Text('打开第二页'),
          onPressed: () {
            Navigator.push(context, PageRouteBuilder(
              pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
              transitionsBuilder: (context, animation, secondaryAnimation, child) {
                var begin = 0.0;
                var end = 1.0;
                var curve = Curves.ease;

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

                return FadeTransition(
                  opacity: opacityAnimation,
                  child: ScaleTransition(
                    scale: tween,
                    child: child,
                  ),
                );
              },
              transitionDuration: Duration(milliseconds: 500),
            ));
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第二页')),
      body: Center(
        child: Text('欢迎来到第二页！'),
      ),
    );
  }
}

在这个例子中，当用户点击第一页中的按钮时，我们创建了一个 PageRouteBuilder。pageBuilder 参数负责提供要导航到的新页面（在这里是 SecondPage）。而 transitionsBuilder 参数则定义了转换效果，我们使用了 FadeTransition 和 ScaleTransition 来组合淡入和缩放效果。

通过 animation.drive(tween)，我们控制了动画的具体行为，其中 tween 定义了开始和结束的状态，CurveTween 增加了动画的缓动效果。最终，通过修改 transitionDuration 参数，我们可以控制转换的持续时间。

这样，我们就能在 Flutter 应用中实现一个简单而又美观的自定义屏幕转换效果。