Flutter之路由管理

MaterialPageRoute

MaterialPageRoute 构造函数的各个参数的意义:

MaterialPageRoute({
  WidgetBuilder builder,
  RouteSettings settings,
  bool maintainState = true,
  bool fullscreenDialog = false,
})

builder 是一个WidgetBuilder类型的回调函数,它的作用是构建路由页面的具体内容,返回值是一个widget。我们通常要实现此回调,返回新路由的实例。
settings 包含路由的配置信息,如路由名称、是否初始路由(首页)。
maintainState:默认情况下,当入栈一个新路由时,原来的路由仍然会被保存在内存中,如果想在路由没用的时候释放其所占用的所有资源,可以设置maintainState为false。
fullscreenDialog表示新的路由页面是否是一个全屏的模态对话框,在iOS中,如果fullscreenDialog为true,新页面将会从屏幕底部滑入(而不是水平方向)。
如果想自定义路由切换动画,可以自己继承PageRoute来实现,我们将在后面介绍动画时,实现一个自定义的路由组件。

Navigator

Future push(BuildContext context, Route route)

将给定的路由入栈(即打开新的页面),返回值是一个Future对象,用以接收新路由出栈(即关闭)时的返回数据。

bool pop(BuildContext context, [ result ])

将栈顶路由出栈,result为页面关闭时返回给上一个页面的数据。

跳转一个新页面

Navigator.push( context,
  MaterialPageRoute(builder: (context) {
  return NewRoute();
}));

路由传值

pop时候传值

Navigator.pop(context, "我是返回值")

接收值

var result = await Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) {
      return TipRoute(
        // 路由参数
        text: "我是提示xxxx",
      );
    },
  ),
);
//输出`TipRoute`路由返回结果
print("路由返回值: $result");

命名路由

路由表的定义如下:

Map routes;

key为路由的名字,是个字符串;value是个builder回调函数,用于生成相应的路由widget

注册
MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  //注册路由表
  routes:{
   "new_page":(context) => NewRoute(),
    ... // 省略其它路由注册信息
  } ,
  home: MyHomePage(title: 'Flutter Demo Home Page'),
);
通过路由名打开新路由页

要通过路由名称来打开新路由,可以使用Navigator 的pushNamed方法:

Future pushNamed(BuildContext context, String routeName,{Object arguments})

onPressed: () {
  Navigator.pushNamed(context, "new_page");
  //Navigator.push(context,
  //  MaterialPageRoute(builder: (context) {
  //  return NewRoute();
  //}));  
},
命名路由参数传递
  • 注册

    routes:{
     "new_page":(context) => EchoRoute(),
    } ,
    
  • 传递

    Navigator.of(context).pushNamed("new_page", arguments: "hi");
    
  • 取值

    class EchoRoute extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        //获取路由参数  
        var args=ModalRoute.of(context).settings.arguments;
        //...省略无关代码
      }
    }
    
带参数路由页的注册
MaterialApp(
  ... //省略无关代码
  routes: {
   "tip2": (context){
     return TipRoute(text: ModalRoute.of(context).settings.arguments);
   },
 }, 
);
onGenerateRoute(onGenerateRoute只会对命名路由生效。)
MaterialApp(
  ... //省略无关代码
  onGenerateRoute:(RouteSettings settings){
      return MaterialPageRoute(builder: (context){
           String routeName = settings.name;
       // 如果访问的路由页需要登录,但当前未登录,则直接返回登录页路由,
       // 引导用户登录;其它情况则正常打开路由。
     }
   );
  }
);

你可能感兴趣的:(Flutter之路由管理)