Flutter 携带参数跳转页面与返回以及获取跨多个页面的返回值


1 匿名方式 实现页面跳转与返回

1.1 跳转下一页

Android风格

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

iOS风格

Navigator.push(
  context,
  CupertinoPageRoute(builder: (context) => const Page1()),
);

从下到上弹出页面

 Navigator.push(
   context,
   MaterialPageRoute(
     builder: (context) => const Page1(),
     // 全屏弹窗效果,从下往上出现
     fullscreenDialog: true,
   ),
 );

1.2 返回上一页

Navigator.of(context).pop()

1.3 传参跳转下一页并获取返回值

传参跳转下一页,并获取返回值

final result = await Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const Page1(param: 'param'),
  ),
);
print(result);

携带参数返回上一页

Navigator.of(context).pop('result value');

2 路由的方式 实现页面跳转与返回

2.1 路由配置

MaterialAppCupertinoApp中配置路由名称和页面的对应关系:

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.red),
      // 默认展示的页面路由
      initialRoute: "/",
      onGenerateRoute: (settings) {
        final routeName = settings.name;
        dynamic arguments = settings.arguments;

        switch (routeName) {
          case "/":
            return CupertinoPageRoute(builder: (context) => const RootPage());
          case "/page1":
            // 可接收参数
            String? param = arguments as String?;
            return CupertinoPageRoute(
                builder: (context) => Page1(param: param));
          default:
            return CupertinoPageRoute(
              builder: (_) => Scaffold(
                body: Center(
                  child: Text('UnknownScreen $routeName'),
                ),
              ),
            );
        }
      },
    );
  }
}

2.2 携带参数跳转页面 并获取返回值

普通跳转

Navigator.pushNamed(context, '/page1');

传参

Navigator.pushNamed(context, '/page1',arguments: 'param');

获取返回值

var result = await Navigator.pushNamed(context, '/page1', arguments: 'param');

2.3 跳转或返回指定页面并清空栈

销毁当前页面并跳转新的页面

Navigator.popAndPushNamed(context, '/page2');

返回指定页面

// 返回指定页面
Navigator.popUntil(context, (route) => route.settings.name == '/');
// 返回根页面
Navigator.popUntil(context, (route) => route.isFirst);

跳转至某页面,并销毁之前的页面

Navigator.pushNamedAndRemoveUntil(
                      context, '/page2', (route) => route.settings.name == '/');

3 返回指定页面(跨多个页面)并传递返回值

配置路由时 添加一个参数 Map()

 switch (routeName) {
   case "/":
     return CupertinoPageRoute(
       settings: RouteSettings(
         name: "/",
         arguments: Map(), //用于 popUntil 返回传值
       ),
       builder: (context) => const RootPage(),
     );
   ...
 }

返回指定页面 ’/’

 Navigator.popUntil(context, (route) {
   if (route.settings.name == '/') {
     (route.settings.arguments as Map)['result'] = '返回值';
     return true;
   } else {
     return false;
   }
 });

‘/’ 页面 获取返回值

 await Navigator.of(context).pushNamed('/page2');
 if (mounted) {
   final arguments =
       ModalRoute.of(context)?.settings.arguments as Map;
   final result = arguments['result'];
 }
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值