Flutter路由跳转详解

简介: Flutter路由跳转详解

flutter中跳转一直记了忘,忘了记,在这里记录下吧:


和安卓中的intent类似,跳转新页面需要当前上下文以及需要跳转的页面。如果有数据需要传输也可,参数通过跳转页面的构造方法传递。


1、不带参数直接跳转

///不带参数的路由表跳转
Navigator.pushNamed(context, routeName);

2、带参数直接跳转

///带参数的路由表跳转 ,one、two为参数。需要在对应页面写好对应构造方法
Navigator.pushNamed(context, routeName(one,two));

这两种页面跳转我理解为普通跳转,即按返回键可以返回(类似于安卓中的入栈)。下面的都可以利用构造方法为跳转的新页面进行传递参数,为了简洁(实际上是因为懒)就不重复写了。


3、跳转新页面并且替换,比如登录页跳转主页

///跳转新页面并且替换
Navigator.pushReplacementNamed(context, routeName);

4、跳转到新的路由,并且关闭给定路由的之前的所有页面。可用于退出登录返回到登录页面

///跳转到新的路由,并且关闭给定路由的之前的所有页面
Navigator.pushNamedAndRemoveUntil(context, '/calendar', ModalRoute.withName('/'));

5、带参数的路由跳转,并且监听返回

///带参数的路由跳转,并且监听返回
Navigator.push(context, new MaterialPageRoute(builder: (context) => new NotifyPage())).then((res) {
      ///获取返回处理
    });

Navigator 的 push 返回的是一个 Future,这个Future 的作用是在页面返回时被调用的。也就是你可以通过 Navigator 的 pop 时返回参数,之后在 Future 中可以的监听中处理页面的返回结果。处理方法如下:


@optionalTypeArgs
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
  return Navigator.of(context).push(route);
}


目录
相关文章
|
Dart Android开发 UED
带你读《深入浅出Dart》二十七、Flutter路由管理
带你读《深入浅出Dart》二十七、Flutter路由管理
131 0
|
17天前
|
Go 网络架构 开发者
Flutter &鸿蒙next中的路由使用详解【基础使用】
本文介绍了 Flutter 路由系统的使用方法,包括基本路由、命名路由、参数传递、返回参数和动态路由。通过 `Navigator` 类实现页面跳转,支持简单和复杂参数的传递,并可通过 `onGenerateRoute` 实现更灵活的动态路由管理。示例代码展示了如何在实际项目中应用这些技术,帮助开发者构建清晰、易于维护的导航结构。
65 1
|
1月前
|
UED 开发者
flutter:获取对象&路由管理 (四)
本文介绍了Flutter中如何通过Context获取状态对象、使用GlobalKey获取状态对象、基本的路由管理、路由传值、命名路由、返回根路由以及点击图标跳转的方法。示例代码展示了如何在应用中实现这些功能,包括页面跳转、传递参数和返回上一页等操作。
|
6月前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
789 0
|
4月前
|
Android开发
Flutter路由跳转参数处理小技巧
Flutter路由跳转参数处理小技巧
42 0
|
6月前
|
前端开发 开发者 iOS开发
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
【4月更文挑战第30天】本文介绍了Flutter的路由管理与页面跳转,包括基本和命名路由管理。基本路由使用`Navigator`的`push`和`pop`方法,如`MaterialPageRoute`和`CupertinoPageRoute`。命名路由则通过路由表注册名称进行跳转,如`Navigator.pushNamed`。此外,还展示了如何通过构造函数、`arguments`和`PageRouteBuilder`进行路由传值。掌握这些知识能提升Flutter开发效率。
111 0
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
|
6月前
|
BI
Flutter笔记:路由观察者
Flutter笔记:路由观察者
292 0
|
6月前
|
UED
Flutter之自定义路由切换动画
Flutter之自定义路由切换动画 在Flutter中,我们可以通过Navigator来实现路由管理,包括路由的跳转和返回等。默认情况下,Flutter提供了一些简单的路由切换动画,但是有时候我们需要自定义一些特殊的动画效果来提高用户体验。本文将介绍如何在Flutter中实现自定义的路由切换动画。
216 0
|
6月前
|
API
Flutter状态管理终极方案GetX第一篇——路由
Flutter状态管理终极方案GetX第一篇——路由 GetX是Flutter中一个非常流行的状态管理库,它不仅提供了简单易用的状态管理功能,还可以帮助我们方便地管理路由。在这篇文章中,我们将介绍如何使用GetX来实现路由管理。
349 0
|
Dart Android开发 UED
《深入浅出Dart》Flutter路由管理
Flutter路由管理 在本篇文章中,我们将深入探讨Flutter中的路由管理,使用最新的Dart语法和Flutter框架。路由管理是构建应用程序导航和页面跳转的关键部分,它可以帮助我们实现复杂的导航结构和页面切换效果。让我们详细了解Flutter中的路由管理和一些常用的组件。
158 0