[移动开发]Flutter路由跳转（页面跳转）

1. 指定页面名称跳转Navigator.of(context).push(MaterialPageRoute()

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

  @override
  Widget build(BuildContext context) => MaterialApp(
          home: Scaffold(
        body: Center(
          child: TextButton(
            child: const Text(';跳转'),
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (context) {				
              	//返回要跳转的目标页面
                return _WillPopApp();
              }));
            },
          ),
        ),
      ));
}

2.指定路由名称跳转。

• 首先要注册路由名称：

//运行
  runApp(MaterialApp(
    routes: {
      //   //注册路由表
       "cartPage": (context) => const CartWidget(),
      'home': (context) => const HomeWidget(),
    },

• 通过路由名称跳转

 ElevatedButton(
                  child: const Text('命名的方式跳转'),
                  onPressed: () {
                    //路由命名的方式跳转到指定以页面
                    Navigator.pushNamed(context, "product",
                            //传递过去的数据
                            arguments: '我是传递的数据')
                        //返回的数据
                        .then((value) {
                      setState(() {
                        cartResult = value.toString();
                        print('返回的数据=$value');
                      });
                    });
                  },
                ),

3.通过onGenerateRoute方法实现页面拦截

比如在跳转个人中心或者结算订单的场景需要用户登录后才可执行后续操作onGenerateRoute方法在使用路由名称跳转的时候如果你使用的目标名称没有注册就会调用此方法

示例：onGenerateRoute方法判断

//如果使用命名的方式跳转，如果跳转的路由名称没有注册就会调用这个方法
    //可以利用这个方式拦截页面的跳转，比如说验证是否已登录
    onGenerateRoute: (RouteSettings settings) {
      return MaterialPageRoute(builder: (context) {
        if (isLogin) {
          switch (settings.name) {
            case "cartPage":
              return const CartWidget();
            case "product":
              return const ProductWidget(productName: '我是通过命名传递过来的');
            default:
              return const HomeWidget();
          }
        } else {
          return const LoginWidget();
        }
      });
    },

实现跳转：

ElevatedButton(
                  child: const Text('命名的方式跳转'),
                  onPressed: () {
                    //路由命名的方式跳转到指定以页面
                    Navigator.pushNamed(context, "cartPage",
                            //传递过去的数据
                            arguments: '我是传递的数据')
                        //返回的数据
                        .then((value) {
                      setState(() {
                        cartResult = value.toString();
                        print('返回的数据=$value');
                      });
                    });
                  },
                ),

退出页面

IconButton(
      icon: const Icon(Icons.arrow_back),
      onPressed: () {
                Navigator.pop(context, '我返回数据给你了');
         },
      ),