Flutter 路由&页面传参

需求梳理

1、如何进行页面跳转
2、页面跳转时如何进行传值
3、参数回传

1 页面跳转

Flutter中分2种路由，分别是静态路由和动态路由

// 静态路由示列子

// step 1、---> 声明路由
class RoutePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "route_index",
      home: MyRouteMainPage(title: 'Route inedex Page'),

      routes:  {
        // 声明路由静态路由，不能传递参数
        '/router/routeone': (_) => new RoutOnePage(),
        '/router/routetwo': (_) => new RouteTwo(),
      },
    );
  }
}

// step 2、---> 调用路由，进行跳转

a、不需要返回值的跳转
Navigator.of(context).pushNamed('/router/routeone');

b、需要返回值的跳转
// 带返回值
Navigator.of(context).pushNamed('/router/routeone').then((value) {
    // dialog显示返回值
    _showDialog(context, value);
})

//跳转回去前传递参数给上一个页面
Navigator.of(context).pop('这个是要返回给上一个页面的数据');

带返回值的跳转，传递数据是任意结构的，支持泛型

动态路由

动态路由也可以实现页面跳转，并可以传递参数，由调用方传递给被吊起方，实现方式类似于构造函数传递参数的方式实现；

//传
Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
  return new SecondPage(
    title:'此处为参数'，
    name:'此处为名字参数'
  );
}))

//收
class SecondPage extends StatefulWidget {
  String title;
  String name;

  Wechat({
    Key key,
    this.title,
    this.name
  }) : super(key: key);

  @override
  State createState() {
    return new MyStatefulWidgetState();
  }
}