flutter的导航和路由使用示例详解
导航和路由
Flutter提供了一个完整的用于在屏幕之间导航和处理深层链接的系统。没有复杂深度链接的小型应用程序可以使用Navigator
,而具有特定深度链接和导航要求的应用程序也应该使用Router
来正确处理Android
和iOS
应用上的深度链接,并在应用程序在web上运行时与地址栏保持同步。
使用Navigator导航
Navigator
导航组可以用正确的过渡动画来展示对应的界面,当然,和web端的路由类似,界面其实也是以栈
的形式保存着。
通过路由的buildContext
上下文,并且调用对应的push()
或pop()
方法,我们就可以导航到新的界面,比如:
onPressed: () { Navigator.of(context).push( MaterialPageRoute( builder: (context) => const SongScreen(song: song), ), ); }, child: Text(song.name),
由于Navigator
保存了一个Route
对象的堆栈(表示历史堆栈),所以push()
方法也使用Route
对象作为参数。MaterialPageRoute
对象是Route
的子类,用于指定Material Design
的过渡动画。
命名路由
对于有些具有简单导航和深度链接需求的应用程序,我们可以使用Navigator
进行导航,使用MaterialApp
对象的routes
属性对路由进行配置:
@override Widget build(BuildContext context) { return MaterialApp( routes: { '/': (context) => HomeScreen(), '/details': (context) => DetailScreen(), }, ); }
我们在这里配置的路由就是命名路由
。
命名路由的局限
尽管命名路由可以处理深层链接,但是他们的表现总是一致的,没办法做到自定义。当应用平台接收到一个新的深层链接,不论用户此时在哪个位置,Flutter都会将新的路线推送到导航器上。
使用命名路由的Flutter应用也不支持浏览器的前进按钮。基于这些原因,官方其实是不建议在大多数应用中使用命名路由。
当然,实际开发过程中,我们需要根据实际情况进行调整。
使用路由Router
具有高级导航和路由要求的Flutter应用程序(例如使用到每个屏幕的直接链接的web应用程序,或具有多个,或者嵌套导航Navigator
组件的应用程序)应使用诸如go_router
之类的路由包,该包可以在应用程序收到新的深度链接时解析路由路径并配置Navigator
。
要使用路由,我们需要切换到MaterialApp
或Cupertino App
上的路由器构造函数,并为其提供路由器配置。
MaterialApp.router( routerConfig: GoRouter( // … ) );
由于像go_router
这样的包是声明性的,所以当接收到深度链接时,它们将始终显示相同的界面。
同时使用Router和Navigator
Router
和Navigator
在设计时就可以协同工作。我们可以使用像go_router
这样的路由包的 API进行路由的跳转,也可以使用Navigator
的push()
或pop()
方法进行导航。
当我们使用Router
或声明性路由包进行导航时,Navigator
上的每个路由页面都是支持的。这表示,路由是根据页面上的使用了页面上参数的Navigator
构造函数创建的路由。
相反,通过调用Navigator.push()
等方法的路由导航,将会在导航中添加一个pageless
(无页面)的路由。如果我们使用的是路由包,则页面支持的路由始终是可深度链接的,而无页面的路由则不是。
当从导航器中删除页面支持的路由时,它之后的所有无页面路由也将被删除。例如,如果深度链接通过从导航器中删除页面支持的路由来导航,则之后(直到下一个_pagebacked路由)的所有无页面路由也将被删除。
深度链接 Deep linking
Flutter支持iOS、Android和web浏览器上的深度链接。打开URL会在应用程序中显示该屏幕。通过以下步骤,我们可以使用命名路由(使用routes参数或onGenerateRoute)或使用Router小部件启动和显示路由。
如果我们在web浏览器中运行应用程序,则无需额外设置。路由路径的处理方式与iOS或Android深度链接相同。默认情况下,web应用程序使用模式:/#/path/to/app/screen
从url片段读取深度链接路径,但这可以通过配置应用程序的url策略来更改。
在 Android 上启用 深度链接 Deep linking
只需要在AndroidManifest.xml
配置文件中的<activity>
标签中添加一个元数据标签和意向过滤器标签即可:
<!-- Deep linking --> <meta-data android:name="flutter_deeplinking_enabled" android:value="true" /> <intent-filter android:autoVerify="true"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="http" android:host="flutterbooksample.com" /> <data android:scheme="https" /> </intent-filter>
配置之后,重启整个应用即可。
在 ios 上启用 深度链接 Deep linking
需要在ios/Runner
文件夹下Info.plist
文件中添加两个新的key:
<key>FlutterDeepLinkingEnabled</key> <true/> <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLName</key> <string>flutterbooksample.com</string> <key>CFBundleURLSchemes</key> <array> <string>customscheme</string> </array> </dict> </array>
CFBundleURLName
是一个唯一的URL,用于将我们的应用程序与其他使用相同方案的应用程序进行区分。
配置完成后,同样需要进行应用的重启。
在web上配置URL策略
flutter web 应用支持两种URL策略:
- hash模式。如:
flutterexample.dev/#/path/to/screen
. - path模式。如:
lutterexample.dev/path/to/screen
.
配置起来也很简单,从flutter_web_plugins插件库导入usePathUrlStrategy方法,在入口函数中调用即可。
import 'package:flutter_web_plugins/url_strategy.dart'; void main() { usePathUrlStrategy(); runApp(ExampleApp()); }
PathUrlStrategy使用历史API,这需要对web服务器进行额外配置,具体怎么配置,应该跟nginx相关~
最后
熟悉了导航和路由,再加深一下对组件里的理解记忆,后面熟悉一下接口请求的方式,基本上就可以开始做flutter应用的开发了~
以上就是flutter的导航和路由使用示例详解的详细内容,更多关于flutter 导航路由的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7182100050330255417
相关文章
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
解决vue动态路由异步加载import组件,加载不到module的问题
这篇文章主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要介绍了解决vue-router路由拦截造成死循环问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
- 这篇文章主要给大家介绍了关于vue.js Router中嵌套路由的相关资料,所谓嵌套路由就是路由里面嵌套他的子路由,文章通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-06-27
- 这篇文章主要为大家详细介绍了使用jQuery.Pin垂直滚动时固定导航的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-27
- 这篇文章主要介绍了vue-router路由参数刷新消失的问题...2017-06-24
- 这篇文章主要介绍了vue-router为激活的路由设置样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18
- 这篇文章主要介绍了Vue鼠标滚轮滚动切换路由效果的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-04
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识,感兴趣的朋友一起学习吧...2016-07-29
- 这篇文章主要介绍了springboot中nacos动态路由的配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-11
- 这篇文章主要介绍了jQuery实现的导航下拉菜单效果,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2016-07-06
- 这篇文章主要介绍了基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载,需要的朋友参考下...2016-01-08
- 这篇文章主要给大家介绍了关于微信小程序实现导航功能的操作步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 这篇文章主要介绍了Bootstrap导航栏各元素操作方法,针对表单、按钮、文本进行操作,感兴趣的小伙伴们可以参考一下...2015-12-29
- 这篇文章主要给大家介绍了光宇微信小程序单页面应用路由的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
原创powershell脚本小工具ctracert.ps1跟踪路由(win8以上系统)
这篇文章主要介绍了原创powershell脚本小工具ctracert.ps1跟踪路由(win8以上系统),需要的朋友可以参考下...2020-06-30- 这篇文章主要介绍了vue路由分文件拆分管理详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-13
- 这篇文章主要介绍了vue相同路由跳转强制刷新该路由组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
- 这篇文章主要教会大家如何利用Bootstrap3制作自己的导航栏,设计自己喜欢的元素、样式,感兴趣的小伙伴们可以参考一下...2016-05-14