面试题：Flutter中Navigator与路由管理优化

使用 Navigator 进行高效路由管理及避免内存泄漏

使用 GlobalKey<NavigatorState>
- 在应用的顶层或合适的位置定义一个 GlobalKey<NavigatorState>。例如：
```
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
```
- 然后在 MaterialApp 中使用这个 key：
```
MaterialApp(
  key: navigatorKey,
  // 其他配置
);
```
- 通过这种方式，可以方便地在应用的任何地方访问 Navigator，而无需传递 BuildContext 到深层组件，避免因不当的上下文引用导致的内存泄漏。

正确管理路由

添加路由：使用 Navigator.push 方法时，确保只在需要的时候添加新的路由。例如：

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
);

移除路由：当页面不再需要时，及时移除。例如，在 NewPage 中可以使用 Navigator.pop 来移除当前页面：

ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: Text('返回'),
);

使用 PageStorage：对于需要保持状态的页面，可以使用 PageStorage。例如：

class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with PageStorageMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Page'),
      ),
      body: Center(
        child: Text('This is my page'),
      ),
    );
  }

  @override
  Object get pageStorageKey => const ValueKey('my_page_key');
}

这样在页面切换时，其状态可以得到保存，避免重复创建和销毁导致的性能问题和潜在的内存泄漏。

处理复杂的页面返回逻辑

返回指定页面而非上一级页面

使用 Navigator.popUntil：可以使用 Navigator.popUntil 方法结合一个匹配函数来返回到指定页面。例如，假设我们有三个页面 HomePage、Page1、Page2，并且希望从 Page2 直接返回到 HomePage。
首先，为 HomePage 定义一个唯一的 RouteSettings.name：

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('This is home page'),
      ),
    );
  }
}

// 在路由配置中设置 name
MaterialApp(
  routes: {
    '/': (context) => const HomePage(),
    '/page1': (context) => const Page1(),
    '/page2': (context) => const Page2(),
  },
);

然后在 Page2 中使用 Navigator.popUntil：

class Page2 extends StatelessWidget {
  const Page2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.popUntil(
              context,
              ModalRoute.withName('/'),
            );
          },
          child: Text('返回首页'),
        ),
      ),
    );
  }
}

这里 ModalRoute.withName('/') 是一个匹配函数，它会找到名称为 '/' 的路由并将其之上的所有路由移除，从而实现返回指定页面的功能。

使用自定义路由栈管理

可以创建一个自定义的路由栈管理类来更灵活地处理返回逻辑。例如：

class RouteStackManager {
  static List<String> routeStack = [];

  static void push(String routeName) {
    routeStack.add(routeName);
  }

  static void pop() {
    if (routeStack.isNotEmpty) {
      routeStack.removeLast();
    }
  }

  static void popUntil(String targetRouteName) {
    while (routeStack.isNotEmpty && routeStack.last != targetRouteName) {
      routeStack.removeLast();
    }
  }
}

在页面的 Navigator.push 和 Navigator.pop 操作时，同步更新这个自定义的路由栈。例如，在 push 新页面时：

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
);
RouteStackManager.push('/new_page');

在处理返回逻辑时，根据自定义路由栈进行操作：

ElevatedButton(
  onPressed: () {
    RouteStackManager.popUntil('/home_page');
    Navigator.popUntil(
      context,
      (route) => route.settings.name == '/home_page',
    );
  },
  child: Text('返回指定页面'),
);

这种方式提供了更细粒度的路由管理，对于复杂的页面返回逻辑更为适用。

面试题：Flutter中Navigator与路由管理优化

知识考点

面试题答案

使用 Navigator 进行高效路由管理及避免内存泄漏

处理复杂的页面返回逻辑