面试题：Flutter 中 MaterialPageRoute 的基本使用及原理

1. 使用 MaterialPageRoute 实现页面跳转

在 Flutter 项目中，使用 MaterialPageRoute 实现页面跳转主要通过 Navigator.push 方法，以下是示例代码：

// 定义要跳转的目标页面
class TargetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Target Page'),
      ),
      body: Center(
        child: Text('This is the target page'),
      ),
    );
  }
}

// 在源页面中触发跳转
class SourcePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Source Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => TargetPage()),
            );
          },
          child: Text('Jump to Target Page'),
        ),
      ),
    );
  }
}

在上述代码中，Navigator.push 方法接收两个参数，context 用于获取导航器，MaterialPageRoute 用于定义页面跳转的路由，builder 回调函数返回目标页面的实例。

2. MaterialPageRoute 背后的工作原理

页面管理：MaterialPageRoute 是 Flutter 导航框架中用于实现页面跳转的一种路由方式。它在导航栈中管理页面，当调用 Navigator.push 并传入 MaterialPageRoute 时，新的页面会被压入导航栈顶部，显示在屏幕上。当调用 Navigator.pop 时，当前页面从导航栈中弹出，上一个页面重新显示。
动画效果：MaterialPageRoute 提供了默认的动画效果，通常是从右到左（在水平方向布局的情况下）的滑动过渡动画，这符合 Material Design 的设计规范。这种动画效果通过 PageRouteBuilder 来实现，它可以定义页面的进出动画。MaterialPageRoute 内部使用了 AnimatedBuilder 和 Tween 等类来控制动画的过渡，使得页面切换更加平滑和自然。
构建页面：MaterialPageRoute 的 builder 回调函数用于构建目标页面的实例。当路由被激活时，Flutter 会调用这个 builder 来创建页面的 Widget 树。这个过程涉及到 Flutter 的渲染机制，从 Widget 树创建 Element 树，再到 RenderObject 树，最终在屏幕上绘制出页面。

星途面试题库

面试题：Flutter 中 MaterialPageRoute 的基本使用及原理

知识考点

面试题答案

1. 使用 MaterialPageRoute 实现页面跳转

2. MaterialPageRoute 背后的工作原理