Flutter 路由设置

Flutter管理多个页面时有两个核心概念和类：Route和 Navigator。 一个route是一个屏幕或页面的抽象，Navigator是管理route的Widget。Navigator可以通过route入栈和出栈来实现页面之间的跳转。

（一）Navigator常用的路由方式

    //普通跳转
    Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => Page())
    );

    //带参数的跳转
    Future result = Navigator.of(context).push(MaterialPageRoute(
        builder: (ctx) {
          return Page3("传进来的参数，点击返回，携带参数返回");
        }
    ));

    //接收返回的参数
    result.then((res) {
      setState(() {
        _handleMessage = res;
      });
    });

    //返回页面传递的参数
    Navigator.of(context).pop("这是返回携带的参数");

（二）命名路由跳转

第一步 需要在入口页面配置路由

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter',
      onGenerateRoute: onGenerateRoute,
      home: HomePage(),
    );
  }
}

第二步 配置路由内容和匹配内容

final  routes = {
  '/tabs/home':(context)=>HomePage(), //无参数
  '/tabs/menu':(context)=>MenuPage(),
  '/search':(context,{arguments})=>SearchPage(arguments:arguments) // 有参数
};

final onGenerateRoute = (RouteSettings setting) {
  final String rountName = setting.name;
  //打印路由日志
  print("open page $rountName");
  final Function pageContentBuilder = routes[rountName];
  if (pageContentBuilder != null) {
    if (setting.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: setting.arguments));
      return route;
    } else {
      final Route route = MaterialPageRoute(
          builder: (context) => pageContentBuilder(context)
      );
      return route;
    }
  }
};

第三步 使用命名路由

//没有参数
Navigator.pushNamed(context, "/button");
//带参数
Navigator.pushNamed(context, "/search",
    arguments: {"title": "传递的参数"});