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("我是返回的数据");
目录
相关文章
|
2天前
|
API 网络架构
一文带你了解 Flutter 路由
一文带你了解 Flutter 路由
|
1月前
|
Go 网络架构 开发者
Flutter &鸿蒙next中的路由使用详解【基础使用】
本文介绍了 Flutter 路由系统的使用方法,包括基本路由、命名路由、参数传递、返回参数和动态路由。通过 `Navigator` 类实现页面跳转,支持简单和复杂参数的传递,并可通过 `onGenerateRoute` 实现更灵活的动态路由管理。示例代码展示了如何在实际项目中应用这些技术,帮助开发者构建清晰、易于维护的导航结构。
87 1
|
2月前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
91 7
|
7月前
|
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初学者提供了快速入门的指导。
123 0
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
|
2月前
|
UED 开发者
flutter:获取对象&路由管理 (四)
本文介绍了Flutter中如何通过Context获取状态对象、使用GlobalKey获取状态对象、基本的路由管理、路由传值、命名路由、返回根路由以及点击图标跳转的方法。示例代码展示了如何在应用中实现这些功能,包括页面跳转、传递参数和返回上一页等操作。
|
4月前
|
Dart 前端开发 JavaScript
Flutter&Dart-异步编程Future、Stream极速入门
Flutter&Dart-异步编程Future、Stream极速入门
89 4
Flutter&Dart-异步编程Future、Stream极速入门
|
4月前
|
Kubernetes Cloud Native 搜索推荐
探索云原生技术:Kubernetes入门与实践打造个性化安卓应用:从零开始的Flutter之旅
【8月更文挑战第31天】云原生技术正改变着应用开发和部署的方式。本文将带你了解云原生的基石——Kubernetes,通过实际的代码示例,从安装到部署一个简单的应用,让你迅速掌握Kubernetes的核心概念和操作方法。无论你是初学者还是有一定经验的开发者,这篇文章都将成为你进入云原生世界的桥梁。
|
5月前
|
开发框架 Dart Java
Flutter入门进阶之旅(一)-初识Flutter
Flutter 的目标是用来创建高性能、高稳定性、高帧率、低延迟的 Android 和 iOS 应用。并且开发出来的应用在不同的平台用起来跟原生应用具有一样的体验。不同的平台的原生体验应该得到保留,让该应用看起来同整个系统更加协调。不同平台的滚动操作、字体、图标 等特殊的特性 应该和该平台上的其他应用保持一致,让用户感觉就像操作原生应用一样。
76 1
|
5月前
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
93 1
|
7月前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
821 0