面试题：Flutter中Navigator组件在响应式设计里如何管理页面路由

Question

请阐述在Flutter响应式设计场景下，Navigator组件是怎样管理页面之间的路由切换的，结合代码示例说明如何通过Navigator实现页面的入栈和出栈操作，以适配不同屏幕尺寸和方向变化时的页面导航需求。

Answer 1

Navigator 管理页面路由切换原理

在 Flutter 的响应式设计场景下，Navigator 是 Flutter 应用中用于管理页面栈的组件。它以栈的方式来管理路由（页面），新打开的页面会被压入栈顶，当用户返回时，栈顶的页面会被弹出。这样的设计使得页面导航具有直观的顺序，并且能很好地适配不同屏幕尺寸和方向变化，因为无论屏幕如何变化，页面栈的管理逻辑不变。

实现页面入栈操作代码示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('跳转到详情页'),
          onPressed: () {
            // 使用 Navigator.push 方法实现页面入栈
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailPage()),
            );
          },
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('详情页'),
      ),
      body: Center(
        child: Text('这是详情页'),
      ),
    );
  }
}

在上述代码中，在 HomePage 中通过 Navigator.push 方法，将 DetailPage 压入栈中，实现了页面的入栈操作。MaterialPageRoute 用于定义页面的路由，它会根据不同平台生成相应的过渡动画等，适配不同场景。

实现页面出栈操作代码示例

在 DetailPage 中添加返回按钮实现页面出栈：

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('详情页'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            // 使用 Navigator.pop 方法实现页面出栈
            Navigator.pop(context);
          },
        ),
      ),
      body: Center(
        child: Text('这是详情页'),
      ),
    );
  }
}

在 DetailPage 的 AppBar 中添加了一个返回按钮，点击按钮时调用 Navigator.pop(context) 方法，将当前页面（DetailPage）从栈中弹出，回到上一个页面（HomePage），完成页面出栈操作。这种方式在不同屏幕尺寸和方向变化时都能正常工作，保证了页面导航的一致性。