Flutter入门-路由导航

简介: 首先什么是路由,路由对于移动开发者来说就是页面,比如对于我们Android开发者来说就是 Activity A-> ActivityB,类似ios中的 ViewController。

什么是路由?

首先什么是路由,路由对于移动开发者来说就是页面,比如对于我们Android开发者来说就是 Activity A-> ActivityB,类似ios中的 ViewController。

而人们常常说起的路由管理,就是管理页面之间如何跳转,通常也可被称为导航管理。

例如:

网络异常,图片无法展示
|

MaterialPageRoute

MaterialPageRoute 继承自 PageRoute类,是 Material 组件库提供的组件,针对不同平台,其有不同的路由动画效果。

其中PageRoute 是一个抽象类,表示占有整个屏幕空间的一个模态路由页面,其定义了路由构建及切换过渡动画的接口及属性。

MaterialPageRoute({
    WidgetBuilder builder,
    RouteSettings settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
  })

builder

用于构建路由页面的具体内容

Settings

包含路由的基本配置信息,如名称,是否为初试路由页(首页)

maintainState

默认打开一个新页面时,保存当前原路由信息。设置为false时,在入栈新页面时,释放当前原路由所占用的资源

fullscreenDialog

新路由是否是一个全屏的模态对话框,例如在ios中,如果为true,则新页面从屏幕底部滑入,而不是水平。

MaterialPageRoute对于不同平台,定义了不同的路由动画效果。

对于Android,当打开新页面时,,新的页面会从屏幕底部滑动到屏幕顶部;当关闭页面时,当前页面会从屏幕顶部滑动到屏幕底部后消失,同时上一个页面会显示到屏幕上。

对于iOS,当打开页面时,新的页面会从屏幕右侧边缘一致滑动到屏幕左边,直到新页面全部显示到屏幕上,而上一个页面则会从当前屏幕滑动到屏幕左侧而消失;当关闭页面时,正好相反,当前页面会从屏幕右侧滑出,同时上一个页面会从屏幕左侧滑入。

如果想自定义路由动画,可以继承 PageRoute 来实现。

Navigator

Navigator 是一个路由导航组件,提供了打开和退出路由的方法,Navigator 内部通过栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶路由。Navigator 提供了一系列方法来管理路由栈。

Navigator 类中第一个参数为 context 的静态方法 都对应着一个 Navigaor 的实例方法.比如:

Navigator.push(BuildContext context,Route route)
 //等同于
Navigator.of(context).push(Route route)

常用 api

push
将给定的路由入栈,即打开新的页面,返回值是一个 Future 对象,用以接收新路由出栈(即关闭)时的返回数据。

pop(BuildContext context,[ result ])

将栈顶路由出栈,result 页面关闭返回给上一个页面的数据

maybePop

判断页面是否可以返回上一页,如果可以直接返回,否则什么都不做;

canPop

判断是否可以返回上个页面;

removeRoute

表示从Navigator中 删除路由,同时释放Route自身资源,路由的生命周期结束;

removeRouteBelow

表示从Navigator 中删除指定路由下的路由,同时释放其资源,比如 A->B->C,路由栈存在三个页面, 当前处于C,传入B,则删除A,并释放其资源 ;

replace

将Navigator中指定的路由替换为新的路由;

replaceRouteBelow

将Navigator中指定的路由下的路由替换为新的路由。比如A-B-C,路由栈中存在三个页面,此时处于C,传入C,则替换B页面为指定新路由页;

示例

网络异常,图片无法展示
|

路由传值

用于在路由跳转时携带一些参数,比如打开某个新闻详情页时,我们需要携带 新闻id,这样才能具体知道显示什么。

示例

接收端

 onPressed: () async {
            var result = await Navigator.push<String>(context,
                MaterialPageRoute(builder: (context) {
              return xxxWidget();
            }));
            //result即为回传的数据
 },

发送端

 Navigator.of(context).pop("我是返回的数据");
目录
相关文章
|
8月前
|
Dart Android开发 UED
带你读《深入浅出Dart》二十七、Flutter路由管理
带你读《深入浅出Dart》二十七、Flutter路由管理
100 0
|
11月前
Flutter Getx 路由 until 方法帮助你跳转指定路由
不少同学都会问我,这样一个场景,当我点击商品列表,进入商品页,点击购买,支付成功后,想返回商品页,或者我的中心的订单列表。怎么做,这中间跨度了 n 个路由。 我不只一次的推荐 GetX 的 until 方法,和 offNamedUntil 方法。 我写了个 demo 今天我们就一起来看下这两个方法如何使用。
1207 0
Flutter Getx 路由 until 方法帮助你跳转指定路由
|
1月前
|
Dart 前端开发 开发工具
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
【4月更文挑战第30天】本文介绍了Flutter SDK的安装和配置过程,以及如何创建并运行第一个Flutter应用。首先确保安装了Dart SDK和Flutter SDK,支持macOS、Linux和Windows。安装完成后,设置环境变量,然后通过`flutter doctor`验证安装。接着,使用`flutter create`命令创建新项目,进入项目目录并运行`flutter run`启动应用。在`main.dart`中修改代码以自定义应用。Flutter支持热重载和DevTools调试。本文为Flutter初学者提供了快速入门的指导。
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
|
1月前
|
数据库 Android开发
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画
|
1月前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
499 0
|
1月前
|
BI
Flutter笔记:路由观察者
Flutter笔记:路由观察者
154 0
|
1月前
|
UED
Flutter之自定义路由切换动画
Flutter之自定义路由切换动画 在Flutter中,我们可以通过Navigator来实现路由管理,包括路由的跳转和返回等。默认情况下,Flutter提供了一些简单的路由切换动画,但是有时候我们需要自定义一些特殊的动画效果来提高用户体验。本文将介绍如何在Flutter中实现自定义的路由切换动画。
109 0
|
1月前
|
API
Flutter状态管理终极方案GetX第一篇——路由
Flutter状态管理终极方案GetX第一篇——路由 GetX是Flutter中一个非常流行的状态管理库,它不仅提供了简单易用的状态管理功能,还可以帮助我们方便地管理路由。在这篇文章中,我们将介绍如何使用GetX来实现路由管理。
188 0
|
1月前
|
Dart 开发者
Flutter入门之Dart中的并发编程、异步和事件驱动详解
Flutter入门之Dart中的并发编程、异步和事件驱动详解 Dart是一种高效、快速、灵活且用于Web和移动应用程序开发的编程语言。在Dart中,支持并发编程、异步和事件驱动等特性,这些特性使得Dart在处理诸如网络请求、文件I/O、用户输入等方面表现出色。本文将详细介绍Dart中的这些特性。
|
9月前
|
Web App开发 Dart 开发工具
谷歌移动UI框架Flutter入门
谷歌移动UI框架Flutter入门