Flutter页面跳转Navigation和routes的基本使用

一.前言

Navigator是路由管理的组件，很方便的操作页面间的切换，管理栈路由。

二.Navigation基本使用

1.跳转到APage页面

    Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const APage()),
            );

2.跳转到APage页面,并传值

//传值   
Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => const APage(text: "我是A")),
            );

class APage extends StatelessWidget {
  final String text;
  const APage({Key? key, required this.text}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(text),
      ),
    );
  }
}

3.返回上一个页面

Navigator.pop(context);

4.返回上一个页面，并传值

Navigator.pop(context, "我是任意值");

//跳转到Apage页面 
Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => const APage()),
            ).then((value) {
               //打印上一个页面的返回值
              print(value);
            });

5.新的路由进栈并替换最顶部的路由(APage页面替换当前的页面)

   Navigator.pushReplacement(
            context,
            MaterialPageRoute(builder: (context) => const APage()),
          );

6.跳转到APage页面，并删除之前的路由栈

   Navigator.pushAndRemoveUntil(
            context,
            MaterialPageRoute(builder: (context) => const APage()),
            (route) => false,
          );

7.判断是当前页面否有上一级路由

Navigator.canPop(context)

三.通过routes命名路由表来管理页面

首先要注册路由表，为不同的的路由添加相应的名字映射，然后通过Navigator来管理路由

1.注册路由表 

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      //home:const APage(),
      //注册路由表  不可与home属性一起使用
      routes: {
        "/": (context) => const APage(),
        "/BPage": (context) => const BPage(),
        "/CPage": (context) => const CPage(),
      },
      //初始化路由，在路由表内寻找相应的路由
      initialRoute: "/",
    );
  }
}

1.从APage页面跳转到BPage页面

Navigator.pushNamed(context, "/BPage");

2.从APage页面跳转到BPage页面,并传值

Navigator.pushNamed(context, "/BPage", arguments: "我是任意值");

class BPage extends StatelessWidget {
  const BPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          '${ModalRoute.of(context)!.settings.arguments}',//获取的值
          style: TextStyle(fontSize: 25),
        ),
      ),
    );
  }
}

3.新的路由进栈并替换最顶部的路由(APage页面替换当前的页面)

Navigator.pushReplacementNamed(context, "/APage", arguments: "我是任意值");

4.获取上一个页面返回的值

Navigator.pushReplacementNamed(context, "/APage", arguments: "我是任意值")
            .then((value) {
          print(value);
        });

5.跳转到APage页面，并删除之前的路由栈

Navigator.pushNamedAndRemoveUntil(context, "/CPage", (route) => false);

6.当调用Navigator.pushNamed()导航到命名路由时使用的路由生成器回调。

四.扩展路由钩子

onGenerateRoute：如果 [routes] 不包含请求的路由，则使用此选项。在打开路由前可以根据逻辑需求进行业务处理。

onUnknownRoute：导航到未命名路由时使用的路由生成器回调

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      //注册路由表
      routes: {
        "/": (context) => const APage(),
        "/BPage": (context) => const BPage(),
      },
      //初始化路由，在路由表内寻找相应的路由 当使用 initialRoute 时，需要确保你没有同时定义 home 属性。
      initialRoute: "/",
      //导航到命名路由时使用的路由生成器回调。如果 [routes] 不包含请求的路由，则使用此选项。
      onGenerateRoute: (RouteSettings settings) {
        //[settings.name]路由名字
        //[settings.arguments]携带的值

        //  TODO根据业务需求跳转到相应的页面

        return MaterialPageRoute(
          builder: (context) => BPage(),
        );
      },

      //通过push导航到未命名路由时
      onUnknownRoute: (settings) {
        return MaterialPageRoute(builder: (context) => const ErrPage());
      },
    );
  }
}