flutter 命名路由跳转、传参-蒲公英云

无参跳转:
    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 );
            },
          )
        ],
      )
    );
  }
}