一.复习上一节

• 1、基本组件跳转
  Navigator.of(context).push(MaterialPageRoute( builder: (context) =>组件()));
• 2、基本组件传参
  Navigator.of(context).push(MaterialPageRoute( builder: (context) =>组件(参数)));
• 3、返回上一页面
  Navigator.of(context).pop();
• 4、悬浮组件
  Scaffold(floatingActionButton: FloatingActionButton());

二.命名路由使用

1、 配置路由

MaterialApp(
    routes: {
          "/search": (context) => SearchPage1(),
          "/search2": (context) => SearchPage2()
        });

2、 路由跳转

  Navigator.popAndPushNamed(context, "/search2");

• 注意

1、配置路由是MaterialApp 组件routes参数。
2、跳转路由时的使用的名字要与命名时一直。
3、注意导入包，如果主页面已经导过包了，子组件就不需要再导入了。

二.路由抽取

final routes = {
  "/search": (context) => SearchPage1(),
  "/search2": (context) => SearchPage2()
};


MaterialApp(routes: routes)

三.命名路传值问题

• 老版本的路由不支持传值所以看老版本都是提供一些插件来传值，但是新版本已经支持路由传值，但是配置还是很麻烦，监听onGenerateRoute()

• 直接拷贝监听中内容即可

 final routes = {
    "/search": (context) => SearchPage1(),
    "/search2": (context) => SearchPage2()
  };

//固定写法
var onGenerateRoute = (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;
    }
  }
};

  @override
  Widget build(BuildContext context) {
    return MaterialApp( onGenerateRoute: onGenerateRoute);
  }

• 注意

1、添加onGenerateRoute监听就不用添加routes 参数了。
2、路由和监听可以抽取出来放在单独的一个文件里面。
3、onGenerateRoute中通过监听，先获取名字，找得到对应的路由，如果由中参数不为空，把参数传入。

1.命名路由无状态组件传值

• 接受页面定义一个可选参数

 Map arguments;
 ListDataPage({this.arguments});

• 路由中添加参数

  "/listDataPage":(context, {arguments}) => ListDataPage(arguments: arguments)

• 调用传入参数

 Navigator.popAndPushNamed(context, "/listDataPage",arguments: {"id": "页面2传入"});

• 接受页面获取参数

Text("我是列表页面" +(this.arguments != null ? arguments["id"] : "没有传入内容"))

2.命名路由有状态组件传值

• 和无状态组件传值方式一致就是需要把参数传入到state类

class SearchPage2 extends StatefulWidget {
  final Map arguments;

  SearchPage2({Key key,this.arguments}) :super(key:key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return SearchPage2Widget(arguments:this.arguments);
  }
}

class SearchPage2Widget extends State<SearchPage2> {
  final Map arguments;

  SearchPage2Widget({this.arguments});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold（ body:Text(arguments!=nullarguments["id"]:"没有内容" )));
  }
}

• 注意

1、参数只能命名为arguments
2、注意导入跳转页面的包
3、监听赋值不需要加(),()代表执行

四.总结

命名路由传参步骤

• 1、写命名路由监听
  onGenerateRoute

• 2、配置路由
  final routes = { "/search": (context) =>SearchPage1()}

• 3、接受页面定义参数
  Map arguments;
  SearchPage1({this.arguments});

• 4、路由中添加参数
  "/search": (context, {arguments}) => SearchPage1(arguments: arguments)

• 5、跳转传入参数
  Navigator.popAndPushNamed(context, "/search",arguments: {"id":"页面1传入"})

• 6、接受页面获取参数
  Text(arguments != null ? arguments["id"] : "没有内容")