flutter 命名路由跳转、传参

心已赠人 2021-07-24 19:08 503阅读 0赞

无参跳转:
    	1、引入要跳转的路由组件
    	2、在MaterialApp与home同级
    		routes:{ Map类型
    			'/路由名':(context)=>组件路由名()
    		}，
    		initialRoute:'/初始路由名'
    	3、在回调函数中设置
    			
    		 跳转:Navigator.pushNamed(context, '/命名路由')
    		 
    		 替换当前页面: Navigator.of(context).pushReplacementNamed('/路由名');
    		 
    		 回到根导航栏页面:
    		 (1)导入导航栏所在的文件
    		 (2)Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (context) => 
    		 new 导航栏所在类名()), (route) => route == null );
              	其中:
              	  通过导航栏所在类设置构造函数来接收参数并在类中进行逻辑设置,可指定返回导航栏的哪个路由页面
    
    有参跳转:
    	1、引入要跳转的路由组件
    	2、在该类中写如下形式的变量来配置路由信息
    	    var routes={ //Map类型
    	        "/命名路由":(context)=>组件名(),
    	        "/命名路由":(context,{arguments})=>组件名(arguments:arguments)
    	      };
    
    	3、在MaterialApp与home同级
    	
    		onGenerateRoute: (RouteSettings settings) { // 统一处理
    	        //获取路由名称
    	        final String name = settings.name; 
    	        //获取路由名后对应的值,即将方法赋值给方法
    	        final Function pageContentBuilder = this.routes[name]; 
    	        if (pageContentBuilder != null) 
    	          { if (settings.arguments != null) 
    	            { 
    	                //跳转传参
    	              final Route route = MaterialPageRoute( 
    	                //调用方法
    	              builder: (context) => pageContentBuilder(context, arguments: settings.arguments)); 
    	                return route;
    	              } else 
    	              { final Route route = MaterialPageRoute( builder: (context) => pageContentBuilder(context)); 
    	             	 return route; 
    	              } 
    	            } 
           }
           
         4、在回调函数中:
          	Navigator.pushNamed(context, '/命名路由',arguments: {
                   '键名':值
                 });
                 
         5、命名路由的组件通过构造函数接收参数
            var arguments;
         	类名({this.arguments});
         	this.arguments['键名'] 调用
    
    将有参跳转配置信息封装进文件中,即1、2、3封装
    
    	1、引入要跳转的路由组件
    	2、引入
    		import 'package:flutter/material.dart';
    		
    	3、在该文件中写如下形式的变量来配置路由信息
    	
    	    var routes={ //Map类型
    	        "/命名路由":(context)=>组件名(),
    	        "/命名路由":(context,{arguments})=>组件名(arguments:arguments)
    	      };
    		
    		var xx=(RouteSettings settings) { // 统一处理
    	        //获取路由名称
    	        final String name = settings.name; 
    	        //获取路由名后对应的值,即将方法赋值给方法
    	        final Function pageContentBuilder = routes[name]; 
    	        if (pageContentBuilder != null) 
    	          { if (settings.arguments != null) 
    	            { 
    	                //跳转传参
    	              final Route route = MaterialPageRoute( 
    	                //调用方法
    	              builder: (context) => pageContentBuilder(context, arguments: settings.arguments)); 
    	                return route;
    	              } else 
    	              { final Route route = MaterialPageRoute( builder: (context) => pageContentBuilder(context)); 
    	              return route; 
    	              } 
    	            } 
    	       };
    	       
    	4、在main.dart中,MaterialApp
    	   onGenerateRoute:xx
    	   
    	5、参数传递和获取步骤和上面相同

代码示例:  
**main.dart：**

import "package:flutter/material.dart";
    import 'page/1.dart';
    import 'page/2.dart';
    import 'page/3.dart';
    
    import 'page/routes.dart';
    
    
    void main()
    { 
      runApp(App());
    }
    
    class App extends StatelessWidget{ 
    
    
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return MaterialApp(
          home:Tabs(),
          //默认路由
          initialRoute:'/me' ,
          //路由跳转参数配置
          onGenerateRoute:routeInfo
          );
      }
    }
    //导航栏和主题都在Scaffold组件中设置
    class Tabs extends StatefulWidget { 
      final index;
      //回到根导航栏时设置的构造函数
      Tabs({ Key key,this.index=0}) : super(key: key);
    
      @override
      _TabsState createState() => _TabsState(index:this.index);
    }
    
    class _TabsState extends State<Tabs> { 
      int index=0;
      //将回到根导航栏的参数与页面关联
      _TabsState({ this.index=0});
      
      List _page=[Home3(),Home2(),Home4()];
      @override
      Widget build(BuildContext context) { 
        return Scaffold(appBar: AppBar(title: Text("hh")),
          body:_page[this.index],
    
          bottomNavigationBar: BottomNavigationBar(
            items:[ 
              BottomNavigationBarItem(//单个bar内容
                icon:Icon(Icons.home),
                title:Text("首页"),
              
              ),
              BottomNavigationBarItem(
                icon:Icon(Icons.category),
                title:Text("第二页"),
                
              ),
              BottomNavigationBarItem(
                icon:Icon(Icons.category),
                title:Text("第三页"),
    
              )
            ],
            currentIndex: this.index, //选中的底部bar索引
            fixedColor: Colors.green,  //选中的颜色
    
            onTap:(index){ setState(() { 
              this.index=index;
            });}, //点击bar回调,必须传入index参数,bar的索引
      
          ),
          );
      }
    }
    
    
    class Home extends StatelessWidget { 
      const Home({ Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          child: Column(
            children: <Widget>[
              
            ],
          ),
        );
      }
    }

--------------------

**封装的配置文件:**

import 'package:flutter/material.dart';
    
    import 'me.dart';
    import 'search.dart';
    
    
    var routes={  //Map类型
        "/me":(context)=>Me(),
        "/search":(context,{ arguments})=>Search(arguments:arguments)
      };
    
    var routeInfo=(RouteSettings settings) {  // 统一处理
            //获取路由名称
            final String name = settings.name; 
            //获取路由名后对应的值,即将方法赋值给方法
            final Function pageContentBuilder = routes[name]; 
            if (pageContentBuilder != null) 
              {  if (settings.arguments != null) 
                {  
                    //跳转传参
                  final Route route = MaterialPageRoute( 
                    //调用方法
                  builder: (context) => pageContentBuilder(context, arguments: settings.arguments)); 
                    return route;
                  } else 
                  {  final Route route = MaterialPageRoute( builder: (context) => pageContentBuilder(context)); 
                  return route; 
                  } 
                } 
    };

--------------------

**跳转的回调函数所在文件：**

import 'package:flutter/material.dart';
    
    
    class Home3 extends StatefulWidget { 
      Home3({ Key key}) : super(key: key);
    
      @override
      _Home3State createState() => _Home3State();
    }
    
    class _Home3State extends State<Home3> { 
      @override
      Widget build(BuildContext context) { 
        return Container(
        
           child:Column(
             crossAxisAlignment: CrossAxisAlignment.center,
             mainAxisAlignment: MainAxisAlignment.center,
             
             children: <Widget>[
             
               RaisedButton(child: Text("跳到search"),
                  color:Theme.of(context).accentColor,
                  onPressed:(){ 
                  //跳转、跳转传参数
                    // Navigator.pushNamed(context, '/search');
                     Navigator.pushNamed(context, '/search',arguments: { 
                       'id':"12344哈哈"
                     });
    
                  }
               ),
              
              SizedBox(height: 20,),
    
             ],
           ),
        );
      }
    }

**接收路由参数组件:**

import 'package:flutter/material.dart';
    
    class Search extends StatelessWidget { 
      var arguments;
      //接收参数
      Search({ this.arguments});
    
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
          floatingActionButton: FloatingActionButton(
            child: Text('返回'),
            onPressed: (){ 
              Navigator.of(context).pop();
            },
          ),
          appBar: AppBar(title:Text("search")),
          body:Home(arguments: this.arguments)
        );
      }
    }
    
    class Home extends StatelessWidget { 
      var arguments;
      Home({ this.arguments});
      @override
      Widget build(BuildContext context) { 
        return Container(
          child: Text("参数${this.arguments['id']}")
        );
      }
    }

回到导航栏组件:

import 'package:flutter/material.dart';
    
    import '../main.dart';
    
    class Me2 extends StatefulWidget { 
      String title='me';
    
    
      @override
      _Home2State createState() => _Home2State();
    }
    
    class _Home2State extends State<Me2> { 
    
      @override
      Widget build(BuildContext context) { 
        return Scaffold(appBar: AppBar(title: Text('me-son'),),
            body: Home(),
        );
      }
    }
    
    class Home extends StatelessWidget { 
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          child: Column(
            children: <Widget>[
              Text('me-sonnnnn'),
              
              RaisedButton(
                color: Theme.of(context).accentColor,
                child: Text('回到根'),
                onPressed: (){ 
                //回到根导航栏,导航栏的类设置了构造函数接收参数,并将参数与页面关联
                  Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (context) => new Tabs(index: 2)), 
                  (route) => route == null );
                },
              )
            ],
          )
        );
      }
    }