所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。...fullscreenDialog表示新的路由页面是否是一个全屏的模态对话框，在iOS中，如果fullscreenDialog为true，新页面将会从屏幕底部滑入（而不是水平方向）。...命名路由 所谓命名路由（Named Route）即给路由起一个名字，然后可以通过路由名字直接打开新的路由。这为路由管理带来了一种直观、简单的方式。...Navigator.of(context).push(route); } push方法使用 我们可以将参数放在 SecondScreen 的构造函数中，也可以放在构造的 MaterialPageRoute...之前通过在 WidgetsApp 注册routes 的方式默认生成的 PageRoute 类型为 MaterialPageRoute 。
管理的当前屏幕，Route的实现比如MaterialPageRoute....使用 onGenerateRoute 的高级命名路由 处理命名路由的一种更灵活的方法是使用onGenerateRoute....，而不是通用路由解析方案。...markForAdd— 显示_没有_动画过渡的路线 markForPop— 移除带有动画过渡的路线并用结果完成它。...markForComplete — 删除没有过渡的路线并用一个完成它 result markForRemove — 删除没有动画过渡且未完成的路线。
但是Route是一个抽象类，所以它是不能实例化的 在上面有一段注释，让我们查看MaterialPageRoute来使用 /// See [MaterialPageRoute] for a route that...并不是Route的直接子类： MaterialPageRoute在不同的平台有不同的表现 对Android平台，打开一个页面会从屏幕底部滑动到屏幕的顶部，关闭页面时从顶部滑动到底部消失 对iOS平台，打开一个页面会从屏幕右侧滑动到屏幕的左侧...基本跳转 我们可以通过创建一个新的Route，使用Navigator来导航到一个新的页面，但是如果在应用中很多地方都需要导航到同一个页面（比如在开发中，首页、推荐、分类页都可能会跳到详情页），那么就会存在很多重复的代码...在这种情况下，我们可以使用命名路由（named route） 命名路由是将名字和路由的映射关系，在一个地方进行统一的管理 有了命名路由，我们可以通过Navigator.pushNamed() 方法来跳转到新的页面...，类型为Map 修改MaterialApp中的代码： return MaterialApp( title: 'Flutter Demo', theme: ThemeData
在Flutter中，路由的管理和导航借鉴了前端和客户端的设计思路，需要使用Route和Navigator来进行统一管理。...其中，Route是页面的抽象，主要负责创建界面、接收参数以及响应导航器Navigator的打开与关闭。...而Navigator则用于维护路由栈管理，Route打开即入栈，Route关闭即出栈，当然还可以替换栈内的某一个Route。...类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个widget。...对于命名路由，如果我们需要响应错误路由标识符，还需要一并注册 UnknownRoute。
Flutter 中的命名路由在实际项目中使用最为常用。 要想使用命名路由首先要配置路由，并引入路由地址对应的页面组件。...= null) { final Route route = MaterialPageRoute(...; }else{ final Route route = MaterialPageRoute(...BottomNavigationBarType.fixed, items: [ // 只能是BottomNavigationBarItem的类型...}else{ final Route route = MaterialPageRoute( builder: (context) =>
Flutter中的路由 Flutter中的路由通俗来讲就是页面跳转，在Flutter中通过Navigator组件管理路由导航。...在使用命名路由导航时，我们需要先声明路由。...即我们要在MaterialApp中的routes进行路由配置 值得一提的是，routes的值是Map类型的 main()=>runApp(MyApp())...= null) { final Route route = MaterialPageRoute( builder: (context) =>...)); return route; } } }; onGenerateRoute这个是命名路由传参的固定写法。
Map args = ModalRoute.of(context)!....settings.arguments as Map; int id = args['id']; String name = args['name']; 3....Map args = ModalRoute.of(context)!....settings.arguments as Map; int id = args['id']; String name = args['name']; 通过上述方法，我们可以轻松地在...这种方式使得我们可以在整个应用程序中轻松地管理和维护页面导航。 2. 命名路由的配置： 要使用命名路由，首先需要在应用程序的顶层MaterialApp组件中配置路由表（route table）。
这次我们接着来了解一下路由导航Navigator的相关信息。 Flutter中的路由管理与原生开发类似，都会维护一个路由栈，通过push入栈打开一个新的页面，然后再通过pop出栈关闭老的页面。...用法很简单通过push传递一个Route。这里对应的是MaterialPageRoute。它会提供一个builder方法，我们直接在builder中返回想要跳转的页面实例即可。... route = _history.last; assert(route....ModalRoute.of()内部运用的是context.dependOnInheritedWidgetOfExactType() 是不是有点眼熟？...命名路由 命名路由，顾名思义通过提前注册好的名称来跳转到对应的页面。 首页我们需要注册一个路由表，约定好名称与页面的一一对应。
与MaterialApp相比 18个相同字段: 字段 类型 navigatorKey（导航键） GlobalKey onGenerateRoute（生成路由） RouteFactory...onUnknownRoute（未知路由） RouteFactory navigatorObservers（导航观察器） List initialRoute（初始路由...） String builder（建造者） TransitionBuilder title（标题） String onGenerateTitle（生成标题） GenerateAppTitle color..."/")时返回home的Widget 所以可以推测当程序启动时，会调用一个以"/"为路由名的Widget 下面来看一段源码 Route _onGenerateRoute(RouteSettings...= null) { //可以看到默认是使用MaterialPageRoute的切换界面动画 return new MaterialPageRoute( builder
； Navigator 方法 作用 pushNamed 按路由名字路由入栈 pushReplacementNamed 按路由名字替换当前路由栈 popAndPushNamed 将当前路线从导航器中弹出，...并在其中推入已命名的路由位置 pushNamedAndRemoveUntil 按路由名称将具有给定名称的路由推入导航器，然后删除所有 push 直接路由入栈 pushReplacement 替换当前路由栈...pushAndRemoveUntil 将具有给定名称的路由推入导航器，然后删除所有 replace 用新路由替换导航器上的路由 replaceRouteBelow 用新路由替换导航器上的路由。...，然后[Route.dispose]的要替换的路线是给定的“ anchorRoute”下方的路线。...，如果为空就不做任何操作； 路由命名 我们想执行跟name有关的Navigator方法就必须先给路由命名，比如pushNamed方法, 注册路由在MaterialApp的routes属性，它的定义为：
导航到新的屏幕并返回 大多数应用程序包含几个用于显示不同类型信息的屏幕 例如，我们可能有一个显示产品的屏幕。 然后，我们的用户可以在新屏幕上点击产品以获取更多信息。...push方法会将Route添加到由导航器管理的路由堆栈中！ push方法需要Route，但Route从哪里来？ 我们可以创建自己的，或者使用MaterialPageRoute开箱即用。...pop方法将从由导航器管理的路线堆栈中移除当前Route。...路线 定义一个Todo类 创建Todos列表 创建一个可以显示关于待办事项信息的详情屏幕 导航并将数据传递到详情屏幕 1.定义一个Todo类 首先，我们需要一种简单的方法来表示Todos。...通常，您可以创建可重用的部件，而不是重复代码，但对于此示例，我们将复制代码以进行演示。
: Text(song.name), 由于Navigator保存了一个Route对象的堆栈（表示历史堆栈），所以push（）方法也使用Route对象作为参数。...MaterialPageRoute对象是Route的子类，用于指定Material Design的过渡动画。...命名路由 对于有些具有简单导航和深度链接需求的应用程序，我们可以使用Navigator进行导航，使用MaterialApp对象的routes属性对路由进行配置： @override Widget build...命名路由的局限 尽管命名路由可以处理深层链接，但是他们的表现总是一致的，没办法做到自定义。当应用平台接收到一个新的深层链接，不论用户此时在哪个位置，Flutter都会将新的路线推送到导航器上。...如果我们使用的是路由包，则页面支持的路由始终是可深度链接的，而无页面的路由则不是。 当从导航器中删除页面支持的路由时，它之后的所有无页面路由也将被删除。
点击进行跳转 FlatButton( child: Text("点击跳转"), textColor: Colors.red, onPressed: () { //导航到新的路由...; })); }, ) 复制代码 效果： MaterialPageRoute MaterialPageRoute 是 Material 组件库提供的组件，他可以针对不同的平台，...settings, this.maintainState = true, bool fullscreenDialog = false, }) builder 是 WidgetBuilder 类型的回调函数...push(route); } 复制代码 将给定的路由入栈（打开页面），返回 future 对象，用于接收该路由出栈是返回的数据。...I/flutter (23778): 路由返回值 我是返回值 复制代码 需要注意的是 1，参数是通过构造方法传入的 2，如果点击左上角，或者返回按钮进行返回，则页面返回的值为 null 命名路由
Navigator 则会维护一个路由栈管理Route，Route打开即入栈，Route关闭即出栈，还可以直接替换栈内的某一个Route。...要导航到一个新的页面，我们需要创建一个 MaterialPageRoute 的实例，调用 Navigator.push 方法将新页面压到堆栈的顶部。...也许你会想到，我们可以约定使用字符串常量去定义、使用路由，但我们无法避免通过接口数据下发的错误路由标识符场景。面对这种情况，无论是直接报错或是不响应错误路由，都不是一个用户体验良好的解决办法。...对于命名路由，我们为了能够响应错误路由标识符，还需要一并注册 UnknownRoute 。...可以看到，关于路由导航，Flutter综合了Android、iOS和React的特点，简洁而不失强大。 而在中大型应用中，我们通常会使用命名路由来管理页面间的切换。
修改ContentPage （封装pushData()方法， 用于导航以及接收数据）， String results; //封装一个函数 处理路由返回的数据 // 接收数据是异步的，需要加...async关键字； // 需要接收数据，需要加 await关键字； // 需要准备一个数据类型变量，来承载； // 指定函数返回类型为String，Alt+enter 改成 Future<...； // push()要求传入一个Route对象，一般用 MaterialPageRoute类 var datas = await Navigator.of(context).push(...可以写main函数，也可以不写； 建议只在首页写main，其他页面不要写，便于查找和维护； 命名路由 路径名称的 正确性（定义与使用要相符合）、 传参（参数类型）的一致性的问题； 1....需要接收数据，需要加 await关键字； // 需要准备一个数据类型变量，来承载； // 指定函数返回类型为String，Alt+enter 改成 Future Future
2，创建一个文本按钮，点击进行跳转 child: Text("点击跳转"), textColor: Colors.red, onPressed: () { //导航到新的路由...settings, this.maintainState = true, bool fullscreenDialog = false, }) builder 是 WidgetBuilder 类型的回调函数...中若此参数为 true，新页面会从底部滑入，而不是水平方向 Navigator Navigator 是一个路由管理组件，它提供了打开和退出路由方法 Navigator 通过栈来管理活动路由集合，通常屏幕显示的页面就是栈顶路由...push(route); } 将给定的路由入栈（打开页面），返回 future 对象，用于接收该路由出栈是返回的数据。 关闭一个页面 Navigator.of(context)!....I/flutter (23778): 路由返回值 我是返回值 需要注意的是 1，参数是通过构造方法传入的 2，如果点击左上角，或者返回按钮进行返回，则页面返回的值为 null 命名路由 有名字的路由
Flutter中的路由，通俗地讲就是页面跳转。在Flutter中通过 Navigator 组件管理路由导航。 Flutter中给我们提供了两种配置路由跳转的方式：基本路由和命名路由。...= null) {//页面跳转前有传参 final Route route = MaterialPageRoute( builder: (...= null) { //页面跳转前有传参 final Route route = MaterialPageRoute( builder: (context)...~${this.arguments["name"]}")//6，获取到传递过来的值 ); } } 这里的DetailPage是一个StatefulWidget类型的组件，我们按照上述123456...那么在绝大部分情况下，我们在页面跳转的时候，还是采取普通命名路由跳转的方式（而不是采取替换路由），此时，在跳转到多级页面之后，如何一键返回到主页面呢？
每个子布局都是一个带有子Navigator的Offstage控件。 不要忘记使用WillPopScope处理Android后退导航。 想要更长更有趣的解释吗？...首先，看一下免责声明： 本文假设您熟悉Flutter中的导航。 更多知识，请参阅Navigation基础知识教程，以及Navigator，MaterialPageRoute和MaterialApp。...MaterialPageRoute负责创建要推送的新路由。 Navigator.of（context)在窗口控件树中找到Navigator，并使用它来推送新route。...1_zSeQkAGwARf2KtSkZqgRSg.png 如果我们可以使用不是我们BottomNavigationBar的祖先的Navigator，那么它就会按预期工作。...请注意，navigatorKey的类型为GlobalKey 。
从页面跳转入口的代码进行分析： Navigator.of(context).pushNamed('/route1'); Navigator 的获取 Navigator 对应的 State 是 NavigatorState...state 是 _MaterialAppState 它构建的是 WidgetsApp 类型的 Widget ，同时 routes 和 onGenerateRoute 等参数也进行了透传。...也就是 _WidgetsAppState 的 _onGenerateRoute 方法实现： Route _onGenerateRoute(RouteSettings settings)...{ final String name = settings.name; //从widget注册的路由中获取name对应的WidgetBuilder final WidgetBuilder... route = widget.pageRouteBuilder( settings, pageContentBuilder, );
路由与导航 9.1 路由基础 9.1.1 基本概念 在前端应用中，页面又称路由，是屏幕或应用程序页面的抽象。...Flutter的路由管理和导航借鉴了前端和客户端中的设计思路，提供了Route和Navigator对路由进行统一管理。...MaterialPageRoute是Flutter提供的路由模板，是PageRoute的子类，定义了路由创建及切换时过渡动画的相关接口和属性，并自带页面切换动画。...命名路由需要提前注册路由页面标识符，在页面切换时通过路由标识符打开一个新的路由页面。...')), body: Center( child: Text('跳转路由错误！')
领取专属 10元无门槛券
手把手带您无忧上云
