当前位置: 首页 > 后端技术 > Python

Flutter的路由管理(页面跳转)

时间:2023-03-26 18:03:52 Python

路由:核心是路由映射表。比如:名称detail映射到DetailPage页面等。在Flutter中,路由管理主要有两种:Route和Navigator。通过路由统一管理,必须封装成一个RouteNavigator来管理所有的RouteWidget,通过一个Stack进行管理。MaterialApp、CupertinoApp和WidgetsApp默认插入到Navigator中。需要的时候,直接使用即可。Navigator.of(context)Navigator的常用方法://路由跳转:传入一个路由对象Futurepush(Routeroute)//路由跳转:传入一个名称(命名路由)FuturepushNamed(StringrouteName,{Objectarguments,})//路由返回:可以传入一个参数boolpop([Tresult])namedroutenamedroute是名字和route映射关系,统一管理一处。使用命名路由,可以使用Navigator.pushNamed()方法跳转到新页面。命名路由的位置放在MaterialApp的initialRoute和routes中。initialRoute:设置应用程序从哪个路由开始,如果设置了该属性,则无需设置home属性。name在routes中没有映射关系,就会执行onGenerateRoute钩子函数。另外onGenerateRoute也可以作为页面跳转的权限控制;onUnknownRoute:如果打开的路由名根本不存在,此时可以跳转到统一的错误页面。在开启具名路由时,如果路由表中注册了指定的路由名称,则会调用路由表中的builder函数生成路由组件;如果没有在路由表中注册,则会调用onGenerateRoute生成路由。完整代码import'package:flutter/material.dart';voidmain(){runApp(MyApp());}classMyAppextendsStatelessWidget{//这个小部件是你应用程序的根。@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'FlutterDemo',theme:ThemeData(primarySwatch:Colors.blue,splashColor:Colors.transparent),initialRoute:"/",路线:{"/":(context)=>MyHomePage(title:'FlutterDemoHomePage'),//注册主页路由//"/home":(ctx)=>HomePage(),"/detail":(ctx)=>DetailPage()},onGenerateRoute:(settings){//路由钩子。手动创建对应的Route返回;if(settings.name=="/about"){//settings.name:跳转的路径名returnMaterialPageRoute(builder:(ctx){returnAboutPage(settings.arguments);//settings.arguments:跳转时携带的参数});}returnnull;},onUnknownRoute:(settings){returnMaterialPageRoute(builder:(ctx){返回未知页面();});},);}}classMyHomePageextendsStatefulWidget{MyHomePage({Keykey,this.title}):super(key:key);最终字符串标题;@override_MyHomePageStatecreateState()=>_MyHomePageState();}class_MyHomePageStateextendsState{//最终消息=ModalRoute.of(context).settings.arguments;var_message='';_onPushTop(BuildContextcontext){finalfuture=Navigator.of(context).pushNamed('/detail',arguments:"ahomemessageofnanedroute");//主动态跳转时arguments传参数//2.获取结果future.then((res){setState((){_message=res;});});}@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text(widget.title),),body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[文本('显示结果:'+_message,),FlatButton(child:Text("跳转到下一页",style:TextStyle(color:Colors.black)),onPressed:()=>_onPushTop(context),),RaisedButton(child:Text("打开关于页面"),onPressed:(){Navigator.of(context).pushNamed(AboutPage.routeName,arguments:"ahomemessage");},),RaisedButton(child:Text("打开未知页面"),onPressed:(){Navigator.of(context).pushNamed("/abc");},),],),),),);}}classDetailPageextendsStatelessWidget{//在按钮上执行的代码click_onBackTap(BuildContextcontext){Navigator.of(context).pop("adetailmessage");}@overrideWidgetbuild(BuildContextcontext){//从上级页面接收参数finalmessage=ModalRoute.of(context).settings.arguments;返回新的脚手架(appBar:newAppBar(title:Text('这是第二页'),leading:IconButton(icon:Icon(Icons.arrow_back),onPressed:(){Navigator.of(context).pop("返回详细信息");//pop跳转时直接放参数},),),body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Text('首页带来的内容:'+message,),//child:RaisedButton(child:Text("BacktoHome"),onPressed:()=>_onBackTap(context),),]),),);}}classAboutPageextendsStatelessWidget{staticconstStringrouteName="/about";最终字符串消息;关于页面(此消息);@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text("AboutPage"),),body:Center(child:Text(message,样式:TextStyle(fontSize:30,color:Colors.red),),),);}}classUnknownPageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text("ErrorPage"),),body:Container(child:Center(child:Text("页面跳转错误”),),),);}}参考Flutter写的文章,需要源码的可以私信~~Mars字体简繁体转换哄女朋友神器号码测试好坏电视节目直播表最好用的笔记软件https:///www.wolai.com/signup?……