Flutter系列之Navigator组件使用

最新推荐文章于 2024-04-01 10:41:38 发布
最新推荐文章于 2024-04-01 10:41:38 发布
阅读量3k 收藏 7
点赞数 1
分类专栏： Flutter 文章标签： flutter navigator pushName route MaterialApp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jzman/article/details/111569526
版权

PS：想做一件事很容易，真正去做一件事很困难。

同系列文章如下：

Navigator 使用堆栈规则来管理 Widget，Navigator 记录了页面访问记录，可以使用 Navigator 来完成页面之间的跳转操作。

在 Android 开发中，我们平时说的跳转都是指的是 Activity 的跳转，也称为页面跳转，在 Fluter 中都是指的是 Route 的跳转，Android 中的页面在 Flutter 中对应 Route，Navigator 负责 Route 对象堆栈的管理，并提供管理堆栈的方法，如 Navigator.push 和 Navigator.pop。

如上 Flutter 提供了 Route 入栈、Route 出栈的方法，Android 中一些设备有返回键，这个返回键是兼容 Flutter 的 Navigator.push 和 Navigator.pop 方法，如果某些设备没有对应的返回键可以在 AppBar 中自行添加返回按钮， Scaffold 中已经添加了返回按钮，触发的时候会调用 Navigator.pop 操作，本文内容如下：

  1. 基本路由导航
  2. 路由参数传递
  3. 其他路由导航
基本路由导航

前面提到 Flutter 中使用堆栈来管理 Widget，入栈、出栈的方法分别是 Navigator.push 和 Navigator.pop，通过这两个方法来完成页面之间的跳转、回退操作。

Navigator.push

Navigator.push 用来执行 Route 的入栈操作，就可以通过指定的 Route 跳转到对应的页面了，方法如下：

/// 参数：(上下文，具体路由)
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
    return Navigator.of(context).push(route);
}

使用 MaterialPageRoute 构建对应页面的路由，使用方式如下：

// 跳转到NavigatorPushPopPage
_navigateToPage(context, NavigatorPushPopPage());

/// Navigator.push
/// 页面跳转
_navigateToPage(BuildContext context, Widget widget) {
  Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
    return widget;
  }));
}
Navigator.pop

Navigator.pop 用来执行 Route 的退栈操作，即页面回退，可以添加可选参数 result 作为页面返回时携带的参数，方法如下：

/// 参数：(上下文，返回时携带的参数(可选参数))
static bool pop<T extends Object>(BuildContext context, [ T result ]) {
    return Navigator.of(context).pop<T>(result);
}

如下，点击 IconButton 退出当前页面：

IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () => Navigator.pop(context)),
Navigator.pushnamed

Navigator.pushnamed 用来执行已命名 Route 的入栈操作，可以在通过可选参数 arguments 传递参数，方法如下：

/// 参数：(上下文，路由名称，携带的参数(可选参数))
static Future<T> pushNamed<T extends Object>(
    BuildContext context,
    String routeName, {
    Object arguments,
   }) {
    return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
}

使用时首先在 MaterialApp 里面将对应的路由名称添加到路由表 routes 中，代码参考如下：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
      routes: <String, WidgetBuilder>{
        // 对应路由/NavigatorPushNamedPage
        NavigatorPushNamedPage.routeName: (BuildContext context) =>
            NavigatorPushNamedPage(),
      },
    );
  }
}

/// page
/// Navigator.pushNamed
/// 使用已命名路由
class NavigatorPushNamedPage extends StatelessWidget {
  static final routeName = '/NavigatorPushNamedPage';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Navigator.pushNamed"),
        centerTitle: true,
      ),
      body: Center(
        child: Text(
          "Navigator.pushNamed",
          style: TextStyle(fontSize: 18),
        ),
      ),
    );
  }
}

然后就可以使用 Navigator.pushNamed 跳转到 NavigatorPushNamedPage 这个页面了，如下：

// 跳转到NavigatorPushNamedPage
_navigatePushNamedPage(context, NavigatorPushNamedPage.routeName);

/// Navigator.pushNamed
/// 页面跳转
_navigatePushNamedPage(BuildContext context, String routeName,
    [Object arguments]) {
  Navigator.pushNamed(context, routeName, arguments: arguments);
}

以上就是 Flutter 中最基础的页面导航方式，无论是 Navigator.push 还是 Navigator.pushNamed 都是基于 NavigatorState 中的 push 方法实现的，NavigatorState 通过具体的 BuildContext 由 Navigator.of(context) 获取，NavigatorState 的 push 方法如下：

/// NavigatorState.push
Future<T> push<T extends Object>(Route<T> route) {
    assert(!_debugLocked);
    assert(() { _debugLocked = true; return true; }());
    assert(route != null);
    assert(route._navigator == null);
    final Route<dynamic> oldRoute = _history.isNotEmpty ? _history.last : null;
    route._navigator = this;
    route.install(_currentOverlayEntry);
    _history.add(route);
    route.didPush();
    route.didChangeNext(null);
    if (oldRoute != null) {
      oldRoute.didChangeNext(route);
      route.didChangePrevious(oldRoute);
    }
    for (NavigatorObserver observer in widget.observers)
      observer.didPush(route, oldRoute);
    RouteNotificationMessages.maybeNotifyRouteChange(_routePushedMethod, route, oldRoute);
    assert(() { _debugLocked = false; return true; }());
    _afterNavigation(route);
    return route.popped;
}

下面介绍一下 Fluter 中参数的传递，包括页面跳转时参数的传递以及页面回退是参数的传递。

路由参数传递

页面跳转过程中的参数传递包括页面跳转时携带参数和页面回退时携带参数。

Navigator.push携带参数

使用 Navigator.push 携带参数进行页面跳转，参数是通过对应页面的构造方法接收的，具体使用参考如下：

/// 跳转到NavigatorPushWithParamPage
_navigateToPage(context,
    NavigatorPushWithParamPage(
      param: "this info from last page!",
    ));

/// Navigator.push/pop
/// 页面跳转
_navigateToPage(BuildContext context, Widget widget) {
  Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
    return widget;
  }));
}

/// page
/// Navigator.push携带参数
class NavigatorPushWithParamPage extends StatelessWidget {
  // 参数
  final String param;

  NavigatorPushWithParamPage({
    this.param,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Navigator.push携带参数"),
        centerTitle: true,
      ),
      body: Center(
        child: Text(
          "arguments:${this.param}",
          style: TextStyle(fontSize: 18),
        ),
      ),
    );
  }
}
Navigator.pushNamed携带参数

从上文可知 Navigator.pushNamed(context,routrName,{arguments}) 方法参数中的可选参数 arguments 就是跳转要携带的参数，首先在 MaterialApp 下的 onGenerateRoute 中接收通过 arguments 传递过来的参数，如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
      // 参数接收
      onGenerateRoute: (RouteSettings settings) {
        if (settings.name == NavigatorPushNamedWithParamPage.routeName) {
          return MaterialPageRoute<String>(builder: (BuildContext context) {
            return NavigatorPushNamedWithParamPage(settings.arguments);
          });
        }else{
          return null;
        }
      },
    );
  }
}

然后使用 Navigator.pushNamed 进行页面跳转，参数还是对应页面的构造方法接收，参考如下：

/// 跳转到NavigatorPushNamedWithParamPage
_navigatePushNamedPage(
    context,
    NavigatorPushNamedWithParamPage.routeName,
    "this info from last page!");
    
/// Navigator.pushNamed携带参数
_navigatePushNamedPage(BuildContext context, String routeName,
    [Object arguments]) {
  Navigator.pushNamed(context, routeName, arguments: arguments);
}

/// page
/// Navigator.pushNamed携带参数
/// 使用已命名路由
class NavigatorPushNamedWithParamPage extends StatelessWidget {
  static final String routeName = '/NavigatorPushNamedWithParamPage';
  final String info;

  NavigatorPushNamedWithParamPage(this.info);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Navigator.pushNamed携带参数"),
          centerTitle: true,
        ),
        body: Center(
          child: Text(
            "arguments:${this.info}",
            style: TextStyle(fontSize: 18),
          ),
        ),
      ),
    );
  }
}
页面返回时携带参数

从上文可知 Navigator.pop(context,[result]) 方法参数中的可选参数 result 就是页面回退时携带的参数，Navigator.push 会返回一个 Future 在 then 语句中处理页面回退的结果，具体使用参考如下：

/// 跳转到NavigatorPopWithParamPage
_navigatePopWithParamPage(context, NavigatorPopWithParamPage());

/// Navigator.pop返回时携带参数
_navigatePopWithParamPage(BuildContext context, Widget widget) {
  Navigator.push<String>(context,
      MaterialPageRoute(builder: (BuildContext context) {
    return widget;
  })).then((result) {
    // 返回时携带参数处理
    Toast.show("Navigator.pop返回时携带参数：" + result, context);
  });
}

/// page
/// Navigator.pop返回时携带参数
class NavigatorPopWithParamPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        child: Scaffold(
          appBar: AppBar(
            title: Text("Navigator.pop返回时携带参数"),
            centerTitle: true,
          ),
          body: Center(
            child: Text(
              "Navigator.pop返回时携带参数",
              style: TextStyle(fontSize: 18),
            ),
          ),
        ),
        onWillPop: () => _popBack(context));
  }

  /// 页面返回并设置返回参数，类似Android中的setResult方法
  _setResult(BuildContext context) {
    Navigator.pop(context, "this message from NavigatorPopWithParamPage!");
  }

  /// 统一处理返回键
  Future<bool> _popBack(BuildContext context) {
    _setResult(context);
    return Future.value(false);
  }
}
其他路由导航

其他常用路由导航方式如下：

// 从Navigator中移除当前所在路由再跳转到新的路由，相当于finish再startActivity
Navigator.popAndPushNamed
// 根据指定的Route直接返回，在此之前的路由会被清除
Navigator.popUntil
// 跳转到新的Route，并将指定Route之前的的Route清空，pushNamedAndRemoveUntil与之类似
Navigator.pushAndRemoveUntil
// 页面替换，pushReplacementNamed与之类似
Navigator.pushReplacement

其他与路由相关的操作方法就不一一列举了，可以查看相关 API。

在这里插入图片描述

躬行之
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
flutter路由 Navigator.pushNamed传参
Will_Pass的博客
06-16 6752
觉得有用点个赞 Routers.dart 这个文件用于配置路由 import 'package:flutter/material.dart'; import 'package:flutterapp/searchPage.dart'; import 'package:flutterapp/tabs.dart'; import 'form.dart'; //配置路由 final routes = { "/": (context, {arguments}) => Tabs(), "/form"
flutter中页面跳转之Navigator
可可的博客
03-08 3622
核心概念 Route 和 Navigator。 定义： Route ：是页面的一个抽象。 路由(Route)在移动开发中通常指页面（Page），这跟web开发中单页应用的Route概念意义是相同的，Route在Android中通常指一个Activity，在iOS中指一个ViewController。 那么，路由就是不同Route之间的跳转。 Navigator：是负责管理Route的Widget，并且通过入栈和出栈来实现页面间的跳转。 Navigator如何管理 Navigator是一个栈结构，通过p
flutter系列之:在flutter中使用导航Navigator
程序那些事
02-20 1158
一个APP如果没有页面跳转那么是没有灵魂的，页面跳转的一个常用说法就是Navigator,flutter作为一个最为优秀的前端框架，Navigator肯定是必不可少的，那么在flutter中如何使用Navigator呢？一起来看看吧。Navigator是每个flutter app都少不了的组件，希望大家能够掌握。
探索无尽的宇宙：使用 Navigator 进行地理编码
gitblog_00033的博客
03-18 332
探索无尽的宇宙：使用 Navigator 进行地理编码 https://gitcode.com/treffynnon/Navigator?utm_source=artical_gitcode 如果你正在寻找一个强大而灵活的地理编码库，那么 Navigator 可能正是你需要的工具。Navigator 是一个开源的 JavaScript 库，它允许您将地址转换为坐标，并且可以从坐标反向查找地址。 导...
Flutter路由之Navigator详解
watertekhqx的博客
05-28 5896
含义： Navigator 继承自 StatefulWidget，它也是小组件，它有很多相关静态函数，可以帮我们达到页面跳转和数据交互的功能： push 将设置的router信息推送到Navigator上，实现页面跳转。 of 主要是获取 Navigator最近实例的好状态。 pop 导航到新页面，或者返回到上个页面。 canPop 判断是否可以导航到新页面 maybePop 可能会导航到新页面 ...
【Flutter开发】Navigator2.0介绍及使用
公众号：BennuCTech
05-18 1109
Navigator1.0是通过Navigator来管理处理路由，而Navigator2.0则是通过Router来处理的，但是也需要Navigator，实际上是用Router对Navigator包裹起来。Router相对来说功能就强大很多了，同时使用起来也复杂很多。
Flutter开发入门系列-Navigator2的学习和使用
好好学习，天天向上
01-08 638
Navigator2 为了提供 Flutter Web的支持新引入了很多的API 概念，比如: Page, Router, RouteDelegate, RouteInformationParser, 除此之外还需要自己管理路由栈，比如 Navigator 1 的复杂度高出了很多。但是这些 API 并不都是必须的，对于一个App的导航框架来说，只需要 Router, Page, RouteDelegate 就可以了，其中 Router, Page 的使用比较简单，主要是 RouterDelegate 比较复
Flutter-组件框架之旅
01-27
Flutter组件使用现代的响应式框架(react-styleframework)建立，灵感来源React。核心思想，通过组件(widget)构建UI。通过给组件(Widgets)设置它们当前的配置(configuration )和状态(state)来描述它们(Widgets)的长相...
Flutter 内嵌原生组件 for android
06-22
Flutter 内嵌原生组件 for android Flutter 内嵌原生组件 for android 文档地址 https://blog.csdn.net/nicepainkiller/article/details/125403744 文档地址 ...
Flutter之抽屉组件Drawer
01-07
Scalfold 是 Flutter MaterialApp 常用的布局 Widget，接受一个 drawer属性，支持配置 Drawer，可以实现从侧边栏拉出导航面板，好处是把一些功能菜单折叠起来，通常Drawer是和Listview组件或者 Column组合使用进行...
Flutter实战之自定义日志打印组件详解
08-26
主要介绍了Flutter实战之自定义日志打印组件详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Flutter 使用Navigator进行局部跳转页面的方法
08-19
主要介绍了Flutter 使用Navigator进行局部跳转页面的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
NavigatorsDemo-Flutter:Flutter中的Navigator方法概述
05-09
导航器演示 Flutter中的Navigator方法概述 对项目进行实验，以了解有关Flutter中诸如pushReplacement，popAndPushNamed等导航器方法如何工作的更多信息。 不到36小时即可拍出500多次掌声和1.3千次观看。 本文概述了Flutter中的Navigator，以及其实现的详细信息和用法。 作者 Pooja Bhaumik
深入探究Flutter中的页面导航器：Navigator详解
最新发布
繁依Fanyi的博客
04-01 1130
自定义转场动画是提升应用用户体验的重要手段之一。在本文中，我们深入探讨了Flutter中Navigator的主要功能和用法，包括页面路由、路由参数传递、命名路由、路由观察器、自定义转场动画、透明路由、Hero动画、路由保持状态、导航器嵌套等方面。导航器嵌套允许我们在一个页面内部创建多个导航器，并分别管理它们之间的导航栈，从而实现更灵活和复杂的页面管理。在Flutter中，Navigator扮演着非常重要的角色，它允许我们在应用程序中进行页面的跳转、返回以及传递参数等操作，为用户提供了流畅、高效的导航体验。
Flutter 使用Navigator进行局部跳转页面
老孟Flutter
05-27 3341
老孟导读：Navigator组件使用的频率不是很高，但在一些场景下非常适用，比如局部表单多页填写、底部导航一直存在，每个tab各自导航场景。 Navigator 是管理路由的控件，通常情况下直接使用Navigator.of(context)的方法来跳转页面，之所以可以直接使用Navigator.of(context)是因为在WidgetsApp中使用了此控件，应用程序的根控件通常是MaterialApp，MaterialApp包含WidgetsApp，所以可以直接使用Navigator的相关属性。 N..
flutter Navigator.pushNamed 接收多个参数
qq_20695397的专栏
02-20 531
flutter
flutter学习--路由Navigator跳转
qinbin2015的博客
12-31 443
在flutter开发中，我们如何从A界面跳转到B界面？如何将A界面的参数传递给B界面？如何将B界面的数据回传给A界面？这是本章重点讲解的内容。
Flutter UI基础 - 路由之Navigator详解
迦南的专栏
07-22 2062
含义： Navigator 继承自 StatefulWidget，它也是小组件，它有很多相关静态函数，可以帮我们达到页面跳转和数据交互的功能： push 将设置的router信息推送到Navigator上，实现页面跳转。 of 主要是获取 Navigator最近实例的好状态。 pop 导航到新页面，或者返回到上个页面。 canPop 判断是否可以导航到新页面 maybePop 可能会导航到新页面 popAndPushNamed 指定一个路由路径，并导航到新页面。 popUntil 反复执行pop 直到该
全网最简单的Flutter Navigator2.0路由指南
编程之路的专栏
10-09 2201
准备 关于Flutter路由的一些原理，可以阅读我们之前的文章《Flutter 路由源码剖析》，本文我们主要来学习一下Navigator2.0的用法。 为了演示Navigator2.0的用法，这里准备了一个简单案例，项目下载 访问这里。 nav_demo目录是一个使用Navigator1.0的示例，总共4个页面，分别是：splash、login、home、details 代码结构如下： 核心代码： class MyApp extends StatelessWidget { const MyApp({
flutter 底部模态框组件 除了showModalBottomSheet 还有什么
05-30
Flutter 底部模态框还可以使用 `CupertinoActionSheet` 组件来构建，该组件提供了 iOS 风格的设计。 以下是一个使用 `CupertinoActionSheet` 实现的底部模态框的示例： ```dart void _showBottomModalSheet(Build...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

躬行之

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值