flutter04: 路由跳转

路由分两种：静态路由和动态路由

Flutter里面有路由支持所有的路由场景，push、pop页面，页面间的参数传递等等。flutter里面的路由可以分成两种，一种是直接注册，不能传递参数。另一种要自己构造实例，可以传递参数。我们暂时把它们规为静态路由和动态路由。
1、静态路由

//声明
import 'package:flutter_app/pages1/detail.dart';
return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter实例'),
      routes:  {
        // 这里可以定义静态路由，不能传递参数
        '/detail': (_) => new Detail(),
      },
    );

//不带返回值的
Navigator.of(context).pushNamed('/detail');
//返回的参数
Navigator.of(context).pop('这个是要返回给上一个页面的数据');
//带返回值的
Navigator.of(context).pushNamed('/detail').then((value) {
  // dialog显示返回值
  print(value);//value=这个是要返回给上一个页面的数据
});

2、动态路由

//首先要引入该类
import 'package:flutter_app/pages1/detail.dart';
//传  页面名字为home_page.dart 类名为HomePage
Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
    return new Detail(
        title:'此处为参数',
        name:'此处为名字参数'
    );
}));
//收
String title;
String name;
Detail({Key key,this.title,this.name}) : super(key: key);

appBar: AppBar(
  title: Text('详情$title'),
),

点击跳转的页面

HomePage.png

详情页面(无状态组件的获取方式)

Detail.png

详情页面（有状态组件获取方式）

image.png

image.png

将参数传给命名路由：

//定义路由参数
final routes = {
    '/index_detail': (context,{arguments}) => new IndexDetail(arguments:arguments),
  };
//命名路由
onGenerateRoute: (RouteSettings settings) {
        //统一处理  任意路由进行传值
        final String name = settings.name;
        final Function pageContentBuilder = this.routes[name];
        if (pageContentBuilder != null) {
          if (settings.arguments != null) {
            final Route route = MaterialPageRoute(
                builder: (context) =>
                    pageContentBuilder(context, arguments: settings.arguments));
            return route;
          } else {
            final Route route = MaterialPageRoute(
                builder: (context) => pageContentBuilder(context));
            return route;
          }
        }
      },
//跳转
Navigator.pushNamed(context,'/index_detail',arguments:{'id':'123'});
//返回到顶部根目录
Navigator.of(context).pushAndRemoveUntil(
              MaterialPageRoute(builder: (context)=>BottomNavigationWidget(index: 2,)), (Route)=>Route==null);

image.png