详解Flutter的路由导航

Flutter 的路由导航

路由管理或导航管理:从一个页面平滑地过渡到另一个页面,我们需要有一个统一的机制来管理页面之间的跳转。在原生的Android 开发,是通过startActivity或startActivityForResult 来完成页面的跳转的,在Flutter 中如何实现呢?

在 Flutter 中,页面之间的跳转是通过 Route 和 Navigator 来管理的:

  • Route 是页面的抽象,主要负责创建对应的界面,接收参数,响应 Navigator 打开和关闭;
  • 而 Navigator 则会维护一个路由栈管理 Route,Route 打开即入栈,Route 关闭即出栈,还可以直接替换栈内的某一个 Route。

在Flutter 中根据是否提前注册,可以分为 基本路由和 命名路由。

基本路由:没有提前注册。

命名路由:需要在 APP 的入口进行注册。

基本路由使用方式相对简单灵活,适用于应用中页面不多的场景。而在应用中页面比较多的情况下,再使用基本路由方式,那么每次跳转到一个新的页面,我们都要手动创建 MaterialPageRoute 实例,初始化页面,然后调用 push 方法打开它,还是比较麻烦的。

应用程序 MaterialApp 提供一个页面名称映射规则,即路由表 routes,路由表实际上是一个 Map,其中 key 值对应页面名字,而 value 值则是一个 WidgetBuilder 回调函数,我们需要在这个函数中创建对应的页面。而一旦在路由表中定义好了页面名字,我们就可以使用 Navigator.pushNamed 来打开页面了。

需要注意的是,要在 进入APP入口的 MaterialApp 注册路由才有用。

使用基本路由方式打开 Page1:
 Navigator.push(
        context, MaterialPageRoute(builder: (context) => Page1())),

 命名路由:
 void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   title: 'Flutter Demo',
   routes: {
   // 注册路由
    "route_Page1": (context) => Page1(),
    ...
   },
   onUnknownRoute: (RouteSettings setting) =>
     MaterialPageRoute(builder: (context) => ErrorPage()),
   theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
   ),
   home: MyHomePage(title: 'Flutter Demo Home Page'),
  );
 }
}
// 使用命名路由方式打开 Page1:
Navigator.pushNamed(context, "route_Page1"),

默认路由

使用命名路由,该命名不在路由表中就会报错,这时候可以通过设置默认路由,当找不到的时候,进到到一个指定的页面。只需要在 MaterialApp 中配置:onUnknownRoute 即可

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   title: 'Flutter Demo',
   routes: {
    "route_Page1": (context) => Page1(),
    ......
   },
   // 路由发生错误,进入到该指定页面
   onUnknownRoute: (RouteSettings setting) =>
     MaterialPageRoute(builder: (context) => ErrorPage()),
   theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
   ),
   home: MyHomePage(title: 'Flutter Demo Home Page'),
  );
 }
}

页面跳转并传递参数

通过 Navigator.pushNamed 传入 arguments 属性;然后在打开的页面 通过 ModalRoute.of(context).settings.arguments来获取参数;参数的回传通过 Navigator.pop 方法

1. 传递参数:
 Navigator.pushNamed(context, "route_Page3", arguments: "hello"),
 2. 接收参数:

class Page3 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  String msg = ModalRoute.of(context).settings.arguments as String;
  return Scaffold(
   backgroundColor: Colors.red,
   appBar: AppBar(
    title: Text("传递参数"),
   ),
   body: Text("得到的参数是:$msg"),
  );
 }
}
3, 参数的回传
class Page4 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  String msg = ModalRoute.of(context).settings.arguments as String;
  return Scaffold(
   backgroundColor: Colors.yellow,
   appBar: AppBar(
    title: Text("返回参数"),
   ),
   body: Text("得到的参数是:$msg"),
   floatingActionButton: FloatingActionButton(
    child: Icon(Icons.backspace),
    onPressed: () => Navigator.pop(context, "hi"),
   ),
  );
 }
}
4. 回传参数的接收:通过then方法
 Navigator.pushNamed(context, "route_Page4", arguments: "hello")
          .then((value) => print("返回的参数是$value")),

总结

页面间的跳转通过 Navigator 和 PageRoute来完成,有两种方式:基本路由 和命名路由;由于使用命名路由可能存在 路由找不到页面的情况,所以通过配置 onUnknownRoute 属性来确定,在路由找不到的时候进入到指定页面;通过通过介绍页面跳转的参数传递和介绍,完成了页面跳转的介绍。

以上就是详解Flutter的路由导航的详细内容,更多关于Flutter 路由导航的资料请关注我们其它相关文章!

(0)

相关推荐

  • Flutter深色模式适配的实现

    一.简介 Flutter的深色模式以及跟随系统设置比较简单,我感觉需要注意的是开发过程中尽量使用Theme中的颜色与样式,开发过程中遇到的比较大的坑就是provider的一些问题,可能是因为我用的版本新一些,网上找了很多文章,总会遇到一些问题.本文的深色模式适配是通过修改themeMode来实现的,供诸位有缘人参考. 二.环境介绍 1. Flutter: 2.0.3 2. Dart: 2.12.0 3. provider: 5.0.0 状态管理,用于运行时切换主题 4. shared_prefe

  • 详解Flutter点击空白隐藏键盘的全局做法

    开发原生页面的时候,在处理键盘事件上,通常的需求是,点击输入框外屏幕,要隐藏键盘,同样的,这样的需求也需要在 Flutter 上实现, Android 上的实现方式是在基类 Activity 里实现事件分发,判断触摸位置是否在输入框内. /** * 获取点击事件 */ @CallSuper @Override public boolean dispatchTouchEvent(MotionEvent ev) { if (ev.getAction() == MotionEvent.MotionEv

  • 详解Flutter 调用 Android Native 的方法

    Flutter 调用 Android Native 的方法,是通过MethodChannel的方式来实现的: 在Android端: 创建一个Class,实现FlutterPlugin和MethodCallHandler接口 重写onAttachedToEngine(),onDetachedFromEngine(),onMethodCall() onAttachedToEngine()中,根据自定义的CHANNEL_NAME创建MethodChannel, onDetachedFromEngine

  • 新版Flutter集成到已有Android项目的实现

    FlutterSDK升级后,我们发现不能按照原来的方式集成到已有Android项目中了,因为没有了Flutter这个类,通过阅读源码我找到了新的使用方式. 一.创建Flutter Module 在已有Android工程中集成flutter,可以使用AndroidStudio的new Flutter Module实现,方便快捷. 找到FlutterModule,一连串的next操作即可 创建完成后我们的项目中会多一个叫做flutter的module 并且在项目的setting.gradle文件中会

  • 浅谈Flutter解析JSON三种方式

    Dart实体类格式 class CategoryMo { String name; int count; CategoryMo({this.name, this.count}); //将map转成mo CategoryMo.fromJson(Map<String, dynamic> json) { name = json['name']; count = json['count']; } //将mo转成map,可缺省 Map<String, dynamic> toJson() {

  • Flutter实现图片滤镜效果

    本着学习的态度,研究了一下flutter里面的ColorFilter,字面意思翻译颜色过滤器,学习就是要举一反三,拓展思考就把这个功能做了一个简单的图片滤镜效果.(ps:图片有点没控制住,有点长) 效果如下: ColorFilter 介绍 两种使用方式 const ColorFilter.mode(Color color, BlendMode blendMode) const ColorFilter.matrix(List<double> matrix) 实现效果主要通过第一种方式, 首先创建

  • Flutter网络请求库DIO的基本使用

    1. 导入dio包 目前dio库的最新版本是3.0.1,同使用其他三方库一样,Flutter中使用dio库同样需要配置pubspec.yaml文件. dependencies: flutter: sdk: flutter dio: ^3.0.10 2. 导入并创建实例 dio包引入成功之后就可以创建dio实例了,一个实例可以发起多个请求,APP中如果只有一个数据源的情况下就可以考虑将dio实例创建成单例模式,这样可以节省系统资源,减少不必要的开销. //htpp.dart import 'pac

  • 详解Flutter混排瀑布流解决方案

    背景 流式布局,这是一种当前无论是前端,还是Native都比较流行的一种页面布局.特别是对于商品这样的Feeds流,无论是淘宝,京东,美团,还是闲鱼.都基本上以多列瀑布流进行呈现,容器列数固定,然后每个卡片高度不一,形成参差不齐的多栏布局. 对于Native来说,无论是iOS还是Android,CollectionView和RecyclerView都能满足我们的绝大部分场景了.不过目前闲鱼很多业务场景都是在Flutter上进行实现的,当时Flutter官方只提供了ListView和GridVie

  • Android原生项目集成Flutter解决方案

    了解一下如何在 Android 原生项目中集成 Flutter 生成配置 在原生项目根目录执行命令 flutter create -t module --org {package_name} {module_name} // 此处 module_name 的命令遵循 Android 子 module 的命名即可.不能有中划线. // 比如, flutter create -t module --org com.engineer.mini.flutter flutter_sub // 此处 mod

  • 详解Flutter的路由导航

    Flutter 的路由导航 路由管理或导航管理:从一个页面平滑地过渡到另一个页面,我们需要有一个统一的机制来管理页面之间的跳转.在原生的Android 开发,是通过startActivity或startActivityForResult 来完成页面的跳转的,在Flutter 中如何实现呢? 在 Flutter 中,页面之间的跳转是通过 Route 和 Navigator 来管理的: Route 是页面的抽象,主要负责创建对应的界面,接收参数,响应 Navigator 打开和关闭: 而 Navig

  • 详解给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2.具体需求 用户鉴权与重定向:使用Vue提供的路由导航钩子 请求数据序列化:使用axios提供的请求拦截器 接口报错信息处理:使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js,这里是部分代码 import

  • 详解Angular之路由基础

    目录 一.路由相关对象 二.路由对象的位置 三.路由配置 四.代码中通过Router对象导航 五.配置不存在的路径 六.重定向路由 七.在路由时候传递数据 一.路由相关对象 Router和RouterLink作用一样,都是导航.Router是在Controller中用的,RouterLink是在模版中用到. 二.路由对象的位置 1.Routes对象 配置在模块中.Routes由一组配置信息组成,每个配置信息至少包含两个属性,Path和Component. 2.RouterOutlet 在模版中

  • 详解react-navigation6.x路由库的基本使用

    目录 react-native项目初始化 安装react-native项目 react-navigation路由库安装 使用路由库 路由跳转与路由传参 设置路由标题 自定义标题组件 标题按钮 react-native项目初始化 打开cmd,cd到在要进行rn项目建立的文件夹. npx react-native init testRN 这里我的项目名设置为testRN,可以自行设定. 安装react-native项目 连接安卓虚拟机或者usb调试真机,cd进创建好的项目根目录,yarn andro

  • 详解Flutter 响应式状态管理框架GetX

    目录 一.状态管理框架对比 Provider BLoC GetX 二.基本使用 2.1 安装与引用 2.2 使用GetX改造Counter App 2.3 GetX代码插件 三.其他功能 3.1 路由管理 3.2 依赖关系管理 3.3 工具 3.4 改变主题 3.5 GetConnect 3.6 GetPage中间件 Priority Redirect onPageCalled OnBindingsStart OnPageBuildStart 3.7 全局设置和手动配置 3.8 StateMix

  • 详解EFCore中的导航属性

    使用了这么久的EntityFrameworkCore框架,今天想来就其中的一个部分来做一个知识的梳理,从而使自己对于整个知识有一个更加深入的理解,如果你对EFCore中的实体关系不熟悉你需要有一个知识的预热,这样你才能够更好的去理解整个知识,在建立好了这些实体之间的关系以后,我们可以通过使用InClude.ThenInclude这些方法来进行快速获得对应关联实体数据,用起来确实十分的方便,这里我们将通过一系列的例子来进行说明.    1 单独使用Include 在介绍这个方法之前,我来先贴出实体

  • 详解Flutter Widget

    目录 概述: Widget的本质: 分类: Widget StatelessWidget StatefulWidget State ParentDataWidget RenderObjectWidget 小结 概述: 所有的一切都可以被称为widget 在开发 Flutter 应用过程中,接触最多的无疑就是Widget,是『描述』 Flutter UI 的基本单元,通过Widget可以做到: 描述 UI 的层级结构 (通过Widget嵌套): 定制 UI 的具体样式 (如:font.color等

随机推荐