Flutter开发6：路由跳转

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

我们可以自己创建导航器，但由于我们通常会使用MaterialApp控件，它的内部已经创建了导航器，因此可以使用Navigator.of来获取其内部的导航器对象。

MaterialApp的home指定的页面就是导航器堆栈底部的路由。要在堆栈上推送（push）一 个新路由，可以创建一个具有构建器功能的MaterialPageRoute对象，并将想要显示的页面在屏幕上展示出来。

MaterialPageRoute是一种模态路由，在不同平台上可以产生不同过渡动画来切换屏幕。对于Android，页面向上滑动过渡面，并将淡入淡出，弹出过渡则向下滑动页面。在iOS上，页面从右侧滑入，反向弹出。

跳转一个页面

onPressed: () {
         //动态路由
          Navigator.of(context).push(MaterialPageRoute(
            settings: const RouteSettings(
              arguments: {
                'id': 15,
                'name': 'zhangsan',
              },
            ),
            builder: (context) => const FirstPage(),
          ));
        },

动态路由

Flutter中的路由通常可分为动态路由和静态路由，像上面示例中使用了路由构建器生成路由的就属于动态路由，它是动态构建的。

有两种动态路由构建器

• PageRouterBuilder
• MaterialPageRoute

通常使用MaterialPageRoute即可，但当我需要自定义更加丰富的页面切换动画时，则需要使用PageRouterBuilder

///创建一个平移动画
SlideTransition createTransition(Animation<double> animation, Widget child) {
  return SlideTransition(
    position: Tween<Offset>(
      begin: const Offset(1.0, 0.0),
      end: const Offset(0.0, 0.0),
    ).animate(animation),
    child: child,
  );
}


    /// 通过PageRouteBuilder 以指定动画跳转新页面
    Navigator.of(context).push(
        PageRouteBuilder(pageBuilder: (BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation) {
          // 返回新页面
          return NewPage();
        }, transitionsBuilder: (BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,) {
          return createTransition(animation, child);
        }));

静态路由

静态路由也称为命名路由，使用起来更简单，它类似于Web前端中的URL跳转，但它不够灵活，实际项目中的使用并不多。

静态路由的使用分两部分，首先第一部分是注册，类似于配置。

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (ctx) => const MyHomePage(title: 'Flutter Demo Home Page'),
        '/first': (ctx) => const FirstPage(),
        '/second': (ctx) => const SecondPage(),
      },
    );

第二部分就是在合适的地方进行跳转

onPressed: () {
              Navigator.of(context).pushNamed('/second');
 },

路由相关的有三个属性需要注意

initialRoute: 指定初始路由的名字，即APP启动后应显示的页面
onGenerateRoute: 用于生成路由，实际上就是一个匹配器
onUnknownRoute: 无法匹配时的回调，类似于Web前端处理的 404 页面
使用中需要注意，initialRoute属性和home属性不应同时设置，它们表达的意义是一样的，只是表现形式不同。如果同时设置了，那么initialRoute的优先级也会高于home

动态路由和静态路由最大的区别
1.静态路由不能通过构造方法传参
2.如果APP有太多的页面时，使用注册路由表这种方式会显得臃肿而不灵活

动态路由传参与返回

//传参返回
Navigator.of(context).pop(false);
//普通返回
Navigator.of(context).pop();