美文网首页程序员
Flutter中界面之间参数的传递与接收(push、pushNa

Flutter中界面之间参数的传递与接收(push、pushNa

作者: Good_Citizen | 来源:发表于2020-04-29 16:17 被阅读0次
场景:从Home页跳转到Detail页,并将Home页的一个数据传到Detail页进行显示,Detail在返回时也携带数据返回给Home页

一、flutter中通过push、pop来进行页面之间的跳转和返回

Home.dart Home界面的跳转代码

onPressed: (){
//            这里的代码返回的是Future  所以直接在后面可以接上then,也可以使用result.then((value){})
     Future result = Navigator.of(context).push(MaterialPageRoute(
                builder: (content){
                  return DetailPage(detailMessage: '从HomePage跳转过来的',);
                }
            )).then((value){
//              这里的方法在详情页返回时回调,value就是Detail页面返回时携带的数据
              message = value;
              setState(() {
              });
            });
  },

Detail.dart Detail页面返回按钮代码

构造方法
final String detailMessage;
  DetailPage({this.detailMessage});
返回按钮点击代码
onPressed: (){
    //            返回的时候携带数据回去
            Navigator.of(context).pop('从DetailPage返回回来的数据');
//            传的数据是泛型,所以也可以传对象
//            Navigator.of(context).pop({'username':'name','passwd':'admin'});
 },

二、flutter中通过pushNamed、pop来进行页面之间的跳转和返回

Home.dart Home界面的跳转代码

在Home页配置好路由
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
//      先加入跳转的路由 实际开发中最好将routes抽取到一个类中
      routes: <String, WidgetBuilder>{
        "/Detail":(context){
          return DetailPage();
        }
      },
    );
  }
}
通过pushNamed跳转的代码
          onPressed: (){
              Future result = Navigator.of(context).pushNamed('/Detail',arguments: '通过pushName从HomePage跳转过来的');
              result.then((value){
//                value就是Detail返回时携带的数据
              });
          },

Detail.dart Detail界面返回按钮代码

详情页接收Home页pushNamed跳转时携带的数据
final message = ModalRoute.of(context).settings.arguments;
详情页返回按钮点击代码
          onPressed: (){
              Navigator.of(context).pop('从DetailPage返回回来的数据');
          }

上面都是跳转到无参构造器的界面中,如果需要跳转到有参构造器的widget中,并传入参数,这时就需要用到回调函数onGenerateRoute

    return MaterialApp(
//      该回调函数可以自己生成路由
      onGenerateRoute: (settings){
//        判断路由名称并生成路由
        if(settings.name == "other"){
//          需要返回一个Route,Route是一个抽象类,所以需要找其子类,一般使用MaterialPageRoute
          return MaterialPageRoute(
              builder: (context){
//                argument就是pushnamed时传入参数
                final String argument = settings.arguments;
//                获取到参数后就可以传入有参构造器中
                return WPOther(argument);
              }
          );
        }
// 如果路由名称不是other,则返回null
        return null;
      },
    )

跳转的代码

//这里的arguments参数就是需要传入到构造器中的参数,在上面onGenerateRoute回调中就可以拿到该参数进行初始化
Navigator.of(context).pushNamed("other",arguments: "other-arguments");

如果跳转时传入的路由名称是随便填的,这样会导致程序奔溃,所以我们可以用onUnknownRoute回调函数返回一个错误提示的界面来防止程序奔溃

        return MaterialApp(
//      当跳转的路由不存在时会走这个回调,可以让他跳转到错误界面给出提示,防止奔溃
      onUnknownRoute: (settings){
        return MaterialPageRoute(
          builder: (context){
            return WPError(settings.arguments);
          }
        );
      },
    );

总结:

1、push跳转:直接使用下面的代码,将要跳转的界面DetailPage加入到MaterialPageRoute中,如果需要传参,就在DetailPage中加入对应的构造方法,直接进行传参

Navigator.of(context).push(MaterialPageRoute(
        builder: (content){
            return DetailPage(detailMessage: '从HomePage跳转过来的',);
        }
))

2、pushNamed跳转:MaterialApp中有个routes属性,是一个Map<String, WidgetBuilder>,WidgetBuilder是一个函数

final Map<String, WidgetBuilder> routes;
typedef WidgetBuilder = Widget Function(BuildContext context);
routes: <String, WidgetBuilder>{
跳转的路由名称"/Detail"
      "/Detail":(context){
返回需要跳转的widget
          return DetailPage();
      }
 },

跳转时可以传入参数 arguments
Navigator.of(context).pushNamed('/Detail',arguments: '通过pushName从HomePage跳转过来的');

接收参数代码
final message = ModalRoute.of(context).settings.arguments;

相关文章

网友评论

    本文标题:Flutter中界面之间参数的传递与接收(push、pushNa

    本文链接:https://www.haomeiwen.com/subject/wenwwhtx.html