Flutter路由导航

最新推荐文章于 2024-03-19 13:50:52 发布
最新推荐文章于 2024-03-19 13:50:52 发布
阅读量1k 收藏 1
点赞数
分类专栏： 【Flutter点滴知识 】
原文链接：https://juejin.im/post/5ed304b6f265da76dc1bb78a
版权

我们通常会用屏（Screen）来称呼一个页面（Page），一个完整的App应该是有多个Page组成的。

在之前的案例（豆瓣）中，我们通过IndexedStack来管理了首页中的Page切换：

首页-书影音-小组-市集-我的

通过点击BottomNavigationBarItem来设置IndexedStack的index属性来切换

除了上面这种管理页面的方式，我们还需要实现其它功能的页面跳转：比如点击一个商品跳转到详情页，某个按钮跳转到发送朋友圈、微博的编辑页面。

这种页面的管理和导航，我们通常会使用路由进行统一管理。

一. 路由管理

1.1. 认识Flutter路由

路由的概念由来已久，包括网络路由、后端路由，到现在广为流行的前端路由。

  • 无论路由的概念如何应用，它的核心是一个路由映射表

  • 比如：名字 detail 映射到 DetailPage 页面等

  • 有了这个映射表之后，我们就可以方便的根据名字来完成路由的转发（在前端表现出来的就是页面跳转）

在Flutter中，路由管理主要有两个类：Route和Navigator

1.2. Route

Route：一个页面要想被路由统一管理，必须包装为一个Route

  • 官方的说法很清晰：An abstraction for an entry managed by a Navigator.

但是Route是一个抽象类，所以它是不能实例化的

  • 在上面有一段注释，让我们查看MaterialPageRoute来使用

/// See [MaterialPageRoute] for a route that replaces the
/// entire screen with a platform-adaptive transition.
abstract class Route<T> {
}
复制代码

事实上MaterialPageRoute并不是Route的直接子类：

  • MaterialPageRoute在不同的平台有不同的表现

  • 对Android平台，打开一个页面会从屏幕底部滑动到屏幕的顶部，关闭页面时从顶部滑动到底部消失

  • 对iOS平台，打开一个页面会从屏幕右侧滑动到屏幕的左侧，关闭页面时从左侧滑动到右侧消失

  • 当然，iOS平台我们也可以使用CupertinoPageRoute

MaterialPageRoute -> PageRoute -> ModalRoute -> TransitionRoute -> OverlayRoute -> Route
复制代码

1.3. Navigator

Navigator：管理所有的Route的Widget，通过一个Stack来进行管理的

  • 官方的说法也很清晰：A widget that manages a set of child widgets with a stack discipline.

那么我们开发中需要手动去常见一个Navigator吗？

  • 并不需要，我们开发中使用的MaterialApp、CupertinoApp、WidgetsApp它们默认是有插入Navigator的

  • 所以，我们在需要的时候，只需要直接使用即可

Navigator.of(context)
复制代码

Navigator有几个最常见的方法：

// 路由跳转：传入一个路由对象
Future<T> push<T extends Object>(Route<T> route)

// 路由跳转：传入一个名称（命名路由）
Future<T> pushNamed<T extends Object>(
  String routeName, {
    Object arguments,
  })

// 路由返回：可以传入一个参数
bool pop<T extends Object>([ T result ])
复制代码

二. 路由基本使用

1.1. 基本跳转

我们来实现一个最基本跳转：

  • 创建首页页面，中间添加一个按钮，点击按钮跳转到详情页面

  • 创建详情页面，中间添加一个按钮，点击按钮返回到首页页面

页面基本跳转

页面基本跳转

核心的跳转代码如下（首页中代码）：

// RaisedButton代码（只贴出核心代码）
RaisedButton(
  child: Text("打开详情页"),
  onPressed: () => _onPushTap(context),
),

// 按钮点击执行的代码
_onPushTap(BuildContext context) {
  Navigator.of(context).push(MaterialPageRoute(
    builder: (ctx) {
      return DetailPage();
    }
  ));
}
复制代码

核心的返回代码如下（详情页中代码）：

// RaisedButton代码（只贴出核心代码）
RaisedButton(
  child: Text("返回首页"),
  onPressed: () => _onBackTap(context),
)
// 按钮点击执行的代码
_onBackTap(BuildContext context) {
  Navigator.of(context).pop();
}
复制代码

1.2. 参数传递

在跳转过程中，我们通常可能会携带一些参数，比如

  • 首页跳到详情页，携带一条信息：a home message

  • 详情页返回首页，携带一条信息：a detail message

参数传递

参数传递

首页跳转核心代码：

  • 在页面跳转时，会返回一个Future

  • 该Future会在详情页面调用pop时，回调对应的then函数，并且会携带结果

_onPushTap(BuildContext context) {
  // 1.跳转代码
  final future = Navigator.of(context).push(MaterialPageRoute(
    builder: (ctx) {
      return DetailPage("a home message");
    }
  ));

  // 2.获取结果
  future.then((res) {
    setState(() {
      _message = res;
    });
  });
}
复制代码

详情页返回核心代码：

_onBackTap(BuildContext context) {
  Navigator.of(context).pop("a detail message");
}
复制代码

1.3. 返回细节

但是这里有一个问题，如果用户是点击右上角的返回按钮，如何监听呢？

方法一：自定义返回的按钮（在详情页中修改Scaffold的appBar）

appBar: AppBar(
  title: Text("详情页"),
  leading: IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () {
      Navigator.of(context).pop("a back detail message");
    },
  ),
),
复制代码

方法二：监听返回按钮的点击（给Scaffold包裹一个WillPopScope）

  • WillPopScope有一个onWillPop的回调函数，当我们点击返回按钮时会执行

  • 这个函数要求有一个Future的返回值：

    • true：那么系统会自动帮我们执行pop操作

    • false：系统不再执行pop操作，需要我们自己来执行

return WillPopScope(
  onWillPop: () {
    Navigator.of(context).pop("a back detail message");
    return Future.value(false);
  },
  child: Scaffold(
    appBar: AppBar(
      title: Text("详情页"),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            child: Text("返回首页"),
            onPressed: () => _onBackTap(context),
          ),
          Text(_message, style: TextStyle(fontSize: 20, color: Colors.red),)
        ],
      ),
    ),
  ),
);
复制代码

三. 命名路由使用

3.1. 基本跳转

我们可以通过创建一个新的Route，使用Navigator来导航到一个新的页面，但是如果在应用中很多地方都需要导航到同一个页面（比如在开发中，首页、推荐、分类页都可能会跳到详情页），那么就会存在很多重复的代码。

在这种情况下，我们可以使用命名路由（named route）

  • 命名路由是将名字和路由的映射关系，在一个地方进行统一的管理

  • 有了命名路由，我们可以通过Navigator.pushNamed() 方法来跳转到新的页面

命名路由在哪里管理呢？可以放在MaterialApp的 initialRoute 和 routes 中

  • initialRoute：设置应用程序从哪一个路由开始启动，设置了该属性，就不需要再设置home属性了

  • routes：定义名称和路由之间的映射关系，类型为Map<String, WidgetBuilder>

修改MaterialApp中的代码：

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue, splashColor: Colors.transparent
  ),
  initialRoute: "/",
  routes: {
    "/home": (ctx) => HYHomePage(),
    "/detail": (ctx) => HYDetailPage()
  },
);
复制代码

修改跳转的代码：

_onPushTap(BuildContext context) {
  Navigator.of(context).pushNamed("/detail");
}
复制代码

在开发中，为了让每个页面对应的routeName统一，我们通常会在每个页面中定义一个路由的常量来使用：

class HYHomePage extends StatefulWidget {
  static const String routeName = "/home";
}

class HYDetailPage extends StatelessWidget {
  static const String routeName = "/detail";
}
复制代码

修改MaterialApp中routes的key

initialRoute: HYHomePage.routeName,
routes: {
  HYHomePage.routeName: (ctx) => HYHomePage(),
  HYDetailPage.routeName: (ctx) => HYDetailPage()
},
复制代码

3.2. 参数传递

因为通常命名路由，我们会在定义路由时，直接创建好对象，比如HYDetailPage()

那么，命名路由如果有参数需要传递呢？

pushNamed时，如何传递参数：

_onPushTap(BuildContext context) {
  Navigator.of(context).pushNamed(HYDetailPage.routeName, arguments: "a home message of naned route");
}
复制代码

在HYDetailPage中，如何获取到参数呢？

  • 在build方法中ModalRoute.of(context)可以获取到传递的参数

  Widget build(BuildContext context) {
    // 1.获取数据
    final message = ModalRoute.of(context).settings.arguments;
  }
复制代码

3.3. 路由钩子

3.3.1. onGenerateRoute

加入我们有一个HYAboutPage，也希望在跳转时，传入对应的参数message，并且已经有一个对应的构造方法

在HYHomePage中添加跳转的代码：

RaisedButton(
  child: Text("打开关于页"),
  onPressed: () {
    Navigator.of(context).pushNamed(HYAboutPage.routeName, arguments: "a home message");
  },
)
复制代码

HYAboutPage的代码：

class HYAboutPage extends StatelessWidget {
  static const String routeName = "/about";
  final String message;

  HYAboutPage(this.message);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("关于页面"),
      ),
      body: Center(
        child: Text(message, style: TextStyle(fontSize: 30, color: Colors.red),),
      ),
    );
  }
}
复制代码

但是我们继续使用routes中的映射关系，就不好进行配置了，因为HYAboutPage必须要求传入一个参数；

这个时候我们可以使用onGenerateRoute的钩子函数：

  • 当我们通过pushNamed进行跳转，但是对应的name没有在routes中有映射关系，那么就会执行onGenerateRoute钩子函数；

  • 我们可以在该函数中，手动创建对应的Route进行返回；

  • 该函数有一个参数RouteSettings，该类有两个常用的属性：

    • name: 跳转的路径名称

    • arguments：跳转时携带的参数

onGenerateRoute: (settings) {
  if (settings.name == "/about") {
    return MaterialPageRoute(
      builder: (ctx) {
        return HYAboutPage(settings.arguments);
      }
    );
  }
  return null;
},
复制代码

关于页面跳转

关于页面跳转

3.3.2. onUnknownRoute

如果我们打开的一个路由名称是根本不存在，这个时候我们希望跳转到一个统一的错误页面。

比如下面的abc是不存在有对应的页面的

  • 如果没有进行特殊的处理，那么Flutter会报错。

RaisedButton(
  child: Text("打开未知页面"),
  onPressed: () {
    Navigator.of(context).pushNamed("/abc");
  },
)
复制代码

我们可以创建一个错误的页面：

class UnknownPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("错误页面"),
      ),
      body: Container(
        child: Center(
          child: Text("页面跳转错误"),
        ),
      ),
    );
  }
}
复制代码

并且设置onUnknownRoute

onUnknownRoute: (settings) {
  return MaterialPageRoute(
    builder: (ctx) {
      return UnknownPage();
    }
  );
},


作者：coderwhy
链接：https://juejin.im/post/5ed304b6f265da76dc1bb78a
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

barnett_y
关注
专栏目录
Flutter 路由&页面传参
蓝色天空
05-07 2688
需求梳理 1、如何进行页面跳转 2、页面跳转时如何进行传值 3、参数回传 1 页面跳转 Flutter中分2种路由，分别是静态路由和动态路由 // 静态路由示列子 // step 1、---> 声明路由 class RoutePage extends StatelessWidget { @override Widget build(BuildContext context) { ...
Flutter-路由和导航
mrRuby的博客
01-07 1903
一、前言 在Android开发中，界面的跳转使用的Context.startActivity来实现，界面通常指的Activity，如果我们的设计是单Activity+Fragment来实现，界面的跳转就需要使用FragmentManager来完成。这些概念到了Flutter中有了一些变化。 二、路由是什么 我们通常使用“屏”来展示应用的不同页面（界面）。比如应用有一屏展示商品列表，点击Item的时候，跳转到新的一“屏”展示商品的详细信息。 在Flutter中，屏（screen） 和 页面（page） 都叫
Flutter——路由和导航
FranzLiszt的博客
11-07 1247
方法顾名思义，在栈中使用频繁，将下一个页面添加到栈中，栈顶为下一个页面，但之前的页面只是在栈底，并未被销毁。进行点击事件监听，然后将对应的Item的实体类数据作为参数传给下一个页面。在详情页中声明商品实体类成员，然后在构造方法中进行赋值，布局通过。此处只是一个简单的例子，数据都为静态数据，只为做一个展示。方法将当前栈顶元素出栈，即销毁当前页面，返回上一级页面。从一个页面跳转到另一个页面，监听Button的。方法，将当前上下文和需要跳转的页面上下文传入，布局中，然后对价格、名称、描述进行垂直排列。
Flutter之路由管理
yong_19930826的博客
10-27 749
Flutter之路由管理1.MaterialPageRouteNavigatorFuture push(BuildContext context, Route route)bool pop(BuildContext context, [ result ])实例方法命名路由通过路由名打开新路由简单实现电商app的权限控制 1.MaterialPageRoute MaterialPageRoute继承...
Flutter学习：路由
m0_73533910的博客
06-30 277
Material组件库中提供了一个MaterialPageRoute组件，它可以使用和平台风格一致的路由切换动画如在ios上会左右滑动切换，而在Android上会上下滑动切换，CupertinoPageRoute是Cupertino组件库提供的iOS风格的路由切换组件，如果在Android上也想使用左右切换风格，可以使用CupertinoPageRoute.​。比如我们现在想从HomePage组件跳转到SearchPage组件1、需要在HomPage中引入SearchPage.dart。
Flutter页面路由导航及传参
piaomiao8179的博客
01-21 2676
转载请注明出处: https://learnandfish.com/ 概述 每个应用都有很多个页面，在flutter中同样也有很多页面，被称之为路由(Router)，页面之间的跳转通过导航器(Navigator)进行管理。 其中 Navigator.push 和 Navigator.pop 是最简单的跳转到新页面和返回到上一级界面的方式。 路由分为静态路由(即命名路由)和动态路由。页面之间跳...
Flutter路由导航源码分析与实践
通过研究navigasi-route-flutter-源码.zip文件，开发者可以深入理解Flutter框架中关于导航和路由管理的内部机制，掌握跨平台应用开发的关键技能，并且在社区资源的帮助下提升自身的开发水平。这些知识点不仅适用于...
Flutter 路由与导航
iOSxiaodaidai的博客
02-19 393
文章搬运来源：https://juejin.cn/post/6930508768983646216 作者： SunshineBrother 对iOS开发感兴趣，可以看一下作者的iOS交流群：812157648，大家可以在里面吹水、交流相关方面的知识，群里还有我整理的有关于面试的一些资料，欢迎大家加群，大家一起开车 Flutter 路由与导航 如果说 UI 框架的视图元素的基本单位是组件，那应用程序的基本单位就是页面了。对于拥有多个页面的应用程序而言，如何从一个页面平滑地过渡到另一个页面，我们需要有一个统一的
Flutter 路由管理
m0_65503310的博客
05-13 1249
通过 VS Code 创建一个新的 Flutter 工程，创建好后，就会得到一个计数器应用的 Demo。在“计数器”示例的基础上，删掉多余部分，然后写自己需要的部分。 import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); /...
Flutter路由跳转（页面跳转）
qq_30005223的博客
02-21 4375
指定页面名称跳转Navigator.of(context).push(MaterialPageRoute() class TextPage extends StatelessWidget { const TextPage({Key? key}) : super(key: key); @override Widget build(BuildContext context) => MaterialApp( home: Scaffold( body: Cen
flutter 路由与页面跳转
热门推荐
卓原的进化之旅
09-07 1万+
先记录一下相关代码,后续完善内容 路由 Route 静态路由 在Flutter中有着两种路由跳转的方式，一种是静态路由，在创建时就已经明确知道了要跳转的页面和值。另一种是动态路由，跳转传入的目标地址和要传入的值都可以是动态的。 OK，还是先来介绍下静态路由 从我们开始学习Flutter到现在，相信大家看到最多的肯定是下面的代码 void main(){ runApp(new M...
【Flutter——路由导航】
muzillll的博客
06-25 2576
Flutter路由导航
Flutter PageRouteBuilder 页面间跳转动画实现
Leove的专栏
09-06 1304
_pushMember(Member member) { Navigator.push( context, PageRouteBuilder( opaque: true, transitionDuration: const Duration(milliseconds: 1000), pageBuilder: (BuildContext context, _, __) { .
flutter页面跳转 Route 使用汇总
飞翔的熊blabla
07-01 598
一、push方式直接跳转 普通跳转 Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Page1())); 复制代码 带参数跳转和接收参数 Navigator.push(context, MaterialPageRoute( builder: (BuildContext context) => Page2(),
Flutter开发入门——路由
最新发布
Android 领域开发程序员，希望通过写博客的方式不断的总结提升自己，大家共同进步哦！
03-19 1746
移动端应用开发中，路由技术是一个非常重要的组成部分。路由技术负责管理应用中各个页面之间的跳转、导航以及参数传递等关键功能。在移动端应用中，一个高效、易于维护的路由系统对于提高开发效率和用户体验具有重要意义。Flutter 中的路由管理和原生开发类似，无论是 Android 还是 iOS，导航管理都会维护一个路由栈，路由入栈（push）操作对应打开一个新页面，路由出栈（pop）操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。// 创建一个Intent对象，指定要跳转的Activity。
Flutter学习笔记19-Navigator、MaterialPageRoute、普通路由，普通路由传值
convex1009848621的博客
11-16 916
使用Navigator.push/pop管理页面堆栈
Flutter18 Flutter 组件之 导航器 Route 详解
qq_40638618的博客
03-30 4131
**首先：一个App可能有多个导航器Navigator MaterialApp内置了一个导航器Navigator 1 简单页面跳转 Navigator.of（context）.pop VS Navigator.pop（context） Navigator.of（context）.push VS Navigator.push（context） Navigator也是一个Widget 下面就会出现多个导航器 ------ Navigator.of（context，rootNavigator...
flutter Navigator + MaterialPageRoute 实现页面跳转、跳转并传值、返回、返回并传值、返回到指定页面
zhumj_zhumj的专栏
10-23 8772
页面跳转 无参跳转Navigator.push(context, MaterialPageRoute( builder: (context) => SecondController(), ), ); SecondController：class SecondController extends StatelessWidget { @override ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值