Flutter路由跳转(页面跳转)

本文介绍了Flutter中三种页面跳转方式:1. 指定页面名称跳转;2. 指定路由名称跳转,需先注册路由;3. 通过拦截方法确保如个人中心、结算页在用户登录后才能访问。同时,文章还提及了退出页面的操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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, '我返回数据给你了');
         },
      ),
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值