Flutter，让我们把 Navigator与Route详解再讲一遍

Flutter中的Navigator与Route详解（含Navigator 1.0与2.0对比）

在Flutter应用开发中，页面之间的导航是一个非常常见的功能。无论是简单的页面跳转，还是复杂的多页面应用，Flutter中的Navigator和Route都是核心概念。理解这两个概念的作用和它们的工作方式，将帮助我们更高效地管理应用的导航逻辑。本文将在基本的Navigator和Route概念基础上，深入探讨Flutter中不同版本的导航机制，尤其是 Navigator 1.0 和 Navigator 2.0 的对比和选择。

一、Navigator 和 Route 是什么？

1. Navigator

Navigator 是 Flutter 提供的管理页面栈的组件。它通过栈（stack）的方式管理应用的页面跳转，遵循先进后出（LIFO）原则。每次跳转到新页面时，新的页面会被压入栈顶，而返回时，页面从栈顶移除。

Navigator 是全局管理应用页面导航的工具。
Navigator 提供的页面导航是基于栈的： 新页面通过 push 压入栈中，返回时通过 pop 将当前页面移除。

2. Route

Route 是 Navigator 用来表示页面的实体。每个页面在 Navigator 的栈中对应一个 Route 对象。它可以是全屏页面、对话框或其他自定义的视图，决定了页面的显示方式和动画效果。

简单来说，Navigator 是页面管理的工具，而 Route 是具体的页面实体。Navigator 通过管理 Route 实现页面的跳转和导航。

二、Navigator 的核心功能

Flutter 的 Navigator 提供了一系列方法来管理 Route，其中最常用的包括 push()、pop() 和 pushReplacement()。这些方法主要应用于 Navigator 1.0 中，提供简单的页面跳转功能。

1. Navigator.push()

push() 是导航到新页面的核心方法。它会将新的 Route 压入栈顶，并显示新页面。

dart 复制代码

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

2. Navigator.pop()

pop() 是返回上一个页面的操作。它将当前页面（栈顶的 Route）移除，并显示栈中的前一个页面。

dart 复制代码

Navigator.pop(context);

3. Navigator.pushReplacement()

有时候，我们不希望保留当前页面，而是用新页面替换当前页面。在这种情况下，可以使用 pushReplacement() 方法。

dart 复制代码

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

4. Navigator.popUntil()

如果希望返回到某个特定页面，可以使用 popUntil() 方法，该方法根据条件弹出栈中的多个 Route，直到满足条件为止。

dart 复制代码

Navigator.popUntil(context, ModalRoute.withName('/home'));

三、Route 的类型

Flutter 中的 Route 是页面的实际表现形式，而 Flutter 提供了多种类型的 Route 来适应不同的场景和需求。

MaterialPageRoute ：符合 Material Design 风格的页面路由，适合 Android 应用。

dart 复制代码

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

CupertinoPageRoute ：为 iOS 应用提供符合 Cupertino 风格的页面路由。

dart 复制代码

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

PageRouteBuilder ：允许自定义过渡动画，提供极大灵活性。

dart 复制代码

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(opacity: animation, child: child);
    },
  ),
);

DialogRoute ：用于弹窗（Dialog）的 Route。通过 showDialog() 添加一个 DialogRoute。

dart 复制代码

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text('提示'),
      content: Text('这是一个对话框'),
    );
  },
);

四、Navigator 2.0：更灵活的导航系统

1. Navigator 2.0 在移动端开发中的优势

Navigator 2.0 的灵活性不仅仅体现在 Web 端的 URL 管理上，它在移动应用中也同样非常有用，尤其在以下几种场景中能够极大简化复杂导航逻辑：

状态驱动导航 ：可以根据应用的全局状态来动态管理页面栈，适合多步骤流程或分层页面结构的导航。
嵌套导航 ：例如在一个页面中嵌套多个子页面，并且这些子页面有各自独立的导航历史。
动态页面生成 ：可以根据应用的实时数据动态生成页面栈，而不是简单地基于栈结构来"前进"和"后退"。

2. 常见开发场景中的应用

场景 1：分步骤注册流程

在 App 开发中，常常会遇到分步骤注册或表单填写的场景，例如用户需要依次填写个人信息、地址信息、支付信息等。在每一步完成后，用户可以继续跳转到下一步，或者返回上一步。

解决方案 ：

使用 RouterDelegate 来控制不同步骤的页面栈。
动态生成页面栈，每次用户完成一个步骤时，添加相应的页面到栈中。

dart 复制代码

class MyAppState {
  int currentStep = 1;

  void nextStep() {
    if (currentStep < 3) currentStep++;
  }

  void previousStep() {
    if (currentStep > 1) currentStep--;
  }
}

class MyRouterDelegate extends RouterDelegate<MyAppState>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<MyAppState> {
  @override
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  MyAppState state;

  MyRouterDelegate(this.state);

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: [
        if (state.currentStep == 1) MaterialPage(child: Step1Page()),
        if (state.currentStep == 2) MaterialPage(child: Step2Page()),
        if (state.currentStep == 3) MaterialPage(child: Step3Page()),
      ],
      onPopPage: (route, result) {
        if (!route.didPop(result)) {
          return false;
        }
        state.previousStep();
        notifyListeners();
        return true;
      },
    );
  }

  @override
  Future<void> setNewRoutePath(MyAppState configuration) async {
    state = configuration;
  }
}

实现效果 ：

用户在完成当前步骤后跳转到下一个步骤。
每次 nextStep() 会更新页面栈，并根据当前步骤状态动态显示下一个页面。
用户可以使用手机的后退按钮返回到上一步，而不是直接退出整个表单流程。

场景 2：基于用户权限的导航

在移动应用中，常常会遇到根据用户角色或权限显示不同页面的需求。例如，普通用户可以访问用户面板，而管理员则可以访问高级管理页面。

解决方案 ：

根据用户登录后获取的权限状态，动态生成页面栈。
管理员与普通用户的页面栈不同。

dart 复制代码

class MyAppState {
  bool isAdmin;

  MyAppState(this.isAdmin);
}

class MyRouterDelegate extends RouterDelegate<MyAppState>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<MyAppState> {
  @override
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  MyAppState state;

  MyRouterDelegate(this.state);

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: [
        MaterialPage(child: UserDashboardPage()),
        if (state.isAdmin) MaterialPage(child: AdminPanelPage()),
      ],
      onPopPage: (route, result) {
        if (!route.didPop(result)) {
          return false;
        }
        return true;
      },
    );
  }

  @override
  Future<void> setNewRoutePath(MyAppState configuration) async {
    state = configuration;
    notifyListeners();
  }
}

实现效果 ：

当管理员登录时，页面栈中会自动添加 AdminPanelPage，管理员可以直接访问。
普通用户登录时，页面栈不会包含管理员页面，他们只能访问用户面板。

场景 3：动态生成页面（如动态内容加载）

在某些移动应用中，页面的内容会根据实时数据动态生成。例如，在新闻应用或电商应用中，产品或文章详情页面是根据用户的点击动态生成的。在这种情况下，可以根据实时的数据更新页面栈，而不需要提前固定所有页面。

解决方案 ：

使用 RouterDelegate 来处理动态页面生成，根据应用状态决定显示哪个页面。
页面内容根据用户点击的项目动态生成，并保存在页面栈中。

dart 复制代码

class MyAppState {
  List<int> selectedProductIds = [];

  void viewProduct(int id) {
    selectedProductIds.add(id);
  }

  void closeProduct(int id) {
    selectedProductIds.remove(id);
  }
}

class MyRouterDelegate extends RouterDelegate<MyAppState>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<MyAppState> {
  @override
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  MyAppState state;

  MyRouterDelegate(this.state);

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: [
        MaterialPage(child: ProductListPage()),
        for (var id in state.selectedProductIds)
          MaterialPage(child: ProductDetailsPage(productId: id)),
      ],
      onPopPage: (route, result) {
        if (!route.didPop(result)) {
          return false;
        }
        state.closeProduct(state.selectedProductIds.last);
        notifyListeners();
        return true;
      },
    );
  }

  @override
  Future<void> setNewRoutePath(MyAppState configuration) async {
    state = configuration;
    notifyListeners();
  }
}

实现效果 ：

用户点击某个产品时，应用状态会更新，并将产品详情页面添加到页面栈中。
页面栈中的详情页面可以动态生成，当用户返回时，栈顶的页面会被移除并返回到产品列表。

场景 4：嵌套导航（如底部导航栏）

移动应用中的底部导航栏通常用于在多个模块之间切换，例如"首页"、"设置"、"个人中心"等。每个模块可能有自己独立的导航历史，用户在不同模块之间切换时，模块内的导航状态需要独立保存。

解决方案 ：

为每个底部标签页创建一个独立的 Navigator，并为每个 Navigator 管理其独立的页面栈。
每个标签页中的导航历史不会相互干扰。

dart 复制代码

class TabNavigator extends StatelessWidget {
  final GlobalKey<NavigatorState> navigatorKey;
  final List<Page> pages;

  TabNavigator({required this.navigatorKey, required this.pages});

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: pages,
      onPopPage: (route, result) {
        if (!route.didPop(result)) {
          return false;
        }
        return true;
      },
    );
  }
}

class MyRouterDelegate extends RouterDelegate<MyAppState> with ChangeNotifier, PopNavigatorRouterDelegateMixin<MyAppState> {
  final GlobalKey<NavigatorState> tab1NavigatorKey = GlobalKey<NavigatorState>();
  final GlobalKey<NavigatorState> tab2NavigatorKey = GlobalKey<NavigatorState>();

  MyAppState state;

  MyRouterDelegate(this.state);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: state.currentTabIndex,
        children: [
          TabNavigator(
            navigatorKey: tab1NavigatorKey,
            pages: [MaterialPage(child: HomePage())],
          ),
          TabNavigator(
            navigatorKey: tab2NavigatorKey,
            pages: [MaterialPage(child: SettingsPage())],
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: state.currentTabIndex,
        onTap: (index) {
          state.currentTabIndex = index;
          notifyListeners();
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
    );
  }

  @override
  Future<void> setNewRoutePath(MyAppState configuration) async {
    state = configuration;
  }
}

实现效果 ：

每个标签页都有独立的导航历史，切换标签不会丢失各自的导航状态。
例如，用户在"设置"页中点击进入某个子页面后，切换回"首页"，然后再次回到"设置"时，仍然可以看到之前的子页面。

五、Navigator 1.0 与 Navigator 2.0 的对比

特点	Navigator 1.0	Navigator 2.0
页面管理方式	基于栈的简单管理，`push` 和 `pop`	完全控制，基于应用状态和页面堆栈
URL 支持	不支持	完全支持 URL 和路由管理
复杂场景支持	适合简单场景	适合复杂场景，尤其是 Web 和桌面应用
实现难度	简单，代码量少	更复杂，需要实现多个类
典型使用场景	小型应用，简单的移动端导航	需要 URL 控制的 Web 或复杂的多页面应用

六、总结

Flutter 的 Navigator 和 Route 是页面导航的基础。随着应用需求的增长，Flutter 从 Navigator 1.0 进化到 Navigator 2.0，以适应更加复杂的导航场景。

Navigator 1.0 ：适用于大多数移动端应用，提供了简单、直观的页面跳转机制。
Navigator 2.0 ：提供了更强大的导航控制能力，适合处理复杂的导航逻辑，特别是需要 URL 管理的 Web 和桌面应用。

在开发Flutter应用时，选择合适的导航方式非常重要。如果你正在开发iOS应用，可以考虑使用AppUploader这样的iOS应用开发助手来简化应用的上传和发布流程。AppUploader提供了直观的界面和强大的功能，能帮助开发者更高效地管理应用的构建和发布过程，让你可以专注于应用的核心功能开发。

Flutter，让我们把 Navigator与Route详解 再讲一遍

Flutter中的Navigator与Route详解（含Navigator 1.0与2.0对比）

一、Navigator 和 Route 是什么？

1. Navigator

2. Route

二、Navigator 的核心功能

1. Navigator.push()

2. Navigator.pop()

3. Navigator.pushReplacement()

4. Navigator.popUntil()

三、Route 的类型

四、Navigator 2.0：更灵活的导航系统

1. Navigator 2.0 在移动端开发中的优势

2. 常见开发场景中的应用

场景 1：分步骤注册流程

场景 2：基于用户权限的导航

场景 3：动态生成页面（如动态内容加载）

场景 4：嵌套导航（如底部导航栏）

五、Navigator 1.0 与 Navigator 2.0 的对比

六、总结

Flutter，让我们把 Navigator与Route详解再讲一遍