和iOS的NavigationController原理相同,都是使用堆栈的原理来管理页面。
在组件里可以使用Navigator.of(content)来获得父组件里的导航器
有两种方式来实现路由跳转
1,构建路由跳转
-
该builder方法中可以携带参数
-
push、pop都可以携带对象(参数、方法统称为对象),而pop所携带的参数类型是Future
-
push模式
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
child: Text('push'),
onPressed: () => Navigator.of(context).push(MaterialPageRoute(
builder: (content) {
return deee(str: 'demo');
},
)),
),
);
}
class deee extends StatelessWidget {
final Sting str;
//带参数的组件初始化方式
const _ListTodoDetail({Key key,@required this.str}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text('${this.str}'),
),
);
}
}
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
child: Text('push'),
//pop回来的值类型为Future,必须使用await来获取,而await必须在async异步线程中使用
onPressed: () async {
Future va = await Navigator.of(context).push(MaterialPageRoute(
builder: (context) => _PopPage()
));
//输出:we are coming'
print('$va');
}),));
}
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text('pop'),
),
body: Center(
child: Center(
child: RaisedButton(
child: Text('pop'),
onPressed: () => Navigator.of(context).pop('we are coming'),
),)));
}
2,命名路由跳转
-
在MaterialApp中设置,一般做一些通用跳转,不能传一些动态的参数;
-
可以在app中任意位置调用;
return MaterialApp(
title: 'Demo',
routes: {
'/back': (context) => Navigator.of(context).pop(),
}
)
//任意位置调用:
Navigator.pushNamed(context, '/back');
Navigator(
key: _navigatorKey,
initialRoute: 'signup/username',
onGenerateRoute: (settings) {
WidgetBuilder builder;
switch (settings.name) {
case 'signup/username':
builder = (_) => _UsernamePage();
break;
case 'signup/password':
builder = (_) => _PasswordPage();
break;
);
}
return MaterialPageRoute(builder: builder, settings: settings);
},
)
//在当前navigation下任意位置调用:
Navigator.of(context).pushNamed('signup/password')
如果有任何问题欢迎留言讨论。
传送门: